Wpf 为每个角使用不同的笔刷颜色设置边框样式

我已经在xaml中创建了一个静态资源来定义特定项的边框，但是我找不到一个好方法来为每一面定义唯一的颜色

xaml：

静态资源：

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

但我想为边界的每一侧定义一种颜色，并最终定义不同的边界厚度

---

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

如果不编写自己的控件或子类化边框，就很难做到这一点。

看起来非常粗糙，但您可以在边框内定义边框，并使只有一面具有厚度。比如说

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

你好

---

底部为绿色边框，右侧为蓝色边框。这不是Xaml中最漂亮的部分。

你可以有一个DockPanel，可以在里面放4个边框，每个边框停靠在不同的一边。 比如：

……这里由你控制

如果您使用网格，您可以将边框重叠在另一个网格上，以实现相同的效果。只需设置要显示的边框颜色的边框厚度，并将其他边框厚度设置为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>

---

这将为网格单元的左、上和右边框提供绿色边框，但为下边框提供红色边框。

另一种解决方案使用一个边框和可视化笔刷，允许设置边框的拐角半径和边框厚度：

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

• 需要网格来防止三角形路径的尖端“穿过”边界
• Path.Name可用于数据绑定或设置代码隐藏的颜色

---

我想用边框创建一个插入效果。嗯，真可惜！应该像在html和css中一样简单，在html和css中有边框顶部、边框右侧等等！这正是我自己发现的最佳解决方案。对于像这样简单的东西，应该没有必要引入两个边界，但我想我必须采用您的解决方案！感谢“L0,01,0.5”并没有（仅仅）从（0,0）到（1,0.5）划一条线。它实际上与“L0,0 L1,0.5”相同：从当前点到（0,0）绘制一条线，然后绘制到（1,0.5）

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

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