2016-07-14 8 views
1

Ich bin mir sicher, dass ich mit dem Titel besser machen könnte, aber hier ist, was ich suche. Ich habe eine UWP app, wo ich so etwas wie dieser Screenshot erreichen will: enter image description hereWie man Rechteck mit Linien in UWP füllt

Hier ist ein Ausschnitt aus meinem Code:

<Border BorderBrush="Black"> 
    <Grid> 
     <Rectangle Fill="Green" /> 
    </Grid> 
</Border> 

Ich versuche, das Rechteck im Grid mit den Formen in bestimmten zu füllen der Screenshot. Wie kann ich das machen?

+0

Wenn ich versuche, VisualBrush Ressource in der Page.Resources hinzuzufügen sagt es nicht Symbol auflösen kann ‚VisualBrush‘ ' – tavier

+2

Dies ist kein Duplikat, weil es über UWP ist, nicht WPF. Es gibt kein VisualBrush in UWP. – Clemens

+0

Wenn das Rechteck nicht extrem groß ist, können Sie eine BitmapImage-Ressource vorbereiten und mit einem ImageBrush verwenden. – Clemens

Antwort

2

So, während ich derzeit keine Möglichkeit habe, auf UWP zu testen, nehme ich an, dass Dinge wie LinearGradientBrush und MappingMode unterstützt werden, da dieser Weg auf WPF, Silverlight, was auch immer ... funktionieren würde. gib das eine Chance.

<Rectangle Stroke="LightBlue" StrokeThickness="5"> 
    <Rectangle.Fill> 
     <LinearGradientBrush StartPoint="0,0" EndPoint="6,4" 
          MappingMode="Absolute" SpreadMethod="Repeat"> 
      <GradientStop Color="LightBlue" Offset="0.25"/> 
      <GradientStop Color="#00000000" Offset="0.15"/> 
     </LinearGradientBrush> 
    </Rectangle.Fill> 
</Rectangle> 

enter image description here

Sie könnten Ihre Starts/Ends/Offsets für gewünschte Winkel und Größe zwicken, aber es vermittelt das Konzept. Zum Beispiel, wenn Sie Ihre EndPoint Zahlen erhöhen, erhalten Sie die dickeren Linien wie in Ihrem Beispiel.

Sie können den Pinsel auch in eine Ressource umwandeln und sie als Ressource für Pfade, Hintergründe oder was immer LinearGradientBrush unterstützt, verwenden. Hoffe, das hilft, Prost.

PS - Einige other neat things können Sie mit ihnen tun, die leicht zu UWP portieren sollte.

Nachtrag:

Dies ist näher an Ihrem Beispiel Sie ein wenig Mühe, beachten Sie die Unterschiede zu speichern.

<Rectangle Stroke="LightBlue" StrokeThickness="5"> 
    <Rectangle.Fill> 
     <LinearGradientBrush StartPoint="8,0" EndPoint="18,8" 
        MappingMode="Absolute" SpreadMethod="Repeat"> 
      <GradientStop Color="LightBlue" Offset="0.15"/> 
      <GradientStop Color="White" Offset="0.05"/> 
     </LinearGradientBrush> 
    </Rectangle.Fill> 
</Rectangle> 
+0

Es funktioniert gut. Danke Chris. Ich möchte die Dicke der weißen Linien so beibehalten, wie sie ist, aber sie für die blauen erhöhen. – tavier

+0

@AshishAgrawal Spielen Sie einfach herum und erhöhen Sie die Anzahl der Endpunkte, wie ich es vorgeschlagen habe, ungefähr um 20 oder so, wenn einer von ihnen es tun sollte. Aber wenn du daran bastelst, bekommst du genau das, was du willst und lernst dabei auch etwas. ;) –

+0

:) Ich habe versucht, das zu tun, aber die Sache ist, wie ich den EndPoint zu etwas wie {12,6} ändere es macht auch die Weiße Linie dicker (was ich nicht will). Wie auch immer, vielen Dank für den Code, ich werde versuchen es zu optimieren, damit es genau mit dem Screenshot übereinstimmt. Nochmals vielen Dank :) – tavier

Verwandte Themen