Export (0) Print
Expand All

How to: Set the Width Properties of an Element

This example visually shows the differences in rendering behavior among the four width-related properties in Windows Presentation Foundation (WPF).

The FrameworkElement class exposes four properties that describe the width characteristics of an element. These four properties can conflict, and when they do, the value that takes precedence is determined as follows: the MinWidth value takes precedence over the MaxWidth value, which in turn takes precedence over the Width value. A fourth property, ActualWidth, is read-only, and reports the actual width as determined by interactions with the layout process.

The following Extensible Application Markup Language (XAML) examples draw a Rectangle element (rect1) as a child of Canvas. You can change the width properties of a Rectangle by using a series of ListBox elements that represent the property values of MinWidth, MaxWidth, and Width. In this manner, the precedence of each property is visually displayed.

<Canvas Height="200" MinWidth="200" Background="#b0c4de" VerticalAlignment="Top"  HorizontalAlignment="Center" Name="myCanvas">
    <Rectangle HorizontalAlignment="Center" Canvas.Top="50" Canvas.Left="50"  Name="rect1" Fill="#4682b4" Width="100" Height="100"/>
</Canvas>


...


    <TextBlock Grid.Row="1" Grid.Column="0" Margin="10,0,0,0" TextWrapping="Wrap">Set the Rectangle Width:</TextBlock>
    <ListBox Grid.Column="1" Grid.Row="1" Margin="10,0,0,0" Width="50" Height="50" SelectionChanged="changeWidth">
      <ListBoxItem>25</ListBoxItem>
      <ListBoxItem>50</ListBoxItem>
      <ListBoxItem>75</ListBoxItem>
      <ListBoxItem>100</ListBoxItem>
      <ListBoxItem>125</ListBoxItem>
      <ListBoxItem>150</ListBoxItem>
      <ListBoxItem>175</ListBoxItem>
      <ListBoxItem>200</ListBoxItem>
      <ListBoxItem>225</ListBoxItem>
      <ListBoxItem>250</ListBoxItem>
    </ListBox>

	<TextBlock Grid.Row="1" Grid.Column="2" Margin="10,0,0,0" TextWrapping="Wrap">Set the Rectangle MinWidth:</TextBlock>
    <ListBox Grid.Column="3" Grid.Row="1" Margin="10,0,0,0" Width="50" Height="50" SelectionChanged="changeMinWidth">
      <ListBoxItem>25</ListBoxItem>
      <ListBoxItem>50</ListBoxItem>
      <ListBoxItem>75</ListBoxItem>
      <ListBoxItem>100</ListBoxItem>
      <ListBoxItem>125</ListBoxItem>
      <ListBoxItem>150</ListBoxItem>
      <ListBoxItem>175</ListBoxItem>
      <ListBoxItem>200</ListBoxItem>
      <ListBoxItem>225</ListBoxItem>
      <ListBoxItem>250</ListBoxItem>
  </ListBox>      

    <TextBlock Grid.Row="1" Grid.Column="4" Margin="10,0,0,0" TextWrapping="Wrap">Set the Rectangle MaxWidth:</TextBlock>
    <ListBox Grid.Column="5" Grid.Row="1" Margin="10,0,0,0" Width="50" Height="50" SelectionChanged="changeMaxWidth">
      <ListBoxItem>25</ListBoxItem>
      <ListBoxItem>50</ListBoxItem>
      <ListBoxItem>75</ListBoxItem>
      <ListBoxItem>100</ListBoxItem>
      <ListBoxItem>125</ListBoxItem>
      <ListBoxItem>150</ListBoxItem>
      <ListBoxItem>175</ListBoxItem>
      <ListBoxItem>200</ListBoxItem>
      <ListBoxItem>225</ListBoxItem>
      <ListBoxItem>250</ListBoxItem>  
    </ListBox>

The following code-behind examples handle the events that the SelectionChanged event raises. Each custom method takes the input from the ListBox, parses the value as a Double, and applies the value to the specified width-related property. The width values are also converted to a string and written to various TextBlock elements (definition of those elements is not shown in the selected XAML).

private void changeWidth(object sender, SelectionChangedEventArgs args)
{
    ListBoxItem li = ((sender as ListBox).SelectedItem as ListBoxItem);
    Double sz1 = Double.Parse(li.Content.ToString());
    rect1.Width = sz1;
    rect1.UpdateLayout();
    txt1.Text = "ActualWidth is set to " + rect1.ActualWidth;
    txt2.Text = "Width is set to " + rect1.Width;
    txt3.Text = "MinWidth is set to " + rect1.MinWidth;
    txt4.Text = "MaxWidth is set to " + rect1.MaxWidth;
}
private void changeMinWidth(object sender, SelectionChangedEventArgs args)
{
    ListBoxItem li = ((sender as ListBox).SelectedItem as ListBoxItem);
    Double sz1 = Double.Parse(li.Content.ToString());
    rect1.MinWidth = sz1;
    rect1.UpdateLayout();
    txt1.Text = "ActualWidth is set to " + rect1.ActualWidth;
    txt2.Text = "Width is set to " + rect1.Width;
    txt3.Text = "MinWidth is set to " + rect1.MinWidth;
    txt4.Text = "MaxWidth is set to " + rect1.MaxWidth;
}
private void changeMaxWidth(object sender, SelectionChangedEventArgs args)
{
    ListBoxItem li = ((sender as ListBox).SelectedItem as ListBoxItem);
    Double sz1 = Double.Parse(li.Content.ToString());
    rect1.MaxWidth = sz1;
    rect1.UpdateLayout();
    txt1.Text = "ActualWidth is set to " + rect1.ActualWidth;
    txt2.Text = "Width is set to " + rect1.Width;
    txt3.Text = "MinWidth is set to " + rect1.MinWidth;
    txt4.Text = "MaxWidth is set to " + rect1.MaxWidth;
}

For the complete sample, see Width Properties Comparison Sample.

Show:
© 2014 Microsoft