Wie kann ich in WPF einen gestrichelten oder gepunkteten Rand erzielen?

74

Ich habe eine ListViewItem, auf die ich eine anwende Style, und ich möchte eine gepunktete graue Linie als untere setzen Border.

Wie kann ich das in WPF machen? Ich kann nur einfarbige Pinsel sehen.

wpf styles border listviewitem Dan
quelle
Haben Sie diese stackoverflow.com/questions/1630022/…
Alex Aza
1
Nein - Danke dafür. Sie kennen keinen einfachen Weg, oder? Es scheint ein bisschen wie ein Hack.
Dan
In Verbindung stehender Beitrag, und wahrscheinlich die beste Antwort stackoverflow.com/questions/14936002/…
jv_

Antworten:

114

Dies hat in unserer Anwendung hervorragend funktioniert, sodass wir einen echten Rand verwenden und nicht mit Rechtecken herumspielen können:

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

Beachten Sie, dass das Ansichtsfenster die Größe der Striche in den Zeilen bestimmt. In diesem Fall werden Striche mit acht Pixeln generiert. Viewport = "0,0,4,4" würde Ihnen Striche mit vier Pixeln geben.

Rand Scullard
quelle
Wie kann dies für andere Elemente verwendet werden, die denselben Stil benötigen?
Charanraj Golla
Sie können einen Stil definieren, der den DrawingBrush enthält, und diesen Stil dann auf die gewünschten Elemente anwenden.
Rand Scullard
Die beiden Rechtecke sind tatsächlich so ausgerichtet, dass dieses Muster rund um den Rand funktioniert, horizontal und vertikal, links und rechts. (Besser nicht versuchen, es für nicht rechteckige Linien zu verwenden ...)
ygoe
Auf diese Weise könnte der Strichversatz noch animiert werden?
jrandomuser
nicht genehmigte beste Lösung. :)
Christian Mark
95

Sie können eine gepunktete Linie oder eine Strichlinie mit einem Rechteck wie im folgenden Code erstellen

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

Beginnen Sie damit und passen Sie Ihre Listenansicht an Ihr Szenario an

Biju
quelle
2
Wie kann man das mit abgerundeten Ecken machen?
Jordan
7
@ Jordan Verwendung RadiusX="10" RadiusY="10".
Ondrej Janacek
24

Ein bisschen spät zur Party, aber die folgende Lösung hat bei mir funktioniert. Es ist etwas einfacher / besser als beide anderen Lösungen:

<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>
Punkt net
quelle
Brillanz. Die erste Antwort war schlecht mit abgerundeten Ecken. Dieser funktioniert hervorragend. Stellen Sie RadiusX / Y im Rechteck einfach auf denselben CornerRadius ein, der sich am Rand befindet.
Bill Tarbell
Sollte bevorzugte Antwort sein. Ich bevorzuge diese Antwort, da sie die sauberste, kürzeste und am besten lesbare (intuitive) Lösung ist.
Erik Bongers
...jedoch! Wenn Sie diesen Pinsel als staticresourceoder verwenden dynamicresource, geht etwas schief. Ich gehe davon aus, dass die Widthund HeightBindungen versagen. Die erste Antwort funktioniert als wiederverwendbare Ressource. Das Mitleid. Diese Lösung gefällt mir sehr gut.
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>
Dreia Ria
quelle