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.

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

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