Hochwertige (optisch ansprechende) WPF – Buttons

Sprache: C#

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 : [b]siehe XAML-Code unten[/b] Dieses Template wird als [u]Window.Resource[/u] oder als [u]Grid.Resource[/u] festgelegt. Um das Template zu nutzen, muss lediglich folgender Code zu dem gewünschten Button hinzugefügt werden : [code]Template="{DynamicResource BlackButton} Foreground="White"[/code] Beispielsweise : [code]Button Name="btn2" Content="NextGen Button" Margin="0,110,0,0" Width="110" Height="30" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="White" Template="{DynamicResource BlackButton}"[/code] Noch besser sieht das ganze natürlich aus, wenn man den Hintergrund dazu passend auch noch optisch aufwertet. Hierzu legt man lediglich einen passenden [u]LinearGradientBrush[/u] an, welchen man dem Grid als Hintergrund zuweist : [code]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}" [/code]

<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>

<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>

Abgelegt unter aufwerten Button Control GUI LinearGradientBrush Optik optisch ansprechend schick Template Triggers WPF xaml

Alte URL: /snippet/hochwertige-optisch-ansprechende-wpf-buttons/1456

8 Kommentare

RoSi sagt:

Oktober 8, 2010 um 12:15 p.m. Uhr

„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.“
Weil nicht alle Anwender von der klicki-bunti-Fraktion sind und vielen mir bekannten nur das Ergebnis wichtig ist, wobei lediglich Wert auf eine übersichtliche Oberfläche gelegt wird. Nicht jeder Anwender ist zw. 16 und 25 Jahre alt.
DotNetMastermind sagt:

Oktober 8, 2010 um 2:15 p.m. Uhr

@ RoSi

1. Optisch ansprechende Webseiten werden viel stärker frequentiert.
2. Optisch ansprechende Oberflächen bzw. Controls haben bis jetzt jeden Anwender – vor allen Dingen Entscheidungstgräger – mit welchem ich geschäftlich zu tun hatte beigeistert (auch die jenseits der 25 Jahre – bin selbst auch >30)
3. Ein Indiz für die Notwendigkeit solcher Controls ist auch, dass nicht ohne Grund etlich Anbieter von zusätzlichen Komponenten (devExpress, Infragistics etc.) exisitieren

Mit diesem Scnippet wollte ich die Vorlage für die Erstellung eigener hochweriger Buttons (ohne den Einsatz von Fremdkomponenten) bieten. Damit ist es mit einfachen Mitteln möglich seine Anwendung aufzuwerten.

Und diese „Anti-klicki-bunti Diskussion“ wird meistens von denen geführt, welche eine Aufwertung Ihrer Anwendung für irrelevant halten !
DotNetMastermind sagt:

Oktober 8, 2010 um 2:18 p.m. Uhr

* sorry für die Rechtschreibfehler …
Jan Welker sagt:

Oktober 8, 2010 um 5:20 p.m. Uhr

Hier ist ein Screenshot von dem Button: http://twitpic.com/2vpfmw
RoSi sagt:

Oktober 9, 2010 um 1:41 p.m. Uhr

Nehme ich gern zur Kenntnis, habe übersehen, dass es unterschiedliches Klientel gibt. Dann kommen wir uns nicht ins Gehege. Auch gut. Meine Fraktion ist die „Wo steht das Ergebnis, wie komme ich hin?“. In gewissen Finanzbereichen zählen halt nur harte Fakten. Im Übrigen ist dafür IMHO Google der beste Beweis. Eine fast weiße Seite, ohne viel Gedöhns drumherum liefert die besten Suchergebnisse. Als sie davon abwichen und den Weg von Bing einschlugen, war das Geschrei groß. Eine Bank interessiert auch nur peripher, wie die Zahlen verpackt sind, um eine Kreditzusage zu erteilen.
DotNetMastermind sagt:

Oktober 10, 2010 um 10:33 a.m. Uhr

Google ist in diesem Fall eine Ausnahmeerscheinung, aber auch nur für den Bereich Webseite/Suchmaschine.

Im Bereich der Client-Software habe ich im Rahmen einer Fallstudie eine WPF-Applikation vollständig optisch aufgewertet (unter anderem mit den „NextGenButtons“).

Beide Applikationen erfüllten den gleichen Zweck und es bestand bei den zur Verfügung stehen Funktionalitäten keine Abweichungen.

Dennoch fanden nahezu 90% der Probanden die optisch „getunte“ Variante moderner, hochwertiger und was am interessantesten ist sogar [b]besser[/b].

Obwohl beide Programme die gleiche Funktionalität besaßen, empfanden ca. 90% der Probanden die optisch „getunten“ Variante als [b]besser[/b] ?!

Moderne Oberflächen surregieren dem Anwender eine bessere, stabilere und hochwertigere Anwendung …
DotNetMastermind sagt:

Oktober 10, 2010 um 10:09 p.m. Uhr

* habe natürlich „suggerieren“ gemeint …
DotNetMastermind sagt:

Oktober 13, 2010 um 1:24 a.m. Uhr

@RoSi

Bezüglich der Relevanz einer hochwertigen Oberfläche hier ein aktuelles Statement :
„Die Software der Zukunft wird über ihr Aussehen verkauft. Und ob das gefällt, entscheidet einzig und allein der Käufer. Um erfolgreiche Software zu entwickeln, müssen also zwingend die Bedürfnisse und Ansprüche des Users im Vordergrund stehen.“
Quelle : http://www.gui-design.ppedv.de/
> 1. Fachkonferenz rund um Grafische Benutzeroberfläche und Design <