2011-06-01 23 views
55

Tengo un ListViewItem al que estoy aplicando un Style y me gustaría poner una línea gris punteada como la Border inferior.¿Cómo puedo obtener un borde discontinuo o punteado en WPF?

¿Cómo puedo hacer esto en WPF? Solo puedo ver pinceles de color sólido.

+0

¿verificó esta http://stackoverflow.com/questions/1630022/dotted-border-on-listboxitem-in-wpf –

+0

n - Gracias por eso . Usted no sabe de una manera simple ¿verdad? Parece un truco. – dan

+0

Publicación relacionada, y probablemente la mejor respuesta http://stackoverflow.com/questions/14936002/dotted-border-around-a-button –

Respuesta

88

Esto funcionó muy bien en nuestra aplicación, lo que nos permite utilizar una frontera real y no perder el tiempo con los rectángulos:

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

Tenga en cuenta que la ventana gráfica determina el tamaño de los guiones en las líneas. En este caso, genera guiones de ocho píxeles. Viewport = "0,0,4,4" le daría guiones de cuatro píxeles.

+0

cómo se puede usar esto en otros elementos que necesitan el mismo estilo. –

+0

Puede definir un estilo que incluya DrawingBrush y luego aplicar ese estilo a los elementos que desee. –

+0

Los dos rectángulos están realmente alineados de tal forma que este patrón funciona alrededor del borde, horizontal y vertical, izquierda y derecha. (Mejor no intente usarlo para líneas no rectangulares ...) – ygoe

69

Se puede crear una línea de puntos o guiones utilizando un rectángulo como en el código de abajo

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

Comience con esto y personalizar la vista de lista de acuerdo a su escenario

+1

¿Alguna manera de hacerlo con las esquinas redondeadas? – Jordan

+4

@Jordan Use 'RadiusX =" 10 "RadiusY =" 10 "'. –

2

Llegué un poco tarde a la fiesta, pero la siguiente solución funcionó para mí. Es ligeramente más simple/mejor que los otros dos soluciones:

<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

Brillantez. La primera respuesta fue pobre con las esquinas redondeadas. Este funciona excelentemente Simplemente ajuste RadiusX/Y en el rectángulo al mismo CornerRadius que está en el borde. –

Cuestiones relacionadas