none
EventTrigger bei Button Template RRS feed

  • Frage

  • Hallo!
     Ich habe ein Template für einen Button geschrieben und möchte dieses nun mit EventTriggern animieren. Ich habe das schon mal gemacht, allerdings noch nicht in dieser Art wie jetzt: Ich möchte bei Button.MouseEnter einen LinearGradientBrush auswechseln.
    Auf die Art und Weise, wie ich es jetzt momentan versuche, stürzt die Anwendung immer ab bzw. es kommt eine XamlParseException. Hier mal meine Style-Datei. Vielleicht findet ja jemand den Fehler.
    <ResourceDictionary
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    	
    	<!-- ============== auf alle angewendet =============== -->
    	<Style TargetType="Grid">
    		<Setter Property="Background" Value="#323232" />
    	</Style>
    	
    	<Style TargetType="TextBlock">
    		<Setter Property="Foreground" Value="#FFFFFF" />
    	</Style>
    	
    	<Style TargetType="Button">
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="Button">
    					<Grid x:Name="ButtonGrid">
    						<Border x:Name="ButtonBorder" CornerRadius="5" BorderThickness="1" BorderBrush="#FF2E2E2E" Background="{DynamicResource ButtonBlackBackground}" MinHeight="21.96">
    						</Border>
    						<ContentPresenter x:Name="ButtonContentPresenter"  HorizontalAlignment="{TemplateBinding Property=Button.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Property=Button.VerticalContentAlignment}" Content="{TemplateBinding Property=Button.Content}" />
    					</Grid>
    					<ControlTemplate.Triggers>
    						<Trigger Property="Button.IsMouseOver" Value="True">
    							<Setter Property="Background" TargetName="ButtonBorder" Value="{DynamicResource ButtonBlackBackground_MouseOver}" />
    						</Trigger>
    						<Trigger Property="IsKeyboardFocused" Value="True">
                                <Setter Property="Background" TargetName="ButtonBorder" Value="{DynamicResource ButtonBlackBackground_MouseOver}" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="ButtonBorder" Value="{DynamicResource ButtonBlackBackground_Pressed}" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Background" TargetName="ButtonBorder" Value="{DynamicResource ButtonBlackBackground_NotEnabled}" />
                            </Trigger>
    						<EventTrigger RoutedEvent="Button.MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <SingleAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="Background" From="{DynamicResource ButtonBlackBackground}" To="DynamicResource ButtonBlackBackground_MouseOver}" Duration="00:00:17" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
    					</ControlTemplate.Triggers>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
    	
    	<Style TargetType="GroupBox">
    		<Setter Property="Foreground" Value="#FFFFFFFF" />
    		<Setter Property="BorderBrush" Value="{x:Null}" />
    		<Setter Property="BorderThickness" Value="1" />
    	</Style>
    	
    	<!-- ============== speziell =============== -->
    	<Style x:Key="Header" TargetType="TextBlock">
    		<Setter Property="FontSize" Value="25" />
    		<Setter Property="FontStyle" Value="Italic" />
            <Setter Property="FontFamily" Value="\Fonts\#Consolas" />
    		<Setter Property="Foreground" Value="#A6D2FF" />
        </Style>
    	
    	<!-- =============== Verschiedenes =============== -->
    	<!-- Button -->
    	<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground">
    		<LinearGradientBrush.GradientStops>
    			<GradientStop Color="#FF5A5A5A" Offset="0.0"/>
    			<GradientStop Color="#FF4C4C4C" Offset="0.2"/>
    			<GradientStop Color="#FF3E3E3E" Offset="0.5"/>
    		</LinearGradientBrush.GradientStops>
    	</LinearGradientBrush>
    	<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground_MouseOver">
    		<LinearGradientBrush.GradientStops>
    			<GradientStop Color="#FF7F8183" Offset="0"/>
    			<GradientStop Color="#FF646566" Offset="0.2"/>
    			<GradientStop Color="#FF4A4A4A" Offset="0.5"/>
    		</LinearGradientBrush.GradientStops>
    	</LinearGradientBrush>
    	<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground_Pressed">
    		<LinearGradientBrush.GradientStops>
    			<GradientStop Color="#FF565656" Offset="0"/>
    			<GradientStop Color="#FF464646" Offset="0.2"/>
    			<GradientStop Color="#FF363636" Offset="0.5"/>
    		</LinearGradientBrush.GradientStops>
    	</LinearGradientBrush>
    	<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground_NotEnabled">
    		<LinearGradientBrush.GradientStops>
    			<GradientStop Color="#FF969696" Offset="0"/>
    			<GradientStop Color="#FF7B7B7B" Offset="0.2"/>
    			<GradientStop Color="#FF616161" Offset="0.5"/>
    		</LinearGradientBrush.GradientStops>
    	</LinearGradientBrush>
    	
    </ResourceDictionary>
    Samstag, 13. März 2010 23:31

