Style a border with a different brush color for each corner

Question

I have created a static resource defining the border of a specific item in my xaml, but I can't find a good way to define a unique color for each side!

xaml:

<Border Style="{StaticResource SidePanelBorder}">         <!-- rest of the xaml --> </Border> 

StaticResource:

<Style x:Key="SidePanelBorder">     <Setter Property="Control.BorderBrush" Value="#FF363636" />     <Setter Property="Control.BorderThickness" Value="1" /> </Style> 

But I want to define one color for each side of the border, and eventually also a different Border thickness.

Any good techniques out there doing this?

Answer 1

Seems very hacky, but you could define borders within borders, and make only 1 side have a thickness. For example

<Border BorderThickness="0,0,0,10" BorderBrush="Green">     <Border BorderThickness="0,0,10,0" BorderBrush="Blue">         <Grid>             <Button>Hello</Button>         </Grid>     </Border> </Border> 

would give a green border on the bottom and a blue border to the right. Isn't the prettiest piece of Xaml though.

Answer 2

Another solution using one Border and a VisualBrush, allowing setting the Border's CornerRadius and BorderThickness:

<Border BorderThickness="10" CornerRadius="10" HorizontalAlignment="Right" Height="150" VerticalAlignment="Bottom" Width="150" Margin="0,0,92.666,42.667">     <Border.BorderBrush>         <VisualBrush>             <VisualBrush.Visual>                 <Grid>                     <Grid.RowDefinitions>                         <RowDefinition/>                         <RowDefinition/>                     </Grid.RowDefinitions>                     <Grid.ColumnDefinitions>                         <ColumnDefinition/>                         <ColumnDefinition/>                     </Grid.ColumnDefinitions>                      <Path x:Name="ColoredBorderLeft" Data="M0,0 L0,0 1,0.5 L1,0.5 0,1" Fill="Blue" Stretch="Fill" Grid.RowSpan="2"/>                     <Path x:Name="ColoredBorderRight" Data="M1,0 L1,0 0,0.5 L0,0.5 1,1" Fill="Red" Stretch="Fill" Grid.Column="1" Grid.RowSpan="2"/>                     <Path x:Name="ColoredBorderTop" Data="M0,0 L0,0 0.5,1 L0.5,1 1,0" Fill="Green" Stretch="Fill" Grid.ColumnSpan="2"/>                     <Path x:Name="ColoredBorderBottom" Data="M0,1 L0,1 0.5,0 L0.5,0 1,1" Fill="Yellow" Stretch="Fill" Grid.Row="1" Grid.ColumnSpan="2"/>                 </Grid>             </VisualBrush.Visual>         </VisualBrush>     </Border.BorderBrush> </Border> 

• The Grid is needed to prevent the tips of the triangle Paths to "push through" into the border.
• The Path.Name's can be used for DataBinding or setting the color from code behind.