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 show xml data in DataGrid?

XMLData.xml

<Students>
  <Student>
    <Roll>1</Roll>
    <Name>Kumar</Name>
  </Student>
  <Student>
    <Roll>2</Roll>
    <Name>Harsh</Name>
  </Student>
</Students>

Create a class for xml data
public partial class Student
    {

        public int Roll { getset; }
      
        
        public string Name { getset; }
    }
Code To get data from xml file
XmlSerializer serializer = new XmlSerializer(typeof(ObservableCollection<Student>)newXmlRootAttribute("Students"));//here Student is type and Students is root of xml
         
            using (StreamReader reader = newStreamReader(@"D:\XMLData.xml"))
            {
                //Deserilize the xml file and assign to collection
                LstStudents =(ObservableCollection<Student>)serializer.Deserialize(reader);
            };
private ObservableCollection<Student> _lstStudents=new ObservableCollection<Student>();

        public ObservableCollection<Student> LstStudents
        {
            get { return _lstStudents; }
            set {SetProperty(ref _lstStudents , value); }
        }

Bind LstStudents to DataGrid
<DataGrid ItemsSource="{Binding LstStudents}"Width="200" AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Roll"Binding="{Binding Roll}"  />
                    <DataGridTextColumn Header="Name"Binding="{Binding Name}"  />
                </DataGrid.Columns>
              
            </DataGrid>

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