How can I design individually the Border-Sides in XAML

Question

How can I design the Border only Top, Left, Right or Bottom Side in XAMl?

In CSS is this possible with Border-Top:...

Answer 1

The border thicknes is a composite property of the left, top, right and bottom thicknesses (notice the difference in order from CSS). If you specify only one value you set all of them, but you can specify them separately:

BorderThickness="1,2,3,4"

Answer 2

In XAML you don't have border property on elements like you have in CSS. However, you can use a <Border> element and set individual thicknesses just as you can i CSS (sets left-right and top-bottom border thickness):

<Border BorderBrush="Blue" BorderThickness="2,4">
  <TextBlock Text="Inside border"/>
</Border>

or (sets left, top, right, bottom thickness):

<Border BorderBrush="Blue" BorderThickness="1,2,3,4">
  <TextBlock Text="Inside border"/>
</Border>

If you need more control of the border you can use a panel for layout. E.g. using a <Grid>:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
  <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Blue" BorderThickness="2"/>
  <Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Green" BorderThickness="4"/>
  <Border Grid.Row="1" Grid.Column="0" BorderBrush="Red" BorderThickness="3"/>
  <Border Grid.Row="1" Grid.Column="2" BorderBrush="Red" BorderThickness="3"/>
  <TextBlock Grid.Row="1" Grid.Column="1" Text="Inside border"/>
</Grid>

You are free to put other visual elements in the grid cells.