WPF Resizing TextBlock with resizing of window

When dealing with XAML, many of you might have came across resizing issues in which your control is getting resize but the text/image inside the control is not getting resize as per the window size (it can be other user control). So, to deal this, Microsoft provide us with a Viewbox control, in which user can set the resizing aspects as per the need and requirement. So, this article, focuses mainly on the properties provided by Viewbox control with proper sample code & output.

Recently one of my colleague came across an issue where, resizing a window is not resizing the TextBlock accordingly. So, thought to post an article on it. Let’s see the code first:

<Window x:Class="ResizingTextblock.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="250" Width="250">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="1" Grid.Column="1">
            <TextBlock>
                Welcome
            </TextBlock>
        </Button>
    </Grid>
</Window>

So the above code will produce following output:

Now let’s pull window corner and stretch it. You will notice that button is getting resized with Window size but text size inside TextBlock is still the same one as:

So, to get rid of such sort of resizing issues, Microsoft provide us with Viewbox. Now change the code, by putting your TextBlock into the Viewbox as:
<Window x:Class="ResizingTextblock.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="250" Width="250">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="1" Grid.Column="1">
           <Viewbox StretchDirection="Both">
                <TextBlock> Welcome </TextBlock>
            </Viewbox>          
        </Button>
    </Grid>
</Window>

As soon as you will put TextBlock inside Viewbox, in design time, you will notice that TextBlock is filling out the button in much better way. Let’s run the application again and try to resize the window. Now you will notice that, text inside button is getting resize with window size very gracefully as:

So, while working with ViewBox there are couple of properties which one should be aware of. One is StretchDirection and other one is Stretch property. Let’s take one by one with sample code and bit big image. Here I am taking 246 X 252 image and below is the default view (i.e. prior to resizing):

StretchDirection
1) UpOnly: When you set the StretchDirection property to UpOnly and you resize the window, the content is allowed to get bigger but it is not allowed to be smaller than its original size.
Sample code:
       <Button>
            <Viewbox StretchDirection="UpOnly">
                <Image Source="\Zigzag.png"/>
             </Viewbox>
         </Button>
Output:
2) DownOnly: When you set the StretchDirection property to DownOnly and you resize the window, the content is not allowed to get bigger than its original size but it is allowed to be smaller.
Sample code:
       <Button>
            <Viewbox StretchDirection="DownOnly">
                <Image Source="\Zigzag.png"/>
             </Viewbox>
         </Button>
Output:
3) Both: When you set the StretchDirection property to Both and you resize the window, the content is allowed to be as big as you want and can be as small as desired.
Sample code:
       <Button>
            <Viewbox StretchDirection="Both">
                <Image Source="\Zigzag.png"/>
             </Viewbox>
         </Button>
Output:

Stretch Property:
Now to play around with Stretch property, I am going to put max height and width 500 respectively on to the Viewbox.
1) None: Setting value to None will keep the original pixel size as 246 X 252
Sample code:
       <Viewbox Stretch="None">
            <Button>
                <Image Source="\Zigzag.png"/>
             </Button>
         </Viewbox>
Output:

2) Fill: Setting value to Fill will allow content to be resized to fit the Viewbox’s dimensions but the aspect ratio of image is not preserved.
Sample code:
       <Viewbox Stretch="Fill">
            <Button>
                <Image Source="\Zigzag.png"/>
             </Button>
         </Viewbox>
Output:

3) Uniform: Setting value to Uniform will allow content to be resized to fit into the ViewBox as well as preserves the aspect ratio of image.
Sample code:
       <Viewbox Stretch="Uniform”>
            <Button>
                <Image Source="\Zigzag.png"/>
             </Button>
         </Viewbox>
Output:


4) UniformToFill: If value is set to UniformToFill, the will content is going to resize to fill the viewbox dimensions with aspect preservation
Sample code:
       <Viewbox Stretch=" UniformToFill">
            <Button>
                <Image Source="\Zigzag.png"/>
             </Button>
         </Viewbox>
Output:


Hope this tutorial makes sense for those who are facing resizing issues in XAML. Enjoy coding.

By Shweta Lodha   Popularity  (5075 Views)