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"              ...

How to count the no. of times the given character in second TextBox appears in First Textbox and add the index and matched character to ListBox

MainWindow

 <Window x:Class="WPFWorldTutorial.Views.MainWindow"

        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>

        <StackPanel Orientation="Vertical">

            <TextBox Text="{Binding Text}" Height="25" Margin="5"/>

            <TextBox Text="{Binding CharToMatch}" Height="25" Margin="5"/>

            <Button Content="Match" Command="{Binding MatchCharCommand}" Width="100" Margin="5"/>

            <ListBox ItemsSource="{Binding MatchedInfo}">

                <ListBox.Style>

                    <Style TargetType="ListBox">

                        <Setter Property="Visibility" Value="Visible"/>

                        <Style.Triggers>

                            <DataTrigger Binding="{Binding MatchedInfo.Count}" Value="0">

                                <Setter Property="Visibility" Value="Collapsed"/>

                            </DataTrigger>

                        </Style.Triggers>

                    </Style>

                </ListBox.Style>

                <ListBox.ItemTemplate>

                    <DataTemplate>

                        <StackPanel Orientation="Horizontal">

                            <TextBlock Text="{Binding Charecter}" Margin="5"/>

                            <TextBlock Text="->" Margin="5"/>

                            <TextBlock Text="{Binding Position}" Margin="5"/>

                        </StackPanel>

                    </DataTemplate>

                </ListBox.ItemTemplate>

                </ListBox>

        </StackPanel>

       

    </Grid>

</Window>

CharInfo.cs

Here BindableBase class i used from the prism if you are not using Prism you will not get BindableBase class you have to implement INotifyPropertyChanged

 public class CharInfo : BindableBase
    {
        private string _charecter;

        public string Charecter
        {
            get { return _charecter; }
            set
            {
                _charecter = value;
                SetProperty(ref _charecter, value);
            }
        }
        private int _position;

        public int Position
        {
            get { return _position; }
            set
            {
                _position = value;
                SetProperty(ref _position, value);
            }
        }
    }

Add these Property, Command and method to ViewModel

 private ObservableCollection<CharInfo> matchedInfo = new ObservableCollection<CharInfo>();

        public ObservableCollection<CharInfo> MatchedInfo { get => matchedInfo; set => SetProperty(ref matchedInfo, value); }

        private string text;

        public string Text { get => text; set => SetProperty(ref text, value); }

        private string charToMatch;

        public string CharToMatch { get => charToMatch; set => SetProperty(ref charToMatch, value); }

        private ICommand matchCharCommand;

        public ICommand MatchCharCommand
        {
            get
            {
                if (matchCharCommand == null)
                {
                    matchCharCommand = new DelegateCommand(MatchChar);
                }

                return matchCharCommand;
            }
        }

        private void MatchChar()
        {
            MatchedInfo.Clear();
            if (!string.IsNullOrEmpty(Text) && !string.IsNullOrEmpty(CharToMatch))
            {
                for (int i = 0, pos = -1; i < Text.Length;)
                {
                    pos = Text.IndexOf(CharToMatch, pos + 1);
                    if (pos < 0)
                        break;
                    MatchedInfo.Add(new CharInfo { Charecter = charToMatch, Position = pos });
                    i = pos + 1;
                } 
            }
        }





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