Um zu gewährleisten, dass das gesamte Layout an zentraler Stelle zu handeln ist, nutzt man die sogenannten Ressourcen (Window.Resources). Ressourcen bieten ähnlich wie in CSS die Möglichkeit Styles für seine Komponenten zu definieren.

Ein simples Beispiel zeigt wie man an globaler Stelle sein Buttondesign definiert. Die Farbe soll Blau sein und eine Breite von 100 und eine Höhe von 50.

1
2
3
4
5
6
7
<Window.Resources>
 <Style x:Key="menuButton">
  <Setter Property="Control.Background" Value="Blue" />
  <Setter Property="Control.Width" Value="100" />
  <Setter Property="Control.Height" Value="50" />
 </Style>
</Window.Resources>

Zugewiesen sieht das dann wie folgt aus:

1
2
<Button Height="100" Content="Button 1" Style="{StaticResource menuButton}" />;
<Button Height="100" Content="Button 2" Style="{StaticResource menuButton}" />

geschweifte – {} – Klammern referenzieren immer auf eine Ressource => {StaticResource menuButton}


Man kann auch für den Typ des Elements, mit TargetType=“{x:Type Button} ein Design zuweisen. Um so allen Buttons das selbe Verhalten zuzuweisen, sieht die Styledefinition wie folgt aus.

1
2
3
4
5
6
7
8
<Style TargetType="{x:Type Button}">
 <Setter Property="Control.Background" Value="Blue" />
 <Setter Property="Control.Width" Value="100" />
 <Setter Property="Control.Height" Value="50" />
</Style>
 
<Button Height="100" Content="Button 1" />
<Button Height="100" Content="Button 2" />

Um das ganze noch einen Kick zu geben, füge ich den Buttons eine Animation hinzu, das macht man in dem man einen Trigger definiert. In diesem Beispiel wird nach dem Click der Button auf 70% seiner Breite zusammengezogen und geht dann langsam wieder in seine Ursprungsgrösse zurück

1
2
3
4
5
6
7
8
9
10
11
12
<Style.Triggers>
    <EventTrigger RoutedEvent="Click">
      <EventTrigger.Actions>
       <BeginStoryboard>
        <Storyboard Storyboard.TargetProperty="Width" AutoReverse="True" Duration="00:01">
          <DoubleAnimation From="70" To="100" />          
        </Storyboard>
       </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
   </Style.Triggers>
  </Style>

Das alles nochmal komplett

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
<Window.Resources>
<Style TargetType="{x:Type Button}">
   <Setter Property="Control.Background" Value="Blue" />
   <Setter Property="Control.Width" Value="100" />
   <Setter Property="Control.Height" Value="50" />   
 
   <Style.Triggers>
    <EventTrigger RoutedEvent="Click">
      <EventTrigger.Actions>
       <BeginStoryboard>
        <Storyboard Storyboard.TargetProperty="Width" AutoReverse="True" Duration="00:01">
          <DoubleAnimation From="70" To="100" />          
        </Storyboard>
       </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
   </Style.Triggers>
  </Style>      
</Window.Resources>
 
<StackPanel Orientation="Horizontal">
  <Button Height="100" Content="Button 1"  />
  <Button Height="100" Content="Button 2"  />
  <Button Height="100" Content="Button 3" />
  <Button Height="100" Content="Button 4" />    
</StackPanel>
 
</Window>

styleswpf

Dieser Artikel dient in erster Linie, mich bei dem Erlernen von WPF zu unterstützen, ich möchte damit kürzlich Erlerntes einfach nochmal auffassen und dokumentieren, was mich etwas beim lernen unterstützen soll. Wenn ich das eine oder andere falsch, ungenau oder unvollständig interpretiert habe und Du das besser weisst oder erfahrungsgemäß besser kannst, bitte ich Dich, dieses einfach zu kommentieren. Danke : )


Zentrales Styling in WPF
Markiert in: