Understanding WPF Layout Panels: Easy Examples of Grid, StackPanel, WrapPanel, DockPanel, Canvas & UniformGrid

If you are just starting out with WPF , layouts are something you must understand very clearly, because they control how every control such as button, textbox, etc. appears on the screen. ⭐ What Are Layout Panels? Think of layout panels like containers or boxes that help you arrange your UI elements . Just like when you pack a suitcase, you organize things in different sections — WPF uses layout panels to organize controls properly. They decide: where controls appear, how they resize, how they adapt when the window grows or shrinks. 📌 Let’s Learn Panels One by One (with real examples) 🟦 1. StackPanel — arrange controls in a line StackPanel arranges items one after another, either top to bottom or left to right. Let me show you a simple example. ✔ Example: Vertical StackPanel <StackPanel Orientation="Vertical">     <Button Content="Save" Width="100"/>     <Button Content="Edit" Width="100"/>     <Button Conte...

How to Enable/Disable Button on Validation using DelegateCommand of Prism


 MainWindow.xaml

 <Window x:Class="Wpf.Views.MainWindow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:Wpf"
             mc:Ignorable="d">
     <Window.Resources>
         <ControlTemplate  x:Key="TextBoxErrorStyle">
             <StackPanel Orientation="Horizontal">
                 <AdornedElementPlaceholder x:Name="ErrorHolder" >
                     <Border BorderBrush="red" BorderThickness="1" />
                 </AdornedElementPlaceholder>
                 <TextBlock  Text="{Binding [0].ErrorContent}" VerticalAlignment="Center" HorizontalAlignment="Right" Foreground="Red"/>

             </StackPanel>
         </ControlTemplate>

     </Window.Resources>
     <StackPanel Orientation="Vertical" HorizontalAlignment="Left" >
         <TextBox Height="30" Width="200" Text="{Binding Text,Mode=TwoWay,NotifyOnValidationError=True,
                  ValidatesOnDataErrors=True,UpdateSourceTrigger=PropertyChanged}"
                  Validation.ErrorTemplate="{StaticResource TextBoxErrorStyle}" Margin="5" />
         <Button Content="Click Here" Command="{Binding ClickCommand}" Margin="10" Width="100"/>
     </StackPanel>
 </Window>


 MainWindow.xaml.cs

 public partial class MainWindow : Window
     {
       
         public MainWindow()
         {
             InitializeComponent();
             DataContext= new MainWindowViewModel();
         
         }
       
     }

MainWindowViewModel.cs


 using Prism.Commands;
 using Prism.Mvvm;

 public class MainWindowViewModel : BindableBase, IDataErrorInfo
     {
         private string _text = string.Empty;

         public string Text
         {
             get
             {
                 return _text;
             }
             set
             {
                 SetProperty(ref _text, value);
                 ClickCommand.RaiseCanExecuteChanged();

             }
         }
       
         public string Error => string.Empty;

         public string this[string columnName]
         {
             get
             {

                 if (columnName == "Text")
                 {
                     if (string.IsNullOrEmpty(Text?.Trim()))
                         return "Text should not be empty";
                 }
                 return string.Empty;
             }

         }
       
         private DelegateCommand _clickCommand;
       
         public DelegateCommand ClickCommand
         {
             get
             {
                 return _clickCommand = _clickCommand ?? new DelegateCommand(Click, () => !string.IsNullOrEmpty(_text));
             }

         }
       
         private void Click()
         {
             //code
         }
     }

Comments

Popular posts from this blog

Filter DataGrid and ListView in wpf using ICollectionView

Pagination of DataGrid in WPF using MVVM

How to Create TabControl using Prism Region