Rectangle mit verschiedenen Hintergründen

Kacheln und Rechtecke sind zentrale Design-Elemente in Windows Phone 7. In diesem Beitrag möchte ich zeigen, wie man ganz leicht ein Rechteck erstellen und mit einem Hintergrund (einfarbig oder Bild) ausstatten kann.

Ein einfaches Rechteck lässt sich mit der XAML-Sprache wie folgt erstellen:

Einfaches Rechteck

<Rectangle Width="100" Height="100" Fill="Red" />

Man kann die verkürzte Schreibweise auch ausdehnen, um komplexere Hintergründe (z.B. Hintergrundbilder) zu setzen. Das oben gezeigte Beispiel sieht für ein rotes Rechteck wie folgt aus:

Einfaches Rechteck (verlängerte Schreibweise)

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <SolidColorBrush Color="Red"/>
  </Rectangle.Fill>
</Rectangle>

Wie versprochen nun eine Variante mit einem Hintergrundbild (Hintergrundbild muss vorher zum Projekt hinzugefügt werden!):

Rechteck mit Hintergrundbild

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <ImageBrush ImageSource="Images/Ghost.png" />
  </Rectangle.Fill>
</Rectangle>

Mit einer OpacityMask lässt sich die Füllfarbe des Rechtecks nutzen, um das Hintergrundbild farbig anzupassen:

Rechteck mit OpacityMask

<Rectangle Width="100" Height="100" Fill="Red">
  <Rectangle.OpacityMask>
    <ImageBrush ImageSource="Images/Ghost.png" />
  </Rectangle.OpacityMask>
</Rectangle>

Dank der bereitgestellten Applikations-Ressourcen kann das Hintergrundbild sogar in der gewählten Akzentfarbe des Telefons dargestellt werden:

Rechteck mit OpacityMask in Akzentfarbe

<Rectangle Width="100" Height="100" Fill="{StaticResource PhoneAccentBrush}">
  <Rectangle.OpacityMask>
    <ImageBrush ImageSource="Images/Ghost.png" />
  </Rectangle.OpacityMask>
</Rectangle>

Die Deckkraft des Bildes ist auch verstellbar:

Rechteck mit OpacityMask in Akzentfarbe und halber Deckkraft

<Rectangle Width="100" Height="100" Fill="{StaticResource PhoneAccentBrush}" Opacity="0.5">
  <Rectangle.OpacityMask>
    <ImageBrush ImageSource="Images/Ghost.png" />
  </Rectangle.OpacityMask>
</Rectangle>

Verläufe sind ebenfalls möglich, sollten aber zur besseren Vorstellung in Expression Blend erstellt werden:

Rechteck mit Verlauf, OpacityMask und halber Deckkraft

<Rectangle Width="100" Height="100" Opacity="0.5">
  <Rectangle.Fill>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="Black" Offset="0"/>
      <GradientStop Color="#FFFF0080" Offset="1"/>
    </LinearGradientBrush>
  </Rectangle.Fill>
  <Rectangle.OpacityMask>
    <ImageBrush ImageSource="Images/Ghost.png" />
  </Rectangle.OpacityMask>
</Rectangle>

Möchte man eine Hintergrundfarbe und ein Hintergrundbild benutzen, so hilft das Border-Element:

Rechteck mit Hintergrundbild und Hintergrundfarbe

<Border Width="100" Height="100">
  <Border.Background>
    <SolidColorBrush Color="Red"/>
  </Border.Background>
  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <ImageBrush ImageSource="Images/Ghost.png" />
    </Rectangle.Fill>
  </Rectangle>
</Border>

Soll ein Text (z.B. in einem TextBlock) angezeigt werden, muss innerhalb des Border-Elements ein Element aufgenommen werden, dass mehrere eingekapselte Elemente erlaubt. Andernfalls erscheint der Hinweis: „The property ‚Child‘ is set more than once“. Das folgende Beispiel verwendet für diese Aufgabe ein Grid-Panel:

Rechteck mit Hintergrundbild, Hintergrundfarbe und Text

<Border Width="100" Height="100" Background="Red">
  <Grid>
    <Rectangle Width="100" Height="100">
      <Rectangle.Fill>
        <ImageBrush ImageSource="../Images/Ghost.png" />
      </Rectangle.Fill>
    </Rectangle>
    <TextBlock Foreground="White" Text="Boooo!" 
               TextAlignment="Left" VerticalAlignment="Bottom"
               Margin="5,0,0,5" />
  </Grid>
</Border>

Es lohnt sich in jedem Fall mal mit Expression Blend ein paar Design-Kombinationen auszuprobieren. Das Bild vom Geist gibt es übrigens hier: Geist von Paulo Volkova.

Schreibe einen Kommentar Antworten abbrechen