Many WPF applications allow a region of the form to be re-sized by the user by moving a slider control. This is a great feature for users with poor vision, who can resize regions of the form to a size that suits them, and also shows WPF's vector-based graphics system off to great effect. So how is this achieved? Sizing the UI relies on the ScaleTransform class in WPF. As the name suggests a ScaleTransform allows a specific UIElement and its children to be re-sized, either at the layout or at the render stage.
To apply a ScaleTransform to a UIElement you create a new ScaleTransform object, set the ScaleX and ScaleY properties and then assign the newly created ScaleTransform to the UIElements LayoutTransform or RenderTransform property. If you assign the new ScaleTransform to the LayoutTransform property the scaling happens before the sizes of all the controls have been measured, and the UIElements around the one you are scaling will re-size in accordance with the new size of the UIElement you scaled. If you assign the new ScaleTransform to the RenderTransform property then the scaling happens after the sizes of all the UIElements have been measured, and the new size of the UIElement you are changing won't be taken into account.
In the example application we create a slider, and attach a method to the ValueChanged event of the slider. In the ValueChanged event we create a new ScaleTransform, and assign it to the LayoutTransform of the UIElement we wish to size (in the sample application it is a grid with a text box, combo box and some text blocks nested inside it).
XAML:
<Slider Name="UISizer" Minimum="0.1" Maximum="5" Value="1" ValueChanged="UISizerValueChanged">
C#:
public void UISizerValueChanged(object sender, RoutedEventArgs e)
{
if (ItemToResize != null && UISizer != null)
{
// we could use ItemToResize.RenderTransform here too
ItemToResize.LayoutTransform =
new ScaleTransform(UISizer.Value, UISizer.Value);
}
}
Tip: Don't scale the slider (or other control) that the user will click on to re-size the region of the window. Doing so will cause the slider to change in size, which interferes with (usually magnifying) the changes made by the user. Also set sensible maximum and minimum values for the slider.