Antworten

  • Hi WPF-Fan,

    der Compiler ist nicht so schlau, als dass er komplexe Objekte wie einen LinearGradientBrush animieren könnte. :-)

    Du musst ergo die einzelnen GradientStops Deiner LinearGradientBrushs (resp. deren Color-Props) animieren. In Deinem Fall ist das mit einer ColorAnimation je GradientStop zu lösen, da die Offsets für alle Brushs identisch sind. Wäre das nicht der Fall, könntest Du zus. mit einer DoubleAnimation deren Offset animieren. Schwieriger würde es nur, wenn die Anzahl der GradientStops unterschiedlich wäre - habe ich noch nicht ausprobiert.

    Um das nun zu realisieren, brauchst Du eigentlich nur noch einen einzigen LinearGradientBrush für den Hintergrund (bzw. je zu animierender Prop); anstelle dessen müsstest Du die Farben der GradientStops als eigene Resource definieren, die dann wiederum in den Animationen verwendet werden kann. Die Animationen ersetzen dann auch Deine direkten Trigger. Ich habe das mal exemplarisch für eine Animation durchgespielt, dabei habe ich allerdings die Animationsdauer verkürzt und andere Farben vewendet, damit man's besser sieht (das farbliche "Soll" ist auskommentiert). Der Rest ist aber eigentlich nur Fummelei/Fleißarbeit.

    <Window x:Class="WpfTests.Button_LinearGradientBrushAnimation"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="Button_LinearGradientBrushAnimation" 
            SizeToContent="WidthAndHeight">
       <Window.Resources>
          <Color x:Key="Default_0">#FF5A5A5A</Color>
          <Color x:Key="Default_1">#FF4C4C4C</Color>
          <Color x:Key="Default_2">#FF3E3E3E</Color>
          
          <!--
          <Color x:Key="MouseOver_0">#FF7F8183</Color>
          <Color x:Key="MouseOver_1">#FF646566</Color>
          <Color x:Key="MouseOver_2">#FF4A4A4A</Color>
          -->
          <Color x:Key="MouseOver_0">White</Color>
          <Color x:Key="MouseOver_1">Red</Color>
          <Color x:Key="MouseOver_2">Green</Color>
    
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground">
             <LinearGradientBrush.GradientStops>
                <GradientStop Color="{StaticResource Default_0}" Offset="0.0"/>
                <GradientStop Color="{StaticResource Default_1}" Offset="0.2"/>
                <GradientStop Color="{StaticResource Default_2}" Offset="0.5"/>
             </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground_MouseOver">
             <LinearGradientBrush.GradientStops>
                <GradientStop Color="{StaticResource MouseOver_0}" Offset="0"/>
                <GradientStop Color="{StaticResource MouseOver_1}" Offset="0.2"/>
                <GradientStop Color="{StaticResource MouseOver_2}" Offset="0.5"/>
             </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground_Pressed">
             <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF565656" Offset="0"/>
                <GradientStop Color="#FF464646" Offset="0.2"/>
                <GradientStop Color="#FF363636" Offset="0.5"/>
             </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground_NotEnabled">
             <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF969696" Offset="0"/>
                <GradientStop Color="#FF7B7B7B" Offset="0.2"/>
                <GradientStop Color="#FF616161" Offset="0.5"/>
             </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
    
          <Style TargetType="Button">
             <Setter Property="Template">
                <Setter.Value>
                   <ControlTemplate TargetType="Button">
                      <Grid x:Name="ButtonGrid">
                         <Border x:Name="ButtonBorder" CornerRadius="5" BorderThickness="1" 
                                 BorderBrush="#FF2E2E2E" MinHeight="21.96"
                                 Background="{DynamicResource ButtonBlackBackground}">
                         </Border>
                         <ContentPresenter x:Name="ButtonContentPresenter"
                            HorizontalAlignment="{TemplateBinding Property=Button.HorizontalContentAlignment}" 
                            VerticalAlignment="{TemplateBinding Property=Button.VerticalContentAlignment}" 
                            Content="{TemplateBinding Property=Button.Content}"/>
                      </Grid>
                      <ControlTemplate.Triggers>
                         <!--
                         <Trigger Property="Button.IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="ButtonBorder" 
                                    Value="{StaticResource ButtonBlackBackground_MouseOver}" />
                         </Trigger>
                         -->
                         <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter Property="Background" TargetName="ButtonBorder" 
                                    Value="{StaticResource ButtonBlackBackground_MouseOver}" />
                         </Trigger>
                         <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" TargetName="ButtonBorder" 
                                    Value="{StaticResource ButtonBlackBackground_Pressed}" />
                         </Trigger>
                         <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="ButtonBorder" 
                                    Value="{StaticResource ButtonBlackBackground_NotEnabled}" />
                         </Trigger>
                         <EventTrigger RoutedEvent="Button.MouseEnter">
                            <EventTrigger.Actions>
                               <BeginStoryboard>
                                  <Storyboard>
                                     <ColorAnimation
                                        Storyboard.TargetName="ButtonBorder"
                                        Storyboard.TargetProperty="Background.GradientStops[0].Color"
                                        To="{StaticResource MouseOver_0}" Duration="0:0:1" />
                                     <ColorAnimation
                                        Storyboard.TargetName="ButtonBorder"
                                        Storyboard.TargetProperty="Background.GradientStops[1].Color"
                                        To="{StaticResource MouseOver_1}" Duration="0:0:1" />
                                     <ColorAnimation
                                        Storyboard.TargetName="ButtonBorder"
                                        Storyboard.TargetProperty="Background.GradientStops[2].Color"
                                        To="{StaticResource MouseOver_2}" Duration="0:0:1" />
                                  </Storyboard>
                               </BeginStoryboard>
                            </EventTrigger.Actions>
                         </EventTrigger>
                         <EventTrigger RoutedEvent="Button.MouseLeave">
                            <EventTrigger.Actions>
                               <BeginStoryboard>
                                  <Storyboard>
                                     <ColorAnimation
                                        Storyboard.TargetName="ButtonBorder"
                                        Storyboard.TargetProperty="Background.GradientStops[0].Color"
                                        To="{StaticResource Default_0}" Duration="0:0:1" />
                                     <ColorAnimation
                                        Storyboard.TargetName="ButtonBorder"
                                        Storyboard.TargetProperty="Background.GradientStops[1].Color"
                                        To="{StaticResource Default_1}" Duration="0:0:1" />
                                     <ColorAnimation
                                        Storyboard.TargetName="ButtonBorder"
                                        Storyboard.TargetProperty="Background.GradientStops[2].Color"
                                        To="{StaticResource Default_2}" Duration="0:0:1" />
                                  </Storyboard>
                               </BeginStoryboard>
                            </EventTrigger.Actions>
                         </EventTrigger>
                      </ControlTemplate.Triggers>
                   </ControlTemplate>
                </Setter.Value>
             </Setter>
          </Style>
    
       </Window.Resources>
       <Button Margin="25" Content="Dummy" Foreground="White"/>
    </Window>
    

    Cheers,
    Olaf
    http://blogs.intuidev.com
    Sonntag, 14. März 2010 09:02
  • Uff, mein Fehler - wegen der Änderung der ButtonBlackBackground Resource muss diese natürlich tatsächlich eine DynamicResource sein. Ändere also die Background-Zuweisung der ButtonBorder auf DynamicResource um:

    <Border x:Name="ButtonBorder" CornerRadius="5" BorderThickness="1" BorderBrush="#FF2E2E2E" 
            Background="{DynamicResource ButtonBlackBackground}" MinHeight="21.96"/>
    

    Cheers,
    Olaf
    http://blogs.intuidev.com
    Sonntag, 14. März 2010 13:04

