locked
How to handle label mouse over colours when colour resource is applied RRS feed

  • Question

  • I can create a movie where on the MouseEnter event, I can change the static colour of a label from one colour to another (black to white, for example).  This works well.

    Now by extension, I want to make those two colours controlled by the theme employed, program wide.  As a result, I have attempted to assign the label colour to a resource colour definition called labelNormal in my resource dictionary.  Then, in the movie, I have attempted to change this to labelOver, another colour in my resource dictionary.  Unfortunately, it doesn't work--it permanently assigns labelOver to the label colour regardless of the movie.  It works well if I assign colours static, but does not work once I make the foreground colour a resource instead.

    What's a good way to handle colour changes like this that is handled by the theme?  Any help is appreciated.


    Purkiss
    Wednesday, June 22, 2011 5:31 PM

All replies

  • Could you post the xaml code you are using?
    Wednesday, June 22, 2011 7:11 PM
    Moderator
  • Here is the first example.  When I use hard-coded colours for the events, there is no issue:

     

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="label_tester.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    	<Window.Resources>
    		<SolidColorBrush x:Key="brushLabelNormal" Color="Black"/>
    		<SolidColorBrush x:Key="brushLabelOver" Color="Red"/>
    		<Storyboard x:Key="movLabel1Over">
    			<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="label">
    				<EasingColorKeyFrame KeyTime="0" Value="White"/>
    			</ColorAnimationUsingKeyFrames>
    		</Storyboard>
    		<Storyboard x:Key="movLabel1OverREV">
    			<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="label">
    				<SplineColorKeyFrame KeyTime="0" Value="Black"/>
    			</ColorAnimationUsingKeyFrames>
    		</Storyboard>
    	</Window.Resources>
    	<Window.Triggers>
    		<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="label">
    			<BeginStoryboard Storyboard="{StaticResource movLabel1Over}"/>
    		</EventTrigger>
    		<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="label">
    			<BeginStoryboard x:Name="movLabel1OverREV_BeginStoryboard" Storyboard="{StaticResource movLabel1OverREV}"/>
    		</EventTrigger>
    	</Window.Triggers>
    
    	<Grid x:Name="LayoutRoot">
    		<Label x:Name="label" Content="Label" FontSize="96" Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Top" Background="Red"/>
    	</Grid>
    </Window>
    

     

    However, because I want to control the normal colour of the label and the mouse over colour of the label based on the theme, I want to assign those two colours to a resource dictionary.  However, when I change the value of the resource from the normal to the over--it doesn't trigger a change in the movie--it simply changes the element's foreground:

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="label_tester.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    	<Window.Resources>
    		<SolidColorBrush x:Key="labelNormal" Color="Black"/>
    		<SolidColorBrush x:Key="labelOver" Color="White"/>
    		<Storyboard x:Key="movLabelOver"/>
    		<Storyboard x:Key="movLabelOverRev"/>
    	</Window.Resources>
    	<Window.Triggers>
    		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
    			<BeginStoryboard Storyboard="{StaticResource movLabelOver}"/>
    			<BeginStoryboard Storyboard="{StaticResource movLabelOverRev}"/>
    		</EventTrigger>
    	</Window.Triggers>
    
    	<Grid x:Name="LayoutRoot">
    		<Label x:Name="label" Content="Label" FontSize="96" Foreground="{DynamicResource labelOver}" HorizontalAlignment="Left" VerticalAlignment="Top" Background="Red"/>
    	</Grid>
    </Window>
    

    So it appears you cannot change the colour of labels in a movie if the colours are stored as resource dictionary entries.

    Can someone suggest an alternate way of controlling a font colour mouse over of labels by theme?

     


    Purkiss
    Wednesday, June 22, 2011 8:51 PM
  • I see two issues here: First, you're not using Colors, you're using a Brush. Second, using a trigger instead of a storyboard will make your life easier. Take a look:

    <Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <Page.Resources>
       <Color x:Key="brushLabelNormal">#FF000000</Color>
       <Color x:Key="brushLabelOver">#FFc80000</Color>
       
       <Style TargetType="{x:Type Label}" BasedOn="{x:Null}">
         <Setter Property="Foreground">
          <Setter.Value>
            <SolidColorBrush Color="{StaticResource brushLabelNormal}"/>
          </Setter.Value>
         </Setter>
         <Style.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Foreground">
             <Setter.Value>
               <SolidColorBrush Color="{StaticResource brushLabelOver}"/>
             </Setter.Value>
            </Setter>
          </Trigger>
         </Style.Triggers>
       </Style>
      </Page.Resources>
      
      <Grid>
       <Label Content="Foo"/>
      </Grid>
    </Page>
    


    Leon Terry
    Blog | TFK Labs | Twitter
    • Proposed as answer by VLTII Friday, June 24, 2011 7:13 PM
    Friday, June 24, 2011 7:13 PM