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?

Solution 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.

Solution 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.

Solution 3

you can have a DockPanel and can put 4 Borders inside it, each docked to different side. like:

<DockPanel LastChildFill="true">
    <Border DockPanel.Dock="Left" Background="Red"/>
    <Border DockPanel.Dock="Top" Background ="Blue"/>
    <Border DockPanel.Dock="Right" Background ="Yellow"/>
    <Border DockPanel.Dock="Bottom" Background ="Green"/>
    <Grid>
     ...........your control here
    </Grid>
</DockPanel>

Solution 4

If you use a Grid you can have Border's overlay on one another to achieve the same affect. Just set the border thickness of the border color you want to show and have the other border thickness be 0.

    <UserControl.Resources>
        <Style x:Key="GreenBorder" TargetType="Border">
            <Setter Property="BorderBrush" Value="Green" />
            <Setter Property="BorderThickness" Value="1,1,1,0" />          
        </Style>
        <Style x:Key="RedBorder" TargetType="Border">
            <Setter Property="BorderBrush" Value="Red" />
            <Setter Property="BorderThickness" Value="0,0,0,1" />
        </Style>
    </UserControl.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource GreenBorder}">
            <!-- Content goes here -->
        </Border>
        <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource RedBorder}">
        </Border>
    </Grid>

This will give a Green border to the left, top and right borders, but a Red border to the bottom border of the Grid cell.

Solution 5

there's no easy way to do this without writing your own control or subclassing border

View more solutions

Comments

[code-zoop]

Hmm, that's a shame! Should have been as easy as in html and css where you have border-top, border-right and so on!

[code-zoop]

This is exactly what I found as the best solution my self. It shouldn't be necessary to introduce 2 borders for something as simple as this, but I guess I'll have to go for your solution! Thanks

[Hans Kesting]

Note that "L0,0 1,0.5" does not (just) draw a line from (0,0) to (1, 0.5). It is actually identical to "L0,0 L1,0.5": draw a line from the current point to (0,0), then draw to (1, 0.5) docs