Fortes

Border provides built-in functionality for drawing rounded corners through its CornerRadius property. Let’s go through some quick examples that introduce the functionality; we’ll use what we’ve learned here in later posts in order to create something more sophisticated.

First, here is a basic border without rounded corners :

<Border HorizontalAlignment="Center" BorderBrush="Black" BorderThickness="5" Margin="10">
    <TextBlock FontSize="25" FontFamily="Pericles">Lorem Ipsum</TextBlock>
</Border>

By setting the CornerRadius property on Border, we can quickly setup rounded corners:

<Border HorizontalAlignment="Center" BorderBrush="Green" BorderThickness="5" CornerRadius="50"  Margin="10">
    <TextBlock FontSize="25" FontFamily="Pericles">Lorem Ipsum</TextBlock>
</Border>

Notice how the rounded borders end up overlapping with the text in the previous example, this is because we haven’t set any padding for the contents. Border doesn’t try to automatically compensate for this overlap, so we’ll set the Padding property ourselves. I’ll also use a couple of simple gradients for the BorderBrush and Background in order to give a simple, button-like look to our border:

<Border HorizontalAlignment="Center" BorderBrush="VerticalGradient #eee #aaa" Background="VerticalGradient #bbb #eee" BorderThickness="5" CornerRadius="20" Padding="20"  Margin="10">
    <TextBlock FontSize="25" FontFamily="Pericles">Lorem Ipsum</TextBlock>
</Border>

Border suppors non-uniform values for CornerRadius and BorderThickness, I’ve used this to create a simple tab-like look for the border:

<Border HorizontalAlignment="Center" BorderBrush="VerticalGradient #eee #aaa" Background="#eee" BorderThickness="5, 10, 5, 0" CornerRadius="20, 20, 0, 0" Padding="20, 10" Margin="10">
    <TextBlock FontSize="25" FontFamily="Pericles">Lorem Ipsum</TextBlock>
</Border>

As you can see, it’s easy to use Border to quickly create a traditional UI-look — this is useful for when you want to style Avalon’s built-in controls, or create your own custom control. Obviously, you’ll want to tweak the layouts in order to provide hover/activation/etc states as well.

Gray buttons are pretty boring, especially given how easy it is to be silly / creative with your borders; here two more quick examples:

Here’s the full markup for all these borders in a single XAML file:

<StackPanel xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
  <Border HorizontalAlignment="Center" BorderBrush="Black" BorderThickness="5" Margin="10">
    <TextBlock FontSize="25" FontFamily="Pericles">Lorem Ipsum</TextBlock>
  </Border>

  <Border HorizontalAlignment="Center" BorderBrush="Green" BorderThickness="5" CornerRadius="50"  Margin="10">
    <TextBlock FontSize="25" FontFamily="Pericles">Lorem Ipsum</TextBlock>
  </Border>

  <Border HorizontalAlignment="Center" BorderBrush="VerticalGradient #eee #aaa" Background="VerticalGradient #bbb #eee" BorderThickness="5" CornerRadius="20" Padding="20"  Margin="10">
    <TextBlock FontSize="25" FontFamily="Pericles">Lorem Ipsum</TextBlock>
  </Border>

  <Border HorizontalAlignment="Center" BorderBrush="VerticalGradient #eee #aaa" Background="#eee" BorderThickness="5, 10, 5, 0" CornerRadius="20, 20, 0, 0" Padding="20, 10" Margin="10">
    <TextBlock FontSize="25" FontFamily="Pericles">Lorem Ipsum</TextBlock>
  </Border>

  <Border HorizontalAlignment="Center" BorderBrush="#008" Background="VerticalGradient #ffe #eea" BorderThickness="10" CornerRadius="200, 20, 200, 20" Padding="50"  Margin="10">
    <TextBlock FontSize="25" FontFamily="Pericles">Lorem Ipsum</TextBlock>
  </Border>

  <Border HorizontalAlignment="Center" BorderBrush="HorizontalGradient #060 #3c3" Background="VerticalGradient #f93 #fc9" BorderThickness="50,5" CornerRadius="200, 20, 200, 20" Padding="50, 30"  Margin="10">
    <TextBlock FontSize="25" FontFamily="Pericles">Lorem Ipsum</TextBlock>
  </Border>
</StackPanel>