wpf 为每个角设置不同画笔颜色的边框

Style a border with a different brush color for each corner

提问by code-zoop

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 中特定项目的边框，但是我找不到为每一边定义唯一颜色的好方法！

xaml:

xml:

<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?

有什么好的技术可以做到这一点？

回答by MoominTroll

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

看起来很hacky，但是您可以在边界内定义边界，并且仅使一侧具有厚度。例如

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

将在底部提供绿色边框，在右侧提供蓝色边框。虽然不是 Xaml 中最漂亮的部分。

回答by eriksmith200

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

使用一个 Border 和 VisualBrush 的另一种解决方案，允许设置 Border 的 CornerRadius 和 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.

• 需要 Grid 来防止三角形 Paths 的尖端“推入”边界。
• Path.Name 可用于数据绑定或从后面的代码设置颜色。

回答by viky

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

你可以有一个 DockPanel 并且可以在其中放置 4 个边框，每个边框停靠在不同的一侧。喜欢：

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

回答by amurra

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.

如果您使用 Grid，您可以将 Border 叠加在一起以达到相同的效果。只需设置要显示的边框颜色的边框粗细，并将其他边框粗细设为 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.

这将为左侧、顶部和右侧边框提供绿色边框，但为 Grid 单元格的底部边框提供红色边框。

回答by Rob Fonseca-Ensor

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

如果不编写自己的控件或子类化边框，就没有简单的方法可以做到这一点