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 save data from datagrid to database in C# WPF?

DataGridEx.xaml

<Window x:Class="PrismApp.Views.DataGridEx"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:prism="http://prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True">
    <Grid>
        <DataGrid ItemsSource="{Binding LstEmployees}"
                  AutoGenerateColumns="False" CanUserAddRows="False" >
            <DataGrid.Columns>
                <DataGridTextColumn Header="Employee Id" Binding="{Binding EmpId}" IsReadOnly="True"/>
                <DataGridTextColumn Header="Employee Name" Binding="{Binding EmpName,UpdateSourceTrigger=PropertyChanged}" />
                <DataGridTextColumn Header="Job Title" Binding="{Binding JobTitle,UpdateSourceTrigger=PropertyChanged}"/>
                <DataGridTextColumn Header="Experience" Binding="{Binding Experience,UpdateSourceTrigger=PropertyChanged}"/>
                <DataGridTextColumn Header="Salary" Binding="{Binding Salary,UpdateSourceTrigger=PropertyChanged}"/>
                <DataGridTemplateColumn Header="Update" Width="*">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Content="P" FontFamily="Wingdings 2" FontWeight="ExtraBold"
                                    Background="Transparent" BorderThickness="0" FontSize="30"
                                    Command="{Binding DataContext.UpdateCommand,RelativeSource={RelativeSource AncestorType=DataGrid}}"
                                    CommandParameter="{Binding}">
                                <Button.Style>
                                    <Style BasedOn="{StaticResource {x:Type Button}}"  TargetType="Button">
                                        <Setter Property="Foreground" Value="Gray"/>
                                        <Setter Property="IsEnabled" Value="False"/>
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding IsValueChanged,UpdateSourceTrigger=PropertyChanged}" Value="true">
                                                <Setter Property="Foreground" Value="Green"/>
                                                <Setter Property="IsEnabled" Value="True"/>

                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Button.Style>
                            </Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>

    </Grid>
</Window>
DataGridEx.xaml.cs

 public partial class DataGridEx : Window
    {
        public DataGridEx()
        {
            InitializeComponent();
        }
  }


DataGridExViewModel.cs

 public class DataGridExViewModel : BindableBase
    {
        public DataGridExViewModel()
        {

            LoadEmployees();
            LstEmployees.Select(x =>
            {
                x.IsValueChanged = false;
                return x;
            }).ToList();
        }

        private ObservableCollection<Employees> _lstEmployees = new ObservableCollection<Employees>();
        public ObservableCollection<Employees> LstEmployees
        {
            get { return _lstEmployees; }
            set { SetProperty(ref _lstEmployees, value); }
        }
        private DelegateCommand<Employees> _updateCommand;
        public DelegateCommand<Employees> UpdateCommand =>
            _updateCommand ?? (_updateCommand = new DelegateCommand<Employees>(Update));

        void Update(Employees employee)
        {
            using(var sqlite = new SqliteOperation(@"\Projects\emp.db"))
            {
                sqlite.Update(employee);
            }
            LstEmployees.Select(x =>
            {
                if(x.EmpId == employee.EmpId)
                    x.IsValueChanged = false;
                return x;
            }).ToList();
        }
        private void LoadEmployees()
        {
            using(var sqlite = new SqliteOperation(@"\Projects\emp.db"))
            {
                LstEmployees.AddRange(sqlite.Get());
            }
        }


    }

SqliteOperation.cs

 public class SqliteOperation : IDisposable
    {
        public void Dispose()
        {
            GC.SuppressFinalize(this);
        }
        private readonly SQLiteConnection connection;
        public SqliteOperation(string connectionString)
        {
            connection = new SQLiteConnection(connectionString);
            connection.CreateTable<Employees>();
        }
        public void Add(Employees employee)
        {
            connection.Insert(employee);
        }
        public void Update(Employees employee)
        {
            connection.Update(employee);
        }
        public List<Employees> Get()
        {
            return connection.Table<Employees>().ToList();
        }
    }

Employees.cs

 public class Employees : BindableBase
    {
        private int _empId;

        [AutoIncrement, PrimaryKey]
        public int EmpId
        {
            get { return _empId; }
            set { SetProperty(ref _empId, value); }
        }
        private string _empName;
        [NotNull]
        public string EmpName
        {
            get { return _empName; }
            set
           {
                if(_empName != value)
                    IsValueChanged = true;
                SetProperty(ref _empName, value);
            }
        }
        private string _jobTitle;
        [NotNull]
        public string JobTitle
        {
            get { return _jobTitle; }
            set
            {
                if(_jobTitle != value)
                    IsValueChanged = true;
                SetProperty(ref _jobTitle, value);
            }
        }
        private string _experience;
        [NotNull]
        public string Experience
        {
            get { return _experience; }
            set
            {
                if(_experience != value)
                    IsValueChanged = true;
                SetProperty(ref _experience, value);
            }
        }
        private double _salary;
        [NotNull]
        public double Salary
        {
            get { return _salary; }
            set
            {
                if(_salary != value)
                    IsValueChanged = true;
                SetProperty(ref _salary, value);
            }
        }
        private bool _isValueChanged;
        [Ignore]
        public bool IsValueChanged
        {
            get { return _isValueChanged; }
            set { SetProperty(ref _isValueChanged, value); }
        }
    }


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