Feedback

C# - WPF - Buttons "OK/Cancel" - endlich unverwechselbar -

Veröffentlicht von am 10/9/2010
(1 Bewertungen)
Bei vielen Anwendungen kann man in einem Dialogfenster nicht auf den ersten Blick erkennen, welcher Button eine positive und welcher eine negative Entscheidung auslöst.

Mithilfe der NextGenButtons kann man dies sehr elegant lösen.

Hierbei werden immer grüne Buttons für „positive Entscheidungen“ wie z.B. Ja, Ok, Speichern etc. und rote Buttons für „negative Entscheidungen“ wie z.B. Nein, Abbrechen, Nicht speichern verwendet.

Screenshot der Beispiel-Anwendung => http://twitpic.com/2w4j8q oder http://twitpic.com/2ws43j
<Window x:Class="OKCancelButtons.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title=".Net-Snippets - OKCancelButtons" Height="180" 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>

    <!-- **************************************************************************************** <-->
    <!-- **************************** Template für grüne Buttons ******************************** <-->
    <!-- **************************************************************************************** <-->
    <ControlTemplate x:Key="GreenButton" TargetType="{x:Type Button}">
      <Border BorderBrush="White" BorderThickness="1" CornerRadius="3">
        <Border BorderBrush="Green" BorderThickness="1" CornerRadius="3">
          <Grid Name="ButtonGrid">
            <Rectangle Name="ButtonRect">
              <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                  <GradientStop Offset="0" Color="LightGreen" />
                  <GradientStop Offset="0.49" Color="Green" />
                  <GradientStop Offset="0.5" Color="Green" />
                  <GradientStop Offset="1" Color="DarkGreen" />
                </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="GreenYellow" />
                <GradientStop Offset="1" Color="Green" />
              </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="#FF115011" />
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>

    <!-- **************************************************************************************** <-->
    <!-- **************************** Template für rote Buttons ********************************* <-->
    <!-- **************************************************************************************** <-->
    <ControlTemplate x:Key="RedButton" TargetType="{x:Type Button}">
      <Border BorderBrush="White" BorderThickness="1" CornerRadius="3">
        <Border BorderBrush="DarkRed" BorderThickness="1" CornerRadius="3">
          <Grid Name="ButtonGrid">
            <Rectangle Name="ButtonRect">
              <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                  <GradientStop Offset="0" Color="Pink" />
                  <GradientStop Offset="0.49" Color="Red" />
                  <GradientStop Offset="0.5" Color="Red" />
                  <GradientStop Offset="1" Color="DarkRed" />
                </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="Pink" />
                <GradientStop Offset="1" Color="Red" />
              </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="#FF701111" />
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>

  </Window.Resources>

  <Grid Background="{StaticResource GridBackgroundBrush}">
    <TextBlock Foreground="White" FontFamily="Arial" FontSize="13" Margin="25" TextWrapping="Wrap"
               HorizontalAlignment="Center" TextAlignment="Center"
               Text="Sollen die von Ihnen eingegebenen Daten permanent gespeichert werden ?"/>
    
    <Button Name="btnOK" Content="Speichern" Margin="40,0,0,25" Width="110" Height="30"
            HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="White"
            Template="{DynamicResource GreenButton}"/>

    <Button Name="btnCancel" Content="Nicht speichern" Margin="0,0,40,25" Width="110" Height="30"
            HorizontalAlignment="Right" VerticalAlignment="Bottom" Foreground="White"
            Template="{DynamicResource RedButton}"/>
  </Grid>

Kommentare zum Snippet

 

Logge dich ein, um hier zu kommentieren!