Ist es möglich, einen ImageBrush mit einem LinearGradientBrush in UWP zu kombinieren

Question

Ich baue eine Planning Poker UWP App zum Spaß. Ich kann die Pokerkarten stylen (derzeit implementiert als Buttons über die Eigenschaft Background), indem ich entweder ImageBrush oder LinearGradientBrush ohne Probleme benutze, aber offensichtlich kann ich nur eine Art von Pinsel auf diese Eigenschaft setzen.

Ich würde gerne die Karte mit einem Bild stylen, das dann einen anderen Pinsel (z. B. einen LinearGradientBrush) überlagert hätte, dieser andere Pinsel hätte natürlich einen gewissen Grad an Transparenz, so dass Teile des Bildes zeigen könnten durch.

Wie würden Sie das tun?

Für die tatsächliche Poker-Karte, die der Benutzer sieht - ich kann das relativ einfach mit einem anderen Steuerelementtyp (z. B. ein UserControl, das mehrere Steuerelemente mit jeweils eigenem Hintergrund kombiniert), aber es gibt andere Fälle der Verwendung (dh ich zeige eine Liste der verfügbaren Styles), also wollte ich sehen, ob es da noch einen anderen Weg gibt, bevor ich in ein benutzerdefiniertes UserControl schreibe.

Answer 1

Schaltfläche ist ein Inhaltssteuerelement, Sie können andere XAML-Steuerelemente in den Inhalt der Schaltfläche einfügen und LinearGradientBrush für sie festlegen. Beispielsweise können Sie ImageBrush für die Hintergrundeigenschaft der Schaltfläche festlegen, in der Zwischenzeit LinearGradientBrush für ein Rechteck inline festgelegt.

Ich mag würde die Karte mit einem Bild, um Stil, die dann eine weitere Bürste hatte (zB LinearGradientBrush) auf der Oberseite über gelegt, das andere Pinsel einen gewissen Grad an Transparenz natürlich haben würde, so dass Teile des Bildes könnte durch zeigen.

Ihrer Anforderung gerecht zu werden, habe ich ein Codebeispiel wie folgt:

<Button x:Name="BtnPoker" Padding="0"> 
    <Rectangle Width="200" 
       Height="300" 
       Margin="0" 
       Opacity="0.4"> 
     <Rectangle.Fill> 
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
       <GradientStop Offset="0.0" Color="Yellow" /> 
       <GradientStop Offset="0.25" Color="Red" /> 
       <GradientStop Offset="0.75" Color="Blue" /> 
       <GradientStop Offset="1.0" Color="LimeGreen" /> 
      </LinearGradientBrush> 
     </Rectangle.Fill> 
    </Rectangle> 
    <Button.Background> 
     <ImageBrush ImageSource="Assets\caffe.jpg" /> 
    </Button.Background> 
</Button> 

Und das Ergebnis: