Come si creano ripetute linee diagonali come sfondo in WPF?

OK, ho distrutto il mio cervello, Google e lo stackoverflow cercando di capirlo, ma non riesco a capirlo. Sto cercando di usare un DrawingBrush con un DrawingGroup per fare due cose sullo sfondo della mia applicazione WPF (ultima versione). Uno, voglio avere un RadialGradientBrush per mettere un gradiente sottile nel mio background. Questa parte sta funzionando bene. La seconda parte che sto cercando di realizzare è che voglio anche ripetere le linee diagonali come parte di quello sfondo. So che potrei farlo con un'immagine, ma preferisco usare le geometrie, mentre sto cercando di imparare e padroneggiare WPF. Ecco cosa ho finora. Il radiale sembra buono, ma le linee no. Qualsiasi aiuto sarebbe apprezzato.Come si creano ripetute linee diagonali come sfondo in WPF?

<Style x:Key="WindowBackground" TargetType="Grid"> 
     <Setter Property="Background"> 
      <Setter.Value> 
       <DrawingBrush> 
        <DrawingBrush.Drawing> 
         <DrawingGroup> 
          <GeometryDrawing> 
           <GeometryDrawing.Brush> 
            <RadialGradientBrush GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> 
             <GradientStop Color="#EE9D40" Offset="0"/> 
             <GradientStop Color="#BF8230" Offset="1"/> 
            </RadialGradientBrush> 
           </GeometryDrawing.Brush> 
           <GeometryDrawing.Geometry> 
            <RectangleGeometry Rect="0,0,1,1"/> 
           </GeometryDrawing.Geometry> 
          </GeometryDrawing> 
          <GeometryDrawing> 
           <GeometryDrawing.Brush> 
            <DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,25,25" ViewportUnits="Absolute"> 
             <DrawingBrush.RelativeTransform> 
              <TranslateTransform X="0" Y="0" /> 
             </DrawingBrush.RelativeTransform> 
             <DrawingBrush.Drawing> 
              <GeometryDrawing Brush="#20FFFFFF" Geometry="M10,0 22,0 12,25 0,22 Z" /> 
             </DrawingBrush.Drawing> 
            </DrawingBrush> 
           </GeometryDrawing.Brush> 
           <GeometryDrawing.Geometry> 
            <RectangleGeometry Rect="0,0,1,1"/> 
           </GeometryDrawing.Geometry> 
          </GeometryDrawing> 
         </DrawingGroup> 
        </DrawingBrush.Drawing> 
       </DrawingBrush> 
      </Setter.Value> 
     </Setter> 
    </Style>

fonte

2013-02-02 Jamie Nordmeyer

Vedere la mia risposta [qui] (http://stackoverflow.com/a/6434964/390278). Disegniamo una griglia lì ma puoi applicare gli stessi concetti. –

Non funziona abbastanza per me, ma vedo dove stai andando, quindi sto cercando di risolverlo. Grazie per la risposta! Anche tu, Cedric. Ti farò sapere. –

Questo trucco dovrebbe funzionare.

<LinearGradientBrush EndPoint="0,0" StartPoint="8,8" 
        MappingMode="Absolute" SpreadMethod="Repeat"> 
    <GradientStop Color="Black" Offset="0" /> 
    <GradientStop Color="Black" Offset="0.1" /> 
    <GradientStop Color="White" Offset="0.1" /> 
    <GradientStop Color="White" Offset="1" /> 
</LinearGradientBrush>

fonte

2013-02-02 19:40:42

Vale la pena ricordare che se si desidera una striscia più larga (come ho fatto io), basta aumentare i due valori di offset "0.1". Per esempio. "0.5" ti darà strisce alternate di uguale larghezza. –

Finalmente ho funzionato, ma non con un singolo pennello composito come volevo. Ho usato i seguenti stili:

<Style x:Key="WindowBackground" TargetType="Grid"> 
      <Setter Property="Background"> 
       <Setter.Value> 
        <RadialGradientBrush GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> 
         <GradientStop Color="#EAA659" Offset="0"/> 
         <GradientStop Color="#BF8230" Offset="1"/> 
        </RadialGradientBrush> 
       </Setter.Value> 
      </Setter> 
     </Style> 

     <Style x:Key="HatchOverlay" TargetType="Rectangle"> 
      <Setter Property="Fill"> 
       <Setter.Value> 
        <VisualBrush Opacity=".1" TileMode="Tile" Viewport="0,0,10,20" ViewportUnits="Absolute"> 
         <VisualBrush.Visual> 
          <Canvas> 
           <Path Stroke="#825821" Data="M 0 0 l 10 20" /> 
          </Canvas> 
         </VisualBrush.Visual> 
        </VisualBrush> 
       </Setter.Value> 
      </Setter> 
     </Style>

Poi, per consentirgli in fase di esecuzione, ho aggiunto un rettangolo come il primo figlio della mia griglia, in questo modo:

<Grid Style="{StaticResource WindowBackground}"> 
    <Rectangle Style="{StaticResource HatchOverlay}"/>...

Questo mi ha dato l'effetto che Io stavo cercando. Grazie per l'aiuto; Voterò ognuno di voi.

fonte

2013-02-02 23:58:18

ruotarla di un pennello linea orizzontale al fine di evitare i vuoti d'angolo:

<VisualBrush TileMode="Tile" 
Viewport="0,0,5,5" ViewportUnits="Absolute" 
Viewbox="0,0,5,5" ViewboxUnits="Absolute"> 
<VisualBrush.Visual> 
    <Grid Background="White" Height="5"> 
     <Path Stroke="Black" Data="M 0 3 l 8 0" /> 
    </Grid> 
</VisualBrush.Visual> 
<VisualBrush.RelativeTransform> 
    <RotateTransform CenterX="0.5" CenterY="0.5" Angle="45" /> 
</VisualBrush.RelativeTransform> 
</VisualBrush>

fonte

2016-07-22 23:02:52

Come si creano ripetute linee diagonali come sfondo in WPF?

risposta

Problemi correlati