如何在 WPF 中实现虚线或虚线边框？

Posted 2023-02-19

【中文标题】如何在 WPF 中实现虚线或虚线边框？

【英文标题】：How can I achieve a dashed or dotted border in WPF?

【发布时间】：2011-09-05 22:15:22

【问题描述】：

我有一个ListViewItem，我正在应用Style，我想在底部添加一条灰色虚线Border。

如何在 WPF 中做到这一点？我只能看到纯色画笔。

【问题讨论】：

你检查过这个***.com/questions/1630022/…

不-谢谢。你不知道一个简单的方法吗？这似乎有点像黑客。

相关帖子，可能是最佳答案***.com/questions/14936002/…

【参考方案1】：

您可以使用如下代码中的矩形创建虚线或虚线

<Rectangle Stroke="#FF000000" Height="1" StrokeThickness="1" StrokeDashArray="4 4"
                                                       SnapsToDevicePixels="True"/>

开始使用它并根据您的场景自定义您的列表视图

【讨论】：

有什么办法可以用圆角做到这一点？

@Jordan 使用 RadiusX="10" RadiusY="10".

有什么办法让虚线倾斜？

【参考方案2】：

这在我们的应用程序中效果很好，让我们可以使用真正的边框而不是乱用矩形：

<Border BorderThickness="1,0,1,1">
   <Border.BorderBrush>
      <DrawingBrush Viewport="0,0,8,8" ViewportUnits="Absolute" TileMode="Tile">
         <DrawingBrush.Drawing>
            <DrawingGroup>
               <GeometryDrawing Brush="Black">
                  <GeometryDrawing.Geometry>
                     <GeometryGroup>
                        <RectangleGeometry Rect="0,0,50,50" />
                        <RectangleGeometry Rect="50,50,50,50" />
                     </GeometryGroup>
                  </GeometryDrawing.Geometry>
               </GeometryDrawing>
            </DrawingGroup>
         </DrawingBrush.Drawing>
      </DrawingBrush>
   </Border.BorderBrush>

   <TextBlock Text="Content Goes Here!" Margin="5"/>
</Border>

请注意，视口决定了线条中虚线的大小。在这种情况下，它会生成八像素的虚线。 Viewport="0,0,4,4" 会给你四像素的破折号。

【讨论】：

如何在其他需要相同样式的元素上使用它。

您可以定义一个包含 DrawingBrush 的样式，然后将该样式应用于您想要的任何元素。

这两个矩形实际上以这样的方式对齐，即这种模式在边界周围，水平和垂直，左右。 （最好不要尝试将它用于非矩形线......）

这样做了，破折号偏移还能动画吗？

未经批准的最佳解决方案。:)

【参考方案3】：

聚会有点晚了，但以下解决方案对我有用。它比其他两种解决方案都更简单/更好：

<Border BorderThickness="1">
  <Border.BorderBrush>
    <VisualBrush>
      <VisualBrush.Visual>
        <Rectangle StrokeDashArray="4 2" Stroke="Gray" StrokeThickness="1"
                  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>

  <TextBlock Text="Whatever" />
</Border>

【讨论】：

辉煌。第一个答案很差，圆角。这个效果很好。只需将 Rectangle 上的 RadiusX/Y 设置为与 Border 相同的 CornerRadius。

应该是首选答案。我更喜欢这个答案，因为它是最简洁、最短和最易读（直观）的解决方案。

...但是！如果您将此画笔用作staticresource 或dynamicresource，则会出现问题。我假设由于 Width 和 Height 绑定失败。第一个答案确实可作为可重用资源。遗憾。我真的很喜欢这个解决方案。

【参考方案4】：

Xaml

<Grid>
<Grid.RowDefinitions><RowDefinition Height="auto"/></Grid.RowDefinitions>
<Grid.ColumnDefinitions><ColumnDefinition Width="auto"/></Grid.ColumnDefinitions>
<Rectangle RadiusX="9" RadiusY="9" Fill="White" Stroke="Black" StrokeDashArray="1,2"/>
<TextBlock Padding = "4,2" Text="Whatever"/>
</Grid>

【参考方案5】：

正在处理用户控件.... 我一直在为行进的蚂蚁边界尝试故事板。带有矩形和文本的基本网格可以正常工作，因为没有交互。当试图在网格中放置一个按钮时，矩形或按钮是可见的，但两者都不可见。

来自另一个帖子： Advanced XAML Animation effects. Pulse, Marching ants, Rotations. Alerts

使用 dotNet 的 VisualBrush 解决方案将矩形移动到带有按钮的边框。这非常有效。

<UserControl.Resources>
    <ResourceDictionary>
        <Style TargetType="x:Type TextBlock" x:Key="LOC_DG_Cell_Mid" BasedOn="StaticResource DG_TextBlock_Mid" >
            <Setter Property="Margin" Value="5 0"/>
        </Style>
        <Storyboard x:Key="MarchingAnts">
            <DoubleAnimation BeginTime="00:00:00"
                Storyboard.TargetName="AlertBox"                                
                Storyboard.TargetProperty="StrokeThickness"
                To="4"
                Duration="0:0:0.25" />
            <!-- If you want to run counter-clockwise, just swap the 'From' and 'To' values. -->
            <DoubleAnimation BeginTime="00:00:00" RepeatBehavior="Forever" Storyboard.TargetName="AlertBox" Storyboard.TargetProperty="StrokeDashOffset" 
                            Duration="0:3:0" From="1000" To="0"/>
        </Storyboard>
    </ResourceDictionary>

</UserControl.Resources>
<UserControl.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="StaticResource MarchingAnts"/>
    </EventTrigger>
</UserControl.Triggers>

<Grid>
    <Border BorderThickness="1">
        <Border.BorderBrush>
            <VisualBrush>
                <VisualBrush.Visual>
                    <Rectangle x:Name="AlertBox" Stroke="Red" StrokeDashOffset="2" StrokeDashArray="5" Margin="5"
                      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 x:Name="FinishedButton" Padding="0 5" Margin="0" Style="StaticResource IconButton" >
            <StackPanel Orientation="Horizontal" >
                <Label Style="StaticResource ButtonLabel" Content="Processing has Finished" />
            </StackPanel>
        </Button>
    </Border>
</Grid>