What is XAML in WPF? Explained with Simple Examples

Image
In this article, we’ll dive into one of the core building blocks of WPF — XAML. We’ll explore how it works and why it plays such an important role in building modern desktop applications. What is XAML? XAML stands for eXtensible Application Markup Language. It’s a markup language used to design the user interface in WPF applications. XAML allows developers and designers to work separately, making the code cleaner and easier to manage. Think of it as HTML for WPF apps. XAML Syntax XAML uses XML-style syntax. Every UI element is an XML tag. Attributes define properties like height, width, and content. You can also nest elements inside others to create more complex layouts. For example, placing a TextBlock inside a Grid layout. <Grid>     <TextBlock Text="Hello, WPF World!"                 Width="200"                 Height="50"              ...

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

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