locked
Animation the color of text in the content presenter. RRS feed

  • Question

  • I rarely use the built in buttons that blend provides.  Way too hard to customize and lots of useless info.  So I create a rectangle and right click and make it into a button then work from there.

    Problem I'm running into is how to simply change the color of the text in the content presenter during rollover.  There has to be an answer for this.

    Here is my button code so you can see the issue first hand.

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	x:Class="coolnav.MainPage"
    	Width="400" Height="300" mc:Ignorable="d">
    
    	<UserControl.Resources>
    		<Style x:Key="ButtonStyle1" TargetType="Button">
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="Button">
    						<Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
    							<Grid.RenderTransform>
    								<TransformGroup>
    									<ScaleTransform/>
    									<SkewTransform/>
    									<RotateTransform/>
    									<TranslateTransform/>
    								</TransformGroup>
    							</Grid.RenderTransform>
    							<VisualStateManager.VisualStateGroups>
    								<VisualStateGroup x:Name="FocusStates">
    									<VisualState x:Name="Focused"/>
    									<VisualState x:Name="Unfocused"/>
    								</VisualStateGroup>
    								<VisualStateGroup x:Name="CommonStates">
    									<VisualState x:Name="Normal"/>
    									<VisualState x:Name="MouseOver">
    										<Storyboard>
    											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    												<EasingDoubleKeyFrame KeyTime="00:00:00" Value="10"/>
    												<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="-16"/>
    												<EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="43"/>
    												<EasingDoubleKeyFrame KeyTime="00:00:00.6000000" Value="34.072"/>
    											</DoubleAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
    												<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFE6BD05"/>
    												<EasingColorKeyFrame KeyTime="00:00:00.1200000" Value="Black"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
    												<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFFEEB31"/>
    												<EasingColorKeyFrame KeyTime="00:00:00.1200000" Value="Black"/>
    											</ColorAnimationUsingKeyFrames>
    											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(UIElement.Opacity)">
    												<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    											</DoubleAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)">
    												<DiscreteObjectKeyFrame KeyTime="00:00:00">
    													<DiscreteObjectKeyFrame.Value>
    														<VerticalAlignment>Center</VerticalAlignment>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
    												<DiscreteObjectKeyFrame KeyTime="00:00:00">
    													<DiscreteObjectKeyFrame.Value>
    														<HorizontalAlignment>Right</HorizontalAlignment>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(FrameworkElement.Margin)">
    												<DiscreteObjectKeyFrame KeyTime="00:00:00">
    													<DiscreteObjectKeyFrame.Value>
    														<Thickness>0,0,16,0</Thickness>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
    												<EasingColorKeyFrame KeyTime="00:00:00" Value="Black"/>
    												<EasingColorKeyFrame KeyTime="00:00:00.1400000" Value="#FDFFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    												<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    												<EasingDoubleKeyFrame KeyTime="00:00:00.1400000" Value="-90.368"/>
    												<EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="-55.368"/>
    											</DoubleAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Pressed"/>
    									<VisualState x:Name="Disabled"/>
    								</VisualStateGroup>
    							</VisualStateManager.VisualStateGroups>
    							<Rectangle x:Name="rectangle" RadiusX="10" RadiusY="10">
    								<Rectangle.Fill>
    									<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    										<GradientStop Color="#FFFEEB31" Offset="0"/>
    										<GradientStop Color="#FFE6BD05" Offset="1"/>
    									</LinearGradientBrush>
    								</Rectangle.Fill>
    							</Rectangle>
    							<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="0,0,0,11" Opacity="0" Text="textBlock" TextWrapping="Wrap" d:LayoutOverrides="Height" Foreground="Black" RenderTransformOrigin="0.5,0.5">
    								<TextBlock.RenderTransform>
    									<TransformGroup>
    										<ScaleTransform/>
    										<SkewTransform/>
    										<RotateTransform/>
    										<TranslateTransform/>
    									</TransformGroup>
    								</TextBlock.RenderTransform>
    							</TextBlock>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    		<Style x:Key="ButtonStyle2" TargetType="Button">
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="Button">
    						<Grid>
    							<VisualStateManager.VisualStateGroups>
    								<VisualStateGroup x:Name="FocusStates">
    									<VisualState x:Name="Focused"/>
    									<VisualState x:Name="Unfocused"/>
    								</VisualStateGroup>
    								<VisualStateGroup x:Name="CommonStates">
    									<VisualState x:Name="Normal"/>
    									<VisualState x:Name="MouseOver">
    										<Storyboard>
    											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    												<EasingDoubleKeyFrame KeyTime="00:00:00" Value="-21"/>
    												<EasingDoubleKeyFrame KeyTime="00:00:00.1800000" Value="-33.865"/>
    												<EasingDoubleKeyFrame KeyTime="00:00:00.3200000" Value="32.135"/>
    												<EasingDoubleKeyFrame KeyTime="00:00:00.4600000" Value="20.135"/>
    											</DoubleAnimationUsingKeyFrames>
    											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    												<EasingDoubleKeyFrame KeyTime="00:00:00" Value="-23"/>
    												<EasingDoubleKeyFrame KeyTime="00:00:00.1800000" Value="-127.328"/>
    												<EasingDoubleKeyFrame KeyTime="00:00:00.3200000" Value="24.672"/>
    												<EasingDoubleKeyFrame KeyTime="00:00:00.4600000" Value="14.672"/>
    											</DoubleAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.OpacityMask).(SolidColorBrush.Color)">
    												<EasingColorKeyFrame KeyTime="00:00:00" Value="Black"/>
    												<EasingColorKeyFrame KeyTime="00:00:00.1800000" Value="White"/>
    												<EasingColorKeyFrame KeyTime="00:00:00.3200000" Value="White"/>
    												<EasingColorKeyFrame KeyTime="00:00:00.4600000" Value="White"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
    												<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFE6BD05"/>
    												<EasingColorKeyFrame KeyTime="00:00:00.1800000" Value="Black"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
    												<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFFEEB31"/>
    												<EasingColorKeyFrame KeyTime="00:00:00.1800000" Value="Black"/>
    											</ColorAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Pressed"/>
    									<VisualState x:Name="Disabled"/>
    								</VisualStateGroup>
    							</VisualStateManager.VisualStateGroups>
    							<Rectangle x:Name="rectangle" RadiusX="10" RadiusY="10" RenderTransformOrigin="0.5,0.5">
    								<Rectangle.RenderTransform>
    									<TransformGroup>
    										<ScaleTransform/>
    										<SkewTransform/>
    										<RotateTransform/>
    										<TranslateTransform/>
    									</TransformGroup>
    								</Rectangle.RenderTransform>
    								<Rectangle.Fill>
    									<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    										<GradientStop Color="#FFFEEB31" Offset="0"/>
    										<GradientStop Color="#FFE6BD05" Offset="1"/>
    									</LinearGradientBrush>
    								</Rectangle.Fill>
    							</Rectangle>
    							<ContentPresenter x:Name="contentPresenter" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,31,0" RenderTransformOrigin="0.5,0.5" OpacityMask="Black">
    								<ContentPresenter.RenderTransform>
    									<TransformGroup>
    										<ScaleTransform/>
    										<SkewTransform/>
    										<RotateTransform/>
    										<TranslateTransform/>
    									</TransformGroup>
    								</ContentPresenter.RenderTransform>
    							</ContentPresenter>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    	</UserControl.Resources>
    	<Canvas x:Name="LayoutRoot" Background="#FF373737">
    		<Button Height="26" Style="{StaticResource ButtonStyle2}" Width="283" Content="Button" Canvas.Left="-50" Canvas.Top="68"/>
    	</Canvas>
    </UserControl>
    Monday, March 15, 2010 8:14 PM

Answers

  • I found the answer.

    http://wildermuth.com/2008/12/01/Using_Content_in_ControlTemplates

    Works like a charm.
    Monday, March 15, 2010 8:52 PM

All replies

  • I found the answer.

    http://wildermuth.com/2008/12/01/Using_Content_in_ControlTemplates

    Works like a charm.
    Monday, March 15, 2010 8:52 PM
  • Thanks! That linked helped out!
    Monday, July 16, 2012 7:00 PM