2011-06-01 302 views
55

我有一个ListViewItem,我正在申请一个Style并且我想将灰色虚线作为底部Border如何在WPF中实现虚线或虚线边框?

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

+0

你检查这http://stackoverflow.com/questions/1630022/dotted-border-on-listboxitem-in-wpf – 2011-06-01 01:51:36

+0

没有 - 感谢您的。你不知道一个简单的方法吗?这似乎有点破解。 – dan 2011-06-01 02:58:09

+0

相关文章,并可能是最好的答案http://stackoverflow.com/questions/14936002/dotted-border-around-a-button – 2015-10-25 02:43:33

回答

88

这个工作在我们的应用极大,允许我们使用一个真正的边界,而不是浪费时间与矩形:

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

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

+0

如何在需要相同样式的其他元素上使用它。 – 2013-09-29 08:42:53

+0

您可以定义包含DrawingBrush的样式,然后将该样式应用于所需的任何元素。 – 2013-09-29 17:49:59

+0

这两个矩形实际上以这种方式对齐,使得该图案可以在边界,水平和垂直,左侧和右侧四处工作。 (最好不要尝试将它用于非矩形线条,尽管...) – ygoe 2014-02-26 16:06:49

69

您可以在代码中创建一个使用矩形虚线或划线像下面

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

获取与此启动和自定义列表视图根据您的情况

+1

任何方式做圆角? – Jordan 2014-01-27 20:57:16

+4

@Jordan使用'RadiusX =“10”RadiusY =“10”'。 – 2014-07-25 14:03:36

2

晚会有点晚,但下面的解决方案为我工作。它比其他两种解决方案稍微简单/更好的:

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

华晨。第一个回答很差,圆角。这个工作非常出色。只需将矩形上的RadiusX/Y设置为与边框上相同的CornerRadius即可。 – 2018-02-16 05:49:13