一个按钮周围的虚线边框

Question

我正在尝试在按钮周围绘制虚线边框，但边框没有显示出来。不确定我做错了什么，请帮忙看看？

我的 Xaml 代码：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">

    <Grid Background="Ivory">
        <Border Width="101" Height="31">
            <Border.BorderBrush>
                <VisualBrush>
                    <VisualBrush.Visual>
                        <Rectangle StrokeThickness="1" Stroke="Red" StrokeDashArray="1 2"/>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Border.BorderBrush>
            <Button Width="100" Height="30">
                Focus Here</Button>
        </Border>
    </Grid>
</Page>

注意: 现在的问题在于边框的粗细，但即使加上了边框粗细，点状边框仍然没有出现。

- Mike

---

你不也需要将 BorderThickness 设置为大于0吗？StrokeThickness 是笔刷的描边，据我所知，边框上的 BorderThickness 决定了可见性。 - Charleh

我以前没有见过像这样设置虚线边框的方法 - 你尝试将“矩形”尺寸设置为与边框相同了吗？也许与矩形大小有关？ - Charleh

是的，那就是问题所在了 - 我认为边框实际上是为自身的每条“边缘”渲染画笔，基本上是渲染4个矩形。如果您设置大小，则所有矩形的大小都正确，但基于它们的原点居中对齐，因此看起来很好。也许有更好的方法来获得虚线边框... - Charleh

Answer 1

VisualBrush的可视化元素无法自动确定其大小，因此VisualBrush未根据Border的大小进行绘制。还请注意，您需要为Border和Rectangle设置相同的BorderThickness。请查看下面的XAML代码，希望对您有所帮助。

<Border x:Name="MyBorderedButton" Width="101" Height="31" BorderThickness="2" >
      <Border.BorderBrush>
           <VisualBrush>
               <VisualBrush.Visual>
                   <Rectangle StrokeDashArray="4 2"
                      Stroke="Red"
                      StrokeThickness="2"
                      RadiusX="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=CornerRadius.TopRight}"
                      RadiusY="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=CornerRadius.BottomLeft}"
                      Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualWidth}"
                      Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualHeight}"/>
               </VisualBrush.Visual>
           </VisualBrush>
       </Border.BorderBrush>
       <Button>Focus Here</Button>
</Border>

对我来说它有效

- Somnath

Answer 2

在您的解决方案中，矩形没有大小，因此绘制时没有内容可供绘制，解决方法是从父边框继承大小：

<Border Width="101" Height="31" BorderThickness="1">
    <Border.BorderBrush>
        <VisualBrush>
            <VisualBrush.Visual>
                <Rectangle StrokeThickness="1"
                    Stroke="Red" 
                    StrokeDashArray="1 2"
                    Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualWidth}"
                    Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualHeight}" />
            </VisualBrush.Visual>
        </VisualBrush>
    </Border.BorderBrush>
    <Button>
        Focus Here
    </Button>
</Border>

- Lukazoid