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...
Post a Comment

Easy way of navigate using Prism in WPF

1.First.xaml



<UserControl x:Class="PrismMain.Views.First"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

             xmlns:local="clr-namespace:PrismMain.Views"

             mc:Ignorable="d"

             xmlns:prism="http://prismlibrary.com/"

        prism:ViewModelLocator.AutoWireViewModel="True">

    <StackPanel>

          <Button Content="Navigate To Second" Margin="5"  Command="{Binding NavigateCommand}" Width="150"/>

    </StackPanel>



</UserControl>


First.xaml.cs

public partial class First: UserControl

    {

        public First(FirstViewModel viewModel)

        {

            InitializeComponent();

            DataContext = viewModel;

        }



    }
FirstViewModel

 

  class FirstViewModel

    {

        public FirstViewModel(IRegionManager iregionManager)

        {
             NavigateCommand = new DelegateCommand(Nevigate);

            IregionManager = iregionManager;

        }



        private void Nevigate()

        {

            IregionManager.RequestNavigate("MainContent", "Second");

        }


        public ICommand NavigateCommand { get; }

        public IRegionManager IregionManager { get; }


    }

2.Second.xaml

 

<UserControl x:Class="PrismMain.Views.Second"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

             xmlns:local="clr-namespace:PrismMain.Views"

             mc:Ignorable="d"

             xmlns:prism="http://prismlibrary.com/"

        prism:ViewModelLocator.AutoWireViewModel="True">

    <StackPanel>

          <Button Content="Navigate To First" Margin="5"  Command="{Binding NavigateCommand}" Width="150"/>

    </StackPanel>



</UserControl>

Second.xaml.cs

public partial class Second: UserControl

    {

        public First(SecondViewModel viewModel)

        {

            InitializeComponent();

            DataContext = viewModel;

        }



    }


SecondViewModel

 

  class SecondViewModel

    {

        public SecondViewModel(IRegionManager iregionManager)

        {

            

            NavigateCommand = new DelegateCommand(Nevigate);

            IregionManager = iregionManager;

        }



        private void Nevigate()

        {

            IregionManager.RequestNavigate("MainContent", "First");

        }



       

        public ICommand NavigateCommand { get; }

        public IRegionManager IregionManager { get; }



    }

To navigate between these Views we need to register these views, for this we need to Implement IModule interface.

Here's how you can implement it:



 class MainModule : IModule

    {

        public void OnInitialized(IContainerProvider containerProvider)

        {

            var region = containerProvider.Resolve<IRegionManager>();

            region.RegisterViewWithRegion("MainContent", typeof(Main));

          //here i register the MainContent region of Main.xaml

        }



        public void RegisterTypes(IContainerRegistry containerRegistry)

        {

      

            containerRegistry.RegisterForNavigation<First>();

            containerRegistry.RegisterForNavigation<Second>();

          

        }



    }

Here MainContent is region name which is present in Main.xaml where these views are navigated.


Main.xaml

    

<metro:MetroWindow x:Class="PrismMain.Views.Main"



        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:PrismMain.Views"



        mc:Ignorable="d"



        xmlns:prism="http://prismlibrary.com/"



        xmlns:metro="http://metro.mahapps.com/winfx/xaml/controls" >



<Grid>



     <ContentControl prism:RegionManager.RegionName="MainContent" />



 </Grid>

</metro:MetroWindow>

Now time to configure Module to do this we need to override ConfigureModuleCatalog method inside App.xaml.cs

App.xaml.cs






 public partial class App



    {



     



        protected override Window CreateShell()



        {



            var shell = Container.Resolve<Main>();//where Main is a window to display on start up which present in view folder



            return shell;



        }



       



        protected override void RegisterTypes(IContainerRegistry containerRegistry)



        {



            



            



        }



        protected override void ConfigureModuleCatalog(IModuleCatalog moduleCatalog)



        {



            base.ConfigureModuleCatalog(moduleCatalog);



            moduleCatalog.AddModule<MainModule>();



        }



    }



Comments

Post a Comment

Popular posts from this blog

Filter DataGrid and ListView in wpf using ICollectionView

Image
EmployeeDetails.xaml <UserControl x:Class="PrismMain.Views.EmployeeDetails"         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:PrismMain.Views"         mc:Ignorable="d"        >     <Grid HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,50,0,0">         <Grid.RowDefinitions>             <RowDefinition Height="50"/>             <RowDefinition Height="*"/>             <RowDefinition Height="*"/> ...
Read more

Pagination of DataGrid in WPF using MVVM

Image
In this Post i will explain the pagination using the MVVM pattern. Lets first create the View with DataGrid and pagination control with First, Previous, Next and Last buttons and we will also have the number of record per page to be displayed in DataGrid option which is ComboBox and in this DataGrid i will load data from CSV file. View I will create the view with DataGrid like this And in this DataGrid i will load data from CSV file <Window x:Class="CURD.Views.EmployeeDetails"         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:CURD.Views"         mc:Ignorable="d"         Title="E...
Read more

How to Create TabControl using Prism Region

Image
MainWindow <metro:MetroWindow x:Class="PrismDemo.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:PrismDemo.Views"         mc:Ignorable="d" xmlns:prism="http://prismlibrary.com/"         Title="MetroPrismDemo"         xmlns:metro="http://metro.mahapps.com/winfx/xaml/controls">     <Grid>         <TabControl Margin="5" prism:RegionManager.RegionName =" TabRegion "                   VerticalAlignment="Stretch" HorizontalAlignment="Left" Bord...
Read more