2011-06-01 255 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