wpf - wpf/xaml 中的仅角边框

Question

在一些 xaml 中，我希望有一个边框，该边框距离每个角只有几个像素。因此，沿着顶部，边框将是，比如说，左侧边缘有 5 个黑色像素，然后在顶部的其余部分透明，直到右侧边缘的 5 个像素，然后是边框的最后 5 个像素右边缘将是黑色的。目的是为选择偶尔透明的东西提供一些指导；但是，在此应用程序中，完整边框的存在会干扰内容(在感知-视觉意义上)。角不是圆的。

看起来像这样的东西:

--          --
|            |




|            |
--          --

我应该使用什么类型的画笔来实现这种效果？

我试过线性渐变，像这样:

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
    <GradientStop Color="Black" Offset="0" />
    <GradientStop Color="Black" Offset="0.01" />
    <GradientStop Color="Transparent" Offset="0.0101" />
    <GradientStop Color="Transparent" Offset="0.9899" />
    <GradientStop Color="Black" Offset="0.99" />
    <GradientStop Color="Black" Offset="1" />
</LinearGradientBrush>

当然，这只是左上角和右下角。这对于预期的应用程序来说可能是合理的，但只有当边界区域是正方形时，每个角上的线的大小才相同(例如，如果边界区域是一个长矩形，边界部分沿着一个角延伸得更远)一边比另一边)。

我注意到渐变画笔上的“绝对”的 MappingMode 值。这适用于左上角，但不适用于其他角。

我还尝试了 RadialGradientBrush，认为我可以得到一个环来击中角落，但没有成功地将它正确居中或让它沿着两侧击中相等的长度。

这是 ListBox 中 ItemContainerStyle 的一部分，边框通过 IsSelected 的 Trigger 改变。为此，我也不能做borders within borders(within borders等)。

编辑 #2: 我还尝试了 VisualBrush。我知道我可以在网格中获得我想要的行为(至少是拉伸(stretch)行为)。

<VisualBrush Stretch="Fill">
    <VisualBrush.Visual>
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="10" MaxWidth="10" MinWidth="10" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="10" MaxWidth="10" MinWidth="10" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="10" MaxHeight="10" MinHeight="10" />
                <RowDefinition Height="*" />
                <RowDefinition Height="10" MaxHeight="10" MinHeight="10" />
            </Grid.RowDefinitions>
            <Rectangle Grid.Column="0" Grid.Row="0" Fill="Black" />
            <Rectangle Grid.Column="1" Grid.Row="0" Fill="Transparent" />
            <Rectangle Grid.Column="2" Grid.Row="0" Fill="Black" />
            <Rectangle Grid.Column="0" Grid.Row="1" Fill="Transparent" />
            <Rectangle Grid.Column="1" Grid.Row="1" Fill="Transparent" />
            <Rectangle Grid.Column="2" Grid.Row="1" Fill="Transparent" />
            <Rectangle Grid.Column="0" Grid.Row="2" Fill="Black" />
            <Rectangle Grid.Column="1" Grid.Row="2" Fill="Transparent" />
            <Rectangle Grid.Column="2" Grid.Row="2" Fill="Black" />
        </Grid>
    </VisualBrush.Visual>
</VisualBrush>

但是，这也行不通。似乎在刷子内部不会以相同的方式调整大小。在这种情况下，VisualBrush 中 Grid 的大小最终为 20x20，中间的透明部分不占用空间。将 Horizo​​ntalAlignment 和 VerticalAlignment 设置为 Stretch 也无济于事。 VisualBrush 上的 Stretch="Fill"也没有做任何事情。

编辑 #1:更广泛的背景:

<ListBox.ItemContainerStyle>
    <Style TargetType="{x:Type ListBoxItem}">
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
        </Style.Resources>
        <Setter Property="Margin" Value="3" />
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="BorderThickness" Value="5" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="BorderBrush" Value="Fuchsia" />
            </Trigger>
            <Trigger Property="IsSelected" Value="False">
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Padding" Value="4" />
                <Setter Property="BorderBrush">
                    <Setter.Value>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                            <GradientStop Color="Black" Offset="0" />
                            <GradientStop Color="Black" Offset="0.01" />
                            <GradientStop Color="Transparent" Offset="0.0101" />
                            <GradientStop Color="Transparent" Offset="0.9899" />
                            <GradientStop Color="Black" Offset="0.99" />
                            <GradientStop Color="Black" Offset="1" />
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</ListBox.ItemContainerStyle>

Answer 1

您可以使用 Path ...这将绘制与您正在寻找的内容类似的内容:

<Path Stroke="Black" Stretch="Fill" 
      Data="M0,0 l10,0 m80,0 l10,0 m0,0 l0,10 m0,80 l0,10 m0,0 l-10,0 m-80,0 l-10,0 m0,0 l0,-10 m0,-80 l0,-10"
      Height="100" Width="100" Margin="10" />

完整代码示例:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Path Stroke="Black" Stretch="Fill" 
              Data="M0,0 l10,0 m80,0 l10,0 m0,0 l0,10 m0,80 l0,10 m0,0 l-10,0 m-80,0 l-10,0 m0,0 l0,-10 m0,-80 l0,-10"
              Height="100" Width="100" Margin="10" />
    </Grid>
</Window>