Feedback

C# - Hochwertige (optisch ansprechende) WPF - Buttons

Veröffentlicht von am 08.10.2010
(2 Bewertungen)
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 unten

Dieses 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}"

Snippet in VB übersetzen
<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>

8 Kommentare zum Snippet

RoSi schrieb am 08.10.2010:
"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 schrieb am 08.10.2010:
@ 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 schrieb am 08.10.2010:
* sorry für die Rechtschreibfehler ...
Jan Welker schrieb am 08.10.2010:
Hier ist ein Screenshot von dem Button: http://twitpic.com/2vpfmw
RoSi schrieb am 09.10.2010:
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 schrieb am 10.10.2010:
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 besser.

Obwohl beide Programme die gleiche Funktionalität besaßen, empfanden ca. 90% der Probanden die optisch "getunten" Variante als besser ?!

Moderne Oberflächen surregieren dem Anwender eine bessere, stabilere und hochwertigere Anwendung ...
DotNetMastermind schrieb am 10.10.2010:
* habe natürlich "suggerieren" gemeint ...
DotNetMastermind schrieb am 13.10.2010:
@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 <
 

Logge dich ein, um hier zu kommentieren!