Dynamically Aligned Controls In WPF

Introduction

 

Aligning controls on UI is a skill and a bit of a headache too.

 

One might go ahead and add a margin to every single control on-screen so that he/she can align them in a single line.

 

Here, they have to ensure that controls are aligned pixel by pixel. Being a developer, we might miss pixel or two & we won't even notice it.

 

IsSharedSizeScope is used to keep the control's alignment consistent between Panel's children.

Imagine a screen with hard-coded margins for every TextBox. It is always a bad practice, because as soon as the width of the main page or any content within page changes then all these hardcoded margins will stay unaffected of that change because of their hardcoded values.

Let me show you an example:

<StackPanel x:Name="StackPanelOuter"
               Orientation="Vertical">
       <StackPanel x:Name="StackPanelInnerUserName"
               Orientation="Horizontal" >
           <Label x:Name="LabelUserName"
              Content="User Name:"
              Margin="0 10 0 0"/>
           <TextBox x:Name="TextBoxUserName"
                Text="{Binding UserName}"
                Height="20"
                Width="150"
                Margin="50 10 0 0"/>
       </StackPanel>

       <StackPanel x:Name="StackPanelInnerPassword"
               Orientation="Horizontal">
           <Label x:Name="LabelPassword"
              Content="Password:" />
           <PasswordBox  x:Name="TextBoxPassword"
                Height="20"
                Width="150"
                Margin="60 0 0 0" />
       </StackPanel>

       <StackPanel x:Name="StackPanelInnerConfirmPassword"
               Orientation="Horizontal">
           <Label x:Name="LabelConfirmPassword"
              Content="Confirm Password:" />
           <PasswordBox x:Name="TextBoxConfirmPassword"
                Height="20"
                Width="150"
                Margin="14 0 0 0" />
       </StackPanel>

       <StackPanel x:Name="StackPanelInnerEmail"
               Orientation="Horizontal">
           <Label x:Name="LabelEmailId"
              Content="Email:" />
           <TextBox x:Name="TextBoxEmail"
                Height="20"
                Width="150"
                Margin="80 0 0 0"/>
       </StackPanel>

       <Button x:Name="ButtonLogin"
               Height="20"
               Width="100"
               Content="Register"
               HorizontalAlignment="Center"
               Margin="20 10 0 0"
               Command="{Binding RegisterButtonClicked}"
               />

       <TextBlock x:Name="TextBlockMessage"
                  Visibility="{Binding IsButtonClicked, Converter={StaticResource BooleanToVisibilityConverter}}"
                  Text="{Binding UserName, StringFormat='User: {0} is successfully registered!'}"
                  HorizontalAlignment="Center"
                  Margin="20 8 0 0"
                  />
   </StackPanel>

When you run the program, you will get an output as follows:

 

 

Everything works smoothly, there are no required changes.

 

Now let's say that tomorrow our client wants to change 3 labels.

1. Confirm Password to Password
2. User Name to Name
3. Email to Email Address

If we do that, our screen would look like this:

 

 

Now the developer again has to change Margins of these TextBoxes, and if the client asks for more changes then again developer has to change margins as per new requirements.

 

We can't really blame client here, it is in their blood to change requirements constantly, So we have to be flexible enough to write code which is extensible with the new requirements.

 

So to overcome this problem of hard-coded margin we can use SharedSizeScope in WPF.

 

We should let XAML handle this situation, And we can simply use IsSharedSizeScope Attached property of Grid panel.

We have to change inner stack panels to grids then make Grid.IsSharedSizeScope="True" of outer a stackpanel.

 

Here I will show you:

<Window x:Class="A.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="220" Width="350"
        >
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    </Window.Resources>
    <StackPanel x:Name="StackPanelOuter"
                Orientation="Vertical"
                Grid.IsSharedSizeScope="True">

        <Grid x:Name="GridPanelInnerUserName">
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="FirstColumn"/>
                <ColumnDefinition SharedSizeGroup="SecondColumn"/>
            </Grid.ColumnDefinitions>
            <Label x:Name="LabelUserName"
               Content="User Name:"
               Margin="0 10 0 0"/>
            <TextBox x:Name="TextBoxUserName"
                 Text="{Binding UserName}"
                 Height="20"
                 Width="150"
                 Grid.Column="1"/>
        </Grid>

        <Grid x:Name="GridPanelInnerPassword">
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="FirstColumn"/>
                <ColumnDefinition SharedSizeGroup="SecondColumn"/>
            </Grid.ColumnDefinitions>
            <Label x:Name="LabelPassword"
               Content="Password:" />
            <PasswordBox  x:Name="TextBoxPassword"
                 Height="20"
                 Width="150"
                 Grid.Column="1"/>
        </Grid>

        <Grid x:Name="GridPanelInnerConfirmPassword">
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="FirstColumn"/>
                <ColumnDefinition SharedSizeGroup="SecondColumn"/>
            </Grid.ColumnDefinitions>
            <Label x:Name="LabelConfirmPassword"
               Content="Confirm Password:" />
            <PasswordBox x:Name="TextBoxConfirmPassword"
                 Height="20"
                 Width="150"
                 Grid.Column="1"/>
        </Grid>

        <Grid x:Name="GridPanelInnerEmail">
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="FirstColumn"/>
                <ColumnDefinition SharedSizeGroup="SecondColumn"/>
            </Grid.ColumnDefinitions>
            <Label x:Name="LabelEmailId"
               Content="Email:" />
            <TextBox x:Name="TextBoxEmail"
                 Height="20"
                 Width="150"
                 Grid.Column="1"/>
        </Grid>

        <Button x:Name="ButtonLogin"
                Height="20"
                Width="100"
                Content="Register"
                HorizontalAlignment="Center"
                Margin="20 10 0 0"
                Command="{Binding RegisterButtonClicked}"
                />

        <TextBlock x:Name="TextBlockMessage"
                   Visibility="{Binding IsButtonClicked, Converter={StaticResource BooleanToVisibilityConverter}}"
                   Text="{Binding UserName, StringFormat='User: {0} is successfully registered!'}"
                   HorizontalAlignment="Center"
                   Margin="20 8 0 0"
                   />
    </StackPanel>
</Window>

Output

 

 

Wonderful. Aligned beautifully.

 

Conclusion

 

In this article, we learned how to align UI controls dynamically rather than hardcoding them.

 

We try to keep programming loosely coupled, so we should also focus on keeping UI loosely coupled to changes.

 

It is a good practice to use IsShareSizeScope while designing a page in WPF.

 

I hope you have learned something from the article.

 

Thank you for being a part of this, all the best!

 

And as always, Happy Coding!

 

Meet me @

• Twitter
• LinkedIn
• GitHub