How do I allow the user to resize a region of a form in WPF using just XAML?

In a previous how-to we looked at how to use a ScaleTransform to allow the user to re-size a region of a form using a slider control. When the value of the slider changed some C# code in the event handler created a new ScaleTransform, set its ScaleX and ScaleY values based on the value of the slider, and then assigned the ScaleTransform to the LayoutTransform of the item we wanted to re-size. It is also possible to do this without writing any "code" by creating a ScaleTransform in XAML and binding the ScaleX and ScaleY properites of the transform to the value of the slider.

WPF has some powerful data binding capabilities - usually people think of data binding as binding the property of a control to some underling data-structure - either relational data, XML or some "business object" from the problem domain. Binding can also be used to bind the value of two UIElements together. In the sample code (shown in full below) we've defined a slider in the same way as the previous example, but without specifying a ValueChanged handler.

Then for the grid we wish to re-size we add a child LayoutTransform element, and inside that we nest our ScaleTransform. The values for the ScaleX and ScaleY properties are bound to the value of the slider using the Binding markup extension. Markup extensions are defined inside the curly braces, and look similar to the way XPath functions can be used in XSLT. This binding expression tells WPF that the ScaleX and ScaleY properties should be bound to the Value property of the UISizer element.

The complete XAML (below) does all that the previous demo did, without requiring any C# or VB.NET code.

XAML (For Feb CTP):

<Window x:Class="ScaleTest.Window1"
    xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation "
    xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml "
    Title="ScaleTest" Height="300" Width="300"
    >
<StackPanel Orientation="Vertical">
    <StackPanel Orientation="Horizontal">
      <TextBlock FontSize="12">Smaller</TextBlock>
      <Slider Name="UISizer" Minimum="0.1" Maximum="5" Value="1">
      </Slider>
      <TextBlock FontSize="20">Bigger</TextBlock>
    </StackPanel>
    <Border BorderThickness="3" BorderBrush="#58290A">
      <Grid Name="ItemToResize" Background="#feca00" Width="500">
        <Grid.LayoutTransform>
          <ScaleTransform ScaleX="{Binding ElementName=UISizer, Path=Value}"
          ScaleY="{Binding ElementName=UISizer, Path=Value}" />
        </Grid.LayoutTransform>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition />
          <RowDefinition />
        </Grid.RowDefinitions>
        <TextBlock Grid.Column="0" Grid.Row="0" FontSize="15">Foo:</TextBlock>
        <TextBlock Grid.Column="0" Grid.Row="1" FontSize="15">Bar:</TextBlock>
        <TextBox Grid.Column="1" Grid.Row="1" Padding="3"></TextBox>
        <ComboBox Grid.Column="1" Grid.Row="0" Padding="3">
          <ListBoxItem>
            <TextBlock>Value 1</TextBlock>
          </ListBoxItem>
          <ListBoxItem>
            <TextBlock>Value 2</TextBlock>
          </ListBoxItem>
          <ListBoxItem>
            <Ellipse Width="50" Height="35" Fill="Orange" />
          </ListBoxItem>
          <ListBoxItem>
            <TextBlock>Value 4</TextBlock>
          </ListBoxItem>
        </ComboBox>
      </Grid>
    </Border>
    <TextBlock FontSize="20">This item will not change its size...</TextBlock>
</StackPanel>
</Window>

Menu