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