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

74

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

如何在WPF中执行此操作？我只能看到纯色画笔。

— 担
source

你检查这stackoverflow.com/questions/1630022/...

— 亚历氮杂

1

否-谢谢。您不知道简单的方法吗？似乎有点hack。

— 丹

相关文章，可能是最好的答案stackoverflow.com/questions/14936002/…–

— jv_

114

这在我们的应用程序中效果很好，允许我们使用真实的Border而不用与Rectangles混在一起：

<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”将为您提供四像素虚线。

— 兰德·斯卡拉德
source

如何将其用于需要相同样式的其他元素。

— Charanraj Golla 2013年

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

— 兰德·斯库拉德

实际上，以这种方式对齐这两个矩形，以使该模式在边框的周围，水平和垂直，左右均有效。（虽然最好不要尝试将其用于非矩形线...）

— ygoe 2014年

这样可以使破折号偏移量保持动画吗？

— jrandomuser 2014年

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

— Christian Mark

98

您可以使用矩形来创建点划线或虚线，如下面的代码所示

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

从此开始并根据情况自定义列表视图

— 碧菊
source

2

有办法做到圆角吗？

— 乔丹

7

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

— Ondrej Janacek 2014年

24

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

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

— 网
source

光彩。第一个答案很差，带有圆角。这一作品非常出色。只需将Rectangle上的RadiusX / Y设置为Border上相同的CornerRadius。

— 比尔·塔贝尔

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

— Erik Bongers

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

— Erik Bongers

3

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>

— 德里亚·里亚
source