#1,063 – ViewBox Stretching Options

By default, content scaled by using a ViewBox will preserve its aspect ratio as it is being scaled.  Content is scaled until its size fills its container in one dimension.  White borders are added in the other dimension.

This default behavior corresponds to setting the Stretch property of the ViewBox to Uniform.  We can see this behavior below as we scale a Canvas.

1063-001

1063-002

If we set Stretch to Fill, the content always fills the available area and the aspect ratio is not preserved.  That is, content is stretched more in one direction than in another.

1063-003

Setting the Stretch property to UniformToFill preserves the aspect ratio, but content stretches until it fills the container in both dimensions.  If the aspect ratio of the container is different than that of the content, content is clipped.

1063-004

Finally, setting Stretch to None disables all scaling.

1063-005

 

Advertisements

#1,041 – Stretched Child Elements Not Stretched when Rotated

A value of Stretch for HorizontalAlignment or VerticalAlignment means that a child control should be stretched to fill the available width (HorizontalAlignment) or height (VerticalAlignment).  This is the default setting for child elements in a StackPanel.

If a rotate or skew transform is being applied using a LayoutTransform, however, the element will only be stretched when the rotation or skew angle is a multiple of 90.

In the example below, notice that the middle button is initially stretched, but then is not stretched as soon as we start rotating it.  It is stretched again once we rotate it by 90 and 180 degrees.

    <StackPanel>
        <Slider Name="sliRotate" Margin="10,10,10,0"
                Minimum="0" Maximum="359"
                TickFrequency="1" IsSnapToTickEnabled="True"/>
        <Label Content="{Binding Path=Value, ElementName=sliRotate}"
               HorizontalAlignment="Center"
               Margin="0,0,0,10"/>
        
        <Button Content="Eat" Padding="0,5"/>
        <Button Content="Love" Padding="0,5">
            <Button.LayoutTransform>
                <RotateTransform Angle="{Binding Path=Value, ElementName=sliRotate}"/>
            </Button.LayoutTransform>
        </Button>
        <Button Content="Pray" Padding="0,5"/>
    </StackPanel>

1041-001
1041-002
1041-003
1041-004
1041-005

#321 – HorizontalAlignment and VerticalAlignment

The HorizontalAlignment and VerticalAlignment properties specify how child controls should be located and sized within their parent container.

By default, controls placed in a vertically oriented StackPanel are stretched horizontally to fill the width of the StackPanel.  The StackPanel container sizes its child elements this way because the children’s HorizontalAlignment property is set to Stretch by default.

We can override this behavior by setting HorizontalAlignment to Left, Center or Right.  The control will then be aligned as indicated and the width set to fit the content.

    <StackPanel >
        <Label Content="Gene Autry the singing cowboy" Background="Pink"/>
        <Button Content="I Like Gene" HorizontalAlignment="Center"/>
        <Label Content="Roy Rogers" Background="Aqua"/>
        <Button Content="I Like Roy Rogers Yes I Do" HorizontalAlignment="Right"/>
    </StackPanel>


The valid values for HorizontalAlignment are:

  • Left
  • Center
  • Right
  • Stretch – stretch to fill available width

The valid values for VerticalAlignment are:

  • Top 
  • Center
  • Bottom
  • Stretch – stretch to fill available height

#278 – Allow an Image to Get Bigger, But Not Smaller (or Vice Versa)

Normally, when you set the Stretch property of an Image control to something other than None, the image can be resized up (larger) or down (smaller), obeying the rule of the specific Stretch value that you specify.

For example, if Stretch is set to Uniform, so that the image stretches to preserve the aspect ratio, you can resize a container window so that the image ends up either larger or smaller than its original size.

Smaller than original:

Larger than original:

If you want to constrain the image so that it can’t go larger or smaller than the original size, you can use the StretchDirection property.

Setting StretchDirection to DownOnly indicates that you can make the image smaller than the original, but not larger.

Setting StretchDirection to UpOnly indicates that you can make the image larger than the original, but not smaller.

#276 – Change Image Sizing Using the Stretch Property

The Stretch property of an Image control dictates whether the image will be stretched to fit the available space.

The None option indicates that the image should be displayed at its original size.  It is not stretched to fit the available space.

	<Image Source="TractorSm.png" Stretch="None"/>

The Uniform option (the default) causes the image to be stretched to fill the available space–just until one of its dimensions fits.  The container may show whitespace for the other dimension.

<Image Source="TractorSm.png" Stretch="Uniform"/>


The UniformToFill option also preserves the aspect ratio, but the image will continue to grow until both dimensions fit the available space.  The container may clip the image in one dimension.

<Image Source="TractorSm.png" Stretch="UniformToFill"/>


The Fill option stretches the image without preserving the aspect ratio, exactly filling the available space.  The image may appear distorted.

<Image Source="TractorSm.png" Stretch="Fill"/>