Alle Antworten

  • Hi WPF-Fan,

    der Compiler ist nicht so schlau, als dass er komplexe Objekte wie einen LinearGradientBrush animieren könnte. :-)

    Du musst ergo die einzelnen GradientStops Deiner LinearGradientBrushs (resp. deren Color-Props) animieren. In Deinem Fall ist das mit einer ColorAnimation je GradientStop zu lösen, da die Offsets für alle Brushs identisch sind. Wäre das nicht der Fall, könntest Du zus. mit einer DoubleAnimation deren Offset animieren. Schwieriger würde es nur, wenn die Anzahl der GradientStops unterschiedlich wäre - habe ich noch nicht ausprobiert.

    Um das nun zu realisieren, brauchst Du eigentlich nur noch einen einzigen LinearGradientBrush für den Hintergrund (bzw. je zu animierender Prop); anstelle dessen müsstest Du die Farben der GradientStops als eigene Resource definieren, die dann wiederum in den Animationen verwendet werden kann. Die Animationen ersetzen dann auch Deine direkten Trigger. Ich habe das mal exemplarisch für eine Animation durchgespielt, dabei habe ich allerdings die Animationsdauer verkürzt und andere Farben vewendet, damit man's besser sieht (das farbliche "Soll" ist auskommentiert). Der Rest ist aber eigentlich nur Fummelei/Fleißarbeit.

    <Window x:Class="WpfTests.Button_LinearGradientBrushAnimation"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="Button_LinearGradientBrushAnimation" 
            SizeToContent="WidthAndHeight">
       <Window.Resources>
          <Color x:Key="Default_0">#FF5A5A5A</Color>
          <Color x:Key="Default_1">#FF4C4C4C</Color>
          <Color x:Key="Default_2">#FF3E3E3E</Color>
          
          <!--
          <Color x:Key="MouseOver_0">#FF7F8183</Color>
          <Color x:Key="MouseOver_1">#FF646566</Color>
          <Color x:Key="MouseOver_2">#FF4A4A4A</Color>
          -->
          <Color x:Key="MouseOver_0">White</Color>
          <Color x:Key="MouseOver_1">Red</Color>
          <Color x:Key="MouseOver_2">Green</Color>
    
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground">
             <LinearGradientBrush.GradientStops>
                <GradientStop Color="{StaticResource Default_0}" Offset="0.0"/>
                <GradientStop Color="{StaticResource Default_1}" Offset="0.2"/>
                <GradientStop Color="{StaticResource Default_2}" Offset="0.5"/>
             </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground_MouseOver">
             <LinearGradientBrush.GradientStops>
                <GradientStop Color="{StaticResource MouseOver_0}" Offset="0"/>
                <GradientStop Color="{StaticResource MouseOver_1}" Offset="0.2"/>
                <GradientStop Color="{StaticResource MouseOver_2}" Offset="0.5"/>
             </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground_Pressed">
             <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF565656" Offset="0"/>
                <GradientStop Color="#FF464646" Offset="0.2"/>
                <GradientStop Color="#FF363636" Offset="0.5"/>
             </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground_NotEnabled">
             <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF969696" Offset="0"/>
                <GradientStop Color="#FF7B7B7B" Offset="0.2"/>
                <GradientStop Color="#FF616161" Offset="0.5"/>
             </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
    
          <Style TargetType="Button">
             <Setter Property="Template">
                <Setter.Value>
                   <ControlTemplate TargetType="Button">
                      <Grid x:Name="ButtonGrid">
                         <Border x:Name="ButtonBorder" CornerRadius="5" BorderThickness="1" 
                                 BorderBrush="#FF2E2E2E" MinHeight="21.96"
                                 Background="{DynamicResource ButtonBlackBackground}">
                         </Border>
                         <ContentPresenter x:Name="ButtonContentPresenter"
                            HorizontalAlignment="{TemplateBinding Property=Button.HorizontalContentAlignment}" 
                            VerticalAlignment="{TemplateBinding Property=Button.VerticalContentAlignment}" 
                            Content="{TemplateBinding Property=Button.Content}"/>
                      </Grid>
                      <ControlTemplate.Triggers>
                         <!--
                         <Trigger Property="Button.IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="ButtonBorder" 
                                    Value="{StaticResource ButtonBlackBackground_MouseOver}" />
                         </Trigger>
                         -->
                         <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter Property="Background" TargetName="ButtonBorder" 
                                    Value="{StaticResource ButtonBlackBackground_MouseOver}" />
                         </Trigger>
                         <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" TargetName="ButtonBorder" 
                                    Value="{StaticResource ButtonBlackBackground_Pressed}" />
                         </Trigger>
                         <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="ButtonBorder" 
                                    Value="{StaticResource ButtonBlackBackground_NotEnabled}" />
                         </Trigger>
                         <EventTrigger RoutedEvent="Button.MouseEnter">
                            <EventTrigger.Actions>
                               <BeginStoryboard>
                                  <Storyboard>
                                     <ColorAnimation
                                        Storyboard.TargetName="ButtonBorder"
                                        Storyboard.TargetProperty="Background.GradientStops[0].Color"
                                        To="{StaticResource MouseOver_0}" Duration="0:0:1" />
                                     <ColorAnimation
                                        Storyboard.TargetName="ButtonBorder"
                                        Storyboard.TargetProperty="Background.GradientStops[1].Color"
                                        To="{StaticResource MouseOver_1}" Duration="0:0:1" />
                                     <ColorAnimation
                                        Storyboard.TargetName="ButtonBorder"
                                        Storyboard.TargetProperty="Background.GradientStops[2].Color"
                                        To="{StaticResource MouseOver_2}" Duration="0:0:1" />
                                  </Storyboard>
                               </BeginStoryboard>
                            </EventTrigger.Actions>
                         </EventTrigger>
                         <EventTrigger RoutedEvent="Button.MouseLeave">
                            <EventTrigger.Actions>
                               <BeginStoryboard>
                                  <Storyboard>
                                     <ColorAnimation
                                        Storyboard.TargetName="ButtonBorder"
                                        Storyboard.TargetProperty="Background.GradientStops[0].Color"
                                        To="{StaticResource Default_0}" Duration="0:0:1" />
                                     <ColorAnimation
                                        Storyboard.TargetName="ButtonBorder"
                                        Storyboard.TargetProperty="Background.GradientStops[1].Color"
                                        To="{StaticResource Default_1}" Duration="0:0:1" />
                                     <ColorAnimation
                                        Storyboard.TargetName="ButtonBorder"
                                        Storyboard.TargetProperty="Background.GradientStops[2].Color"
                                        To="{StaticResource Default_2}" Duration="0:0:1" />
                                  </Storyboard>
                               </BeginStoryboard>
                            </EventTrigger.Actions>
                         </EventTrigger>
                      </ControlTemplate.Triggers>
                   </ControlTemplate>
                </Setter.Value>
             </Setter>
          </Style>
    
       </Window.Resources>
       <Button Margin="25" Content="Dummy" Foreground="White"/>
    </Window>
    

    Cheers,
    Olaf
    http://blogs.intuidev.com
    Sonntag, 14. März 2010 09:02
  • Hallo Olaf,
    danke für die schnelle Antwort. Leider funktioniert es immer noch nicht ganz. Es wird zwar kein Fehler ausgegeben, aber der EventTrigger scheint nicht ausgelöst zu werden, denn wenn ich den Trigger für MouseOver weg lasse, geschieht nichts. Wahrscheinlich habe ich wieder irgendwas falsch gemacht. Hier mal der veränderte Code.
    <ResourceDictionary
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    	
    	<!-- Button -->
        <Color x:Key="ButtonDefault_0">#FF5A5A5A</Color>
        <Color x:Key="ButtonDefault_1">#FF4C4C4C</Color>
        <Color x:Key="ButtonDefault_2">#FF3E3E3E</Color>
        
        <Color x:Key="ButtonMouseOver_0">#FF7F8183</Color>
        <Color x:Key="ButtonMouseOver_1">#FF646566</Color>
        <Color x:Key="ButtonMouseOver_2">#FF4A4A4A</Color>
        
        <Color x:Key="ButtonPressed_0">#FF565656</Color>
        <Color x:Key="ButtonPressed_1">#FF464646</Color>
        <Color x:Key="ButtonPressed_2">#FF363636</Color>
        
        <Color x:Key="ButtonNotEnabled_0">#FF969696</Color>
        <Color x:Key="ButtonNotEnabled_1">#FF7B7B7B</Color>
        <Color x:Key="ButtonNotEnabled_2">#FF616161</Color>
        
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground">
    		<LinearGradientBrush.GradientStops>
    			<GradientStop Color="{StaticResource ButtonDefault_0}" Offset="0.0"/>
    			<GradientStop Color="{StaticResource ButtonDefault_1}" Offset="0.2"/>
    			<GradientStop Color="{StaticResource ButtonDefault_2}" Offset="0.5"/>
    		</LinearGradientBrush.GradientStops>
    	</LinearGradientBrush>
    	
    	<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground_MouseOver">
    		<LinearGradientBrush.GradientStops>
    			<GradientStop Color="{StaticResource ButtonMouseOver_0}" Offset="0"/>
    			<GradientStop Color="{StaticResource ButtonMouseOver_1}" Offset="0.2"/>
    			<GradientStop Color="{StaticResource ButtonMouseOver_2}" Offset="0.5"/>
    		</LinearGradientBrush.GradientStops>
    	</LinearGradientBrush>
    	
    	<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground_Pressed">
    		<LinearGradientBrush.GradientStops>
    			<GradientStop Color="{StaticResource ButtonPressed_0}" Offset="0"/>
    			<GradientStop Color="{StaticResource ButtonPressed_1}" Offset="0.2"/>
    			<GradientStop Color="{StaticResource ButtonPressed_2}" Offset="0.5"/>
    		</LinearGradientBrush.GradientStops>
    	</LinearGradientBrush>
    	
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="ButtonBlackBackground_NotEnabled">
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="{StaticResource ButtonNotEnabled_0}" Offset="0"/>
                <GradientStop Color="{StaticResource ButtonNotEnabled_1}" Offset="0.2"/>
                <GradientStop Color="{StaticResource ButtonNotEnabled_2}" Offset="0.5"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
        
        
        <!-- ============== auf alle angewendet =============== -->
    	<Style TargetType="Grid">
    		<Setter Property="Background" Value="#323232" />
    	</Style>
    	
    	<Style TargetType="TextBlock">
    		<Setter Property="Foreground" Value="#FFFFFF" />
    	</Style>
    	
    	<Style TargetType="Button">
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="Button">
    					<Grid x:Name="ButtonGrid">
    						<Border x:Name="ButtonBorder" CornerRadius="5" BorderThickness="1" BorderBrush="#FF2E2E2E" Background="{DynamicResource ButtonBlackBackground}" MinHeight="21.96">
    						</Border>
    						<ContentPresenter x:Name="ButtonContentPresenter"  HorizontalAlignment="{TemplateBinding Property=Button.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Property=Button.VerticalContentAlignment}" Content="{TemplateBinding Property=Button.Content}" />
    					</Grid>
    					<ControlTemplate.Triggers>
    						<Trigger Property="Button.IsMouseOver" Value="True">
    							<Setter Property="Background" TargetName="ButtonBorder" Value="{StaticResource ButtonBlackBackground_MouseOver}" />
    						</Trigger>
    						<Trigger Property="IsKeyboardFocused" Value="True">
                                <Setter Property="Background" TargetName="ButtonBorder" Value="{StaticResource ButtonBlackBackground_MouseOver}" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="ButtonBorder" Value="{StaticResource ButtonBlackBackground_Pressed}" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Background" TargetName="ButtonBorder" Value="{StaticResource ButtonBlackBackground_NotEnabled}" />
                            </Trigger>
                            <EventTrigger RoutedEvent="Button.MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="Background.GradientStops[0].Color" To="{StaticResource ButtonMouseOver_0}" Duration="0:0:17" />
                                            <ColorAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="Background.GradientStops[1].Color" To="{StaticResource ButtonMouseOver_1}" Duration="0:0:17" />
                                            <ColorAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="Background.GradientStops[2].Color" To="{StaticResource ButtonMouseOver_2}" Duration="0:0:17" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
    	
    	<Style TargetType="GroupBox">
    		<Setter Property="Foreground" Value="#FFFFFFFF" />
    		<Setter Property="BorderBrush" Value="{x:Null}" />
    		<Setter Property="BorderThickness" Value="1" />
    	</Style>
    	
    	<!-- ============== speziell =============== -->
    	<Style x:Key="Header" TargetType="TextBlock">
    		<Setter Property="FontSize" Value="25" />
    		<Setter Property="FontStyle" Value="Italic" />
            <Setter Property="FontFamily" Value="\Fonts\#Consolas" />
    		<Setter Property="Foreground" Value="#A6D2FF" />
        </Style>
    	
    	<!-- =============== Verschiedenes =============== -->
    	
    	
    </ResourceDictionary>
    Sonntag, 14. März 2010 09:47
  • Hi WPF-Fan,

    Du siehst wohl nichts, weil sich die Farben a) relativ ähnlich sind und b) der Farbwechsel satte 17 Sekunden dauert. :-)
    Im Gegensatz dazu siehst Du - wenn Dein regulärer Trigger aktiv ist - etwas, weil der dann die Farbe ad hoc umstellt.

    Kommentiere mal alle Trigger (bis auf den EventTrigger) in Deinem Button aus und teste den Style mit einem großen Button, wahlweise auch mit einer (wesentlich) kürzeren Laufzeit der Animation. Wenn z.B. mein Beispielfenster nimmst und dieses maximierst (oder halt wesentlich größer aufziehst), wirst Du sehen, dass es funktioniert.

    BTW - Du solltest StaticResource s anstelle von DynamicResource s verwenden (Background der Border), wenn sich die Resource während der Laufzeit nicht ändert (z.B. wegen dynamischer Themes).

    Und last but not least - wenn Du hier Code postest, wäre es einfacher wenn Du nur den für das Problem relevanten Code postest und mit ein paar Zeilenumbrüchen lässt sich das auch vernünftig lesen. Optimal ist's immer, wenn's ein lauffähiges Beispiel ist, dass man mal schnell per Copy'n'Paste ausprobieren kann.

    Cheers,
    Olaf
    http://blogs.intuidev.com
    Sonntag, 14. März 2010 11:33
  • Vielen Dank für die schnelle Hilfe!
    Jetzt funktioniert es.
    Sonntag, 14. März 2010 12:30
  • Ich muss leider doch nochmal was fragen. Ich habe grade fest gestellt, dass, wenn ich auf einen Button mit der Maus fahre, der Trigger auch auf die anderen Buttons angewendet wird, obwohl ich ja da gar nicht mit der Maus drauf bin. Wie kann das passieren???
    Sonntag, 14. März 2010 12:34
  • Huhu!

    Ohne Code - keine Ahnung! :-)
    Wenn Du aber den Style hernimmst, den ich in der ersten Antwort aufgeführt habe und den darin bef. Button durch ...

       <StackPanel>
          <Button Margin="25" Content="Dummy" Foreground="White"/>
          <Button Margin="25" Content="Dummy2" Foreground="Yellow"/>
       </StackPanel>

    ... ersetzt, ist alles so, wie's sein soll, sprich, nur der Button ändert die Farbe, über dem die Maus verweilt.
    Evt. hast Du auch nur den MouseEnter Trigger aktiv, nicht aber den für MouseLeave ..? In dem Fall würde der Hintergrund ja nicht mehr geändert, wenn die Maus von einem auf einen anderen Button bewegt wird.
    Cheers,
    Olaf
    http://blogs.intuidev.com
    Sonntag, 14. März 2010 12:41
  • MouseLeave ist auch definiert. In dem Moment, woch ich auf einen Button mit der Maus gehe, werden die anderen auch in MouseOver-Zustand versetzt und wenn ich wieder vom Button mit der Maus runter gehe, werden auch die anderen wieder in MouseLeave-Zustand versetzt. Das ist das Problem. Hier nochmal der Ausschnitt vom Button-Template:
    <Style TargetType="Button">
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="Button">
    					<Grid x:Name="ButtonGrid">
    						<Border x:Name="ButtonBorder" CornerRadius="5" BorderThickness="1" BorderBrush="#FF2E2E2E" Background="{StaticResource ButtonBlackBackground}" MinHeight="21.96">
    						</Border>
    						<ContentPresenter x:Name="ButtonContentPresenter"  HorizontalAlignment="{TemplateBinding Property=Button.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Property=Button.VerticalContentAlignment}" Content="{TemplateBinding Property=Button.Content}" />
    					</Grid>
    					<ControlTemplate.Triggers>
    						<Trigger Property="IsKeyboardFocused" Value="True">
                                <Setter Property="Background" TargetName="ButtonBorder" Value="{StaticResource ButtonBlackBackground_MouseOver}" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="ButtonBorder" Value="{StaticResource ButtonBlackBackground_Pressed}" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Background" TargetName="ButtonBorder" Value="{StaticResource ButtonBlackBackground_NotEnabled}" />
                            </Trigger>
                            <EventTrigger RoutedEvent="Button.MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="Background.GradientStops[0].Color" To="{StaticResource ButtonMouseOver_0}" Duration="0:0:0.17" />
                                            <ColorAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="Background.GradientStops[1].Color" To="{StaticResource ButtonMouseOver_1}" Duration="0:0:0.17" />
                                            <ColorAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="Background.GradientStops[2].Color" To="{StaticResource ButtonMouseOver_2}" Duration="0:0:0.17" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Button.MouseLeave">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="Background.GradientStops[0].Color" To="{StaticResource ButtonDefault_0}" Duration="0:0:0.17" />
                                            <ColorAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="Background.GradientStops[1].Color" To="{StaticResource ButtonDefault_1}" Duration="0:0:0.17" />
                                            <ColorAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="Background.GradientStops[2].Color" To="{StaticResource ButtonDefault_2}" Duration="0:0:0.17" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Button.MouseDown">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="Background.GradientStops[0].Color" To="{StaticResource ButtonPressed_0}" Duration="0:0:0.17" />
                                            <ColorAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="Background.GradientStops[1].Color" To="{StaticResource ButtonPressed_1}" Duration="0:0:0.17" />
                                            <ColorAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="Background.GradientStops[2].Color" To="{StaticResource ButtonPressed_2}" Duration="0:0:0.17" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>                        
                        </ControlTemplate.Triggers>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    		<Setter Property="Foreground" Value="{StaticResource DefaultForeground}" />
    	</Style>

    Sonntag, 14. März 2010 12:45
  • Ich habe nochmal Google befragt. Da hatte noch jemand das selbe Problem wie ich: http://social.msdn.microsoft.com/Forums/de-AT/wpfde/thread/2d80dcd7-ec01-4b5d-b2a0-3037d5bc26a3
    Ich muss also meine Farbverläuft in Style.Resources packen.
    Sonntag, 14. März 2010 13:03
  • Uff, mein Fehler - wegen der Änderung der ButtonBlackBackground Resource muss diese natürlich tatsächlich eine DynamicResource sein. Ändere also die Background-Zuweisung der ButtonBorder auf DynamicResource um:

    <Border x:Name="ButtonBorder" CornerRadius="5" BorderThickness="1" BorderBrush="#FF2E2E2E" 
            Background="{DynamicResource ButtonBlackBackground}" MinHeight="21.96"/>
    

    Cheers,
    Olaf
    http://blogs.intuidev.com
    Sonntag, 14. März 2010 13:04
  • Aaaha. Dankschön. Das macht sich so für mich besser, weil ich diese Farbverläufe auch nochmal an anderer Stelle brauche.
    Sonntag, 14. März 2010 13:05
  • Na, dann haben wir's ja. Perfektes Timing - ich muss jetzt nämlich wech ... Schönen Sonntag noch. :-)
    Cheers,
    Olaf
    http://blogs.intuidev.com
    Sonntag, 14. März 2010 13:06