fortes.com

Yesterday, I mentioned that you can use rounded corners on Border to do some silly things. The (admittedly poor) rendition of a rose above was created using only nested Border elements, along with a two-row Grid with a Viewbox wrapped around the entire thing. Clearly, this is not the way to make a drawing in Avalon (you should use Shapes), but I thought I’d share any way.

<Viewbox xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005" Margin="10">
  <!-- Background -->
  <Border Background="VerticalGradient LightBlue White" Grid.RowSpan="2" Padding="10">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="RadialGradient #ff6 transparent">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <!-- Stem -->
      <Border BorderBrush="VerticalGradient #630 #191" BorderThickness="0,0,10,0" CornerRadius="50,300,50,50" Margin="30,50,80,10" Grid.RowSpan="2"/>

      <!-- Petals -->
      <Border Grid.Row="1" BorderBrush="HorizontalGradient #060 #353" BorderThickness="10,30" CornerRadius="10,50,10,50" Margin="20,20,80,0" />
      <Border Grid.Row="1" BorderBrush="VerticalGradient #262 #292" BorderThickness="10,30" CornerRadius="50,10,50,10" Margin="80,20,20,0"/>
      <Border Grid.Row="1" BorderBrush="HorizontalGradient #040 #492" BorderThickness="30, 10, 30, 10" CornerRadius="80, 10, 80, 10" Margin="80, 0, 40,0" />
      <Border Grid.Row="1" BorderBrush="VerticalGradient #040 #492" BorderThickness="30, 30, 30, 30" CornerRadius="10, 80, 10, 80" Margin="40, 0, 80, 0" />

      <!-- Rose -->
      <Border BorderBrush="RadialGradient #900 #a22" Background="HorizontalGradient #d22 #c00" BorderThickness="0, 0, 10, 10" CornerRadius="150, 250, 350, 300" HorizontalAlignment="Center" Margin="0,0,50,20">
        <Border BorderBrush="RadialGradient #900 #a22" Background="HorizontalGradient #d22 #c00" BorderThickness="15, 0, 0, 15" CornerRadius="300, 200, 200, 50" Opacity="1">
          <Border BorderBrush="RadialGradient #a00 #c33" Background="RadialGradient #a00 #d22" BorderThickness="0,20,20,0" CornerRadius="100, 40, 60, 200">
            <Border BorderBrush="RadialGradient #c33 #a00" Background="RadialGradient #a00 #c33" BorderThickness="0,0,10,20" CornerRadius="10,60,60,60">
              <Border BorderBrush="HorizontalGradient #f00 #a00" Background="#a00" BorderThickness="20, 10, 0, 0" CornerRadius="40, 20, 20, 20">
                <Border BorderBrush="VerticalGradient #f66 #a00" Background="#a00" BorderThickness="0,0,10,10" CornerRadius="20,20,10,30">
                  <Border BorderBrush="HorizontalGradient #a33 #d22" Background="#d03" BorderThickness="10,10,0,0" CornerRadius="30,30,20,20">
                    <Border BorderBrush="RadialGradient #a00 #d33" BorderThickness="10" CornerRadius="30, 20, 30, 20"/>
                  </Border>
                </Border>
              </Border>
            </Border>
          </Border>
        </Border>
      </Border>
    </Grid>
  </Border>
</Viewbox>

By default, the Image element will scale uniformly to fill the available space within a layout. Uniform scaling is typically the right choice for an image, but for some scenarios a different technique is desirable.

Let’s use a sample photo I took to illustrate the different values:

• Uniform: Scale the image uniformly (i.e. maintain the original aspect ratio) such that the entire image is always visible. Once again, this is the default behavior.
• None: Do not scale the image at all, always display at it’s original size. If the available space is larger than the image, you’ll see unoccupied white space in your layout; if it’s smaller, the image will be clipped.
• Fill: Scale the image non-uniformly (i.e. disregard the original aspect ratio) such that the entire image is always visible. The image will always occupy all the available space, and none of it’s content is clipped (although the image will be distorted since the original aspect ratio is not maintained).
• UniformToFill: Scale the image uniformly until the entire available space is consumed. This is a mix of the other values, the aspect ratio is maintained, and the available space is always filled, but part of the image is clipped.

Here’s another screenshot of the same XAML at a different window size:

UniformToFill can be especially useful when creating a nice layout, I’ll illustrate this in the next post. For now, here’s the markup I used for the screenshots:

<Grid xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005" Background="Gray">
  <Grid.Resources>
    <Style TargetType="{x:Type TextBlock}">
      <Setter Property="VerticalAlignment" Value="Bottom" />
      <Setter Property="HorizontalAlignment" Value="Center" />
      <Setter Property="Margin" Value="12.5" />
      <Setter Property="FontFamily" Value="Consolas, Lucida Console" />
      <Setter Property="FontSize" Value="20" />
    </Style>

    <Style TargetType="{x:Type Border}">
      <Setter Property="Margin" Value="5" />
      <Setter Property="BorderThickness" Value="10, 10, 10, 40" />
      <Setter Property="BorderBrush" Value="White" />
    </Style>
  </Grid.Resources>

  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

  <Border Grid.Row="0" Grid.Column="0">
    <Image Source="http://fortes.com/2005/06/21/imagescaling/sunset.jpg"
           Stretch="Uniform"
           HorizontalAlignment="Center" VerticalAlignment="Center" />
  </Border>
  <TextBlock Grid.Row="0" Grid.Column="0">Uniform</TextBlock>

  <Border Grid.Row="0" Grid.Column="1">
    <Image Source="http://fortes.com/2005/06/21/imagescaling/sunset.jpg"
           Stretch="None"
           HorizontalAlignment="Center" VerticalAlignment="Center" />
  </Border>
  <TextBlock Grid.Row="0" Grid.Column="1">None</TextBlock>

  <Border Grid.Row="1" Grid.Column="0">
    <Image Source="http://fortes.com/2005/06/21/imagescaling/sunset.jpg"
           Stretch="Fill"
           HorizontalAlignment="Center" VerticalAlignment="Center" />
  </Border>
  <TextBlock Grid.Row="1" Grid.Column="0">Fill</TextBlock>

  <Border Grid.Row="1" Grid.Column="1">
    <Image Source="http://fortes.com/2005/06/21/imagescaling/sunset.jpg"
           Stretch="UniformToFill"
           HorizontalAlignment="Center" VerticalAlignment="Center" />
  </Border>
  <TextBlock Grid.Row="1" Grid.Column="1">UniformToFill</TextBlock>
</Grid>