Bei den meisten WPF-Anwendungen kann man auf den ersten Blick gar nicht erkennen, dass es sich um eine WPF-Anwendung (und nicht um eine WindowsForms-Anwendung) handelt, da die Controls nahezu identisch aussehen, bis auf die zum Teil verschwommene Optik bei den WPF-Controls (aufgrund des Rendering der DirectX-Engine).
Da die meisten Programmierer im Allgemeinen nicht auch noch als Designer/Grafiker tätig sind, werden die Standard-Controls vom .Net-Framework ohne große Änderungen übernommen.
Da aber jeder Anwender heutzutage eine optisch ansprechende Oberfläche erwartet (wie es die Anwender vom Web 2.0 gewohnt sind), sollte man seine Anwendungen optisch „tunen“.
Ich kann nicht nachvollziehen, dass fast alle grafischen Oberflächen (Webseiten) im aktuellen Web 2.0 bis zum letzten Bedienelement durchgestylt sind, die Client Applikationen jedoch immer noch so aussehen wie vor vielen Jahren.
Fangen wir bei diesem Snippet mit einfachen Buttons an ...
Es genügt ein einfaches ControlTemplate zu erstellen um per DynamicResource-Binding alle gewünschten Buttons hochwertiger aussehen zu lassen :
siehe XAML-Code untenDieses Template wird als
Window.Resource oder als
Grid.Resource festgelegt. Um das Template zu nutzen, muss lediglich folgender Code zu dem gewünschten Button hinzugefügt werden :
Template="{DynamicResource BlackButton} Foreground="White"Beispielsweise :
Button Name="btn2" Content="NextGen Button" Margin="0,110,0,0" Width="110" Height="30"
HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="White"
Template="{DynamicResource BlackButton}"
Noch besser sieht das ganze natürlich aus, wenn man den Hintergrund dazu passend auch noch optisch aufwertet. Hierzu legt man lediglich einen passenden
LinearGradientBrush an, welchen man dem Grid als Hintergrund zuweist :
LinearGradientBrush x:Key="GridBackgroundBrush" StartPoint="0,0" EndPoint="0,1"
GradientStop Offset="0" Color="Black"/
GradientStop Offset="0.7" Color="DimGray"/
GradientStop Offset="1" Color="Gray"/
/LinearGradientBrush
Grid Background="{StaticResource GridBackgroundBrush}"
<Window x:Class="NextGenButtons.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title=".Net-Snippets - NextGenButtons" Height="250" Width="350">
<Window.Resources>
<LinearGradientBrush x:Key="GridBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="0.7" Color="DimGray"/>
<GradientStop Offset="1" Color="Gray"/>
</LinearGradientBrush>
<ControlTemplate x:Key="BlackButton" TargetType="{x:Type Button}">
<Border BorderBrush="White" BorderThickness="1" CornerRadius="3">
<Border BorderBrush="DarkGray" BorderThickness="1" CornerRadius="3">
<Grid Name="ButtonGrid">
<Rectangle Name="ButtonRect">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Gray" />
<GradientStop Offset="0.49" Color="DimGray" />
<GradientStop Offset="0.5" Color="DimGray" />
<GradientStop Offset="1" Color="Black" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" />
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<!-- Bei Mausbewegung über den Button ... -->
<Trigger Property="IsMouseOver" Value="True">
<!-- Buttonhintergrund heller darstellen -->
<Setter Property="Fill" TargetName="ButtonRect">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Silver" />
<GradientStop Offset="1" Color="Black" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<!-- Leuchteffekt -->
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="White" GlowSize="5" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Fill" TargetName="ButtonRect" Value="#FF000000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid Background="{StaticResource GridBackgroundBrush}">
<Button Name="btn1" Content="Einfacher Button" Margin="0,50,0,0" Width="110" Height="30"
HorizontalAlignment="Center" VerticalAlignment="Top" />
<Button Name="btn2" Content="NextGen Button" Margin="0,110,0,0" Width="110" Height="30"
HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="White"
Template="{DynamicResource BlackButton}"/>
</Grid>
</Window>