locked
Changing text properties in a button template using visual states RRS feed

  • Question

  • I have searched and could not find a feasible solution. All I want to do is change a buttons text property using visual states. For example, I would like to take a button and increase the font-size on mouse-over. I would like the font-size to change in proportion to the user defined font-size of the button. Say the user set the font-size of the button to 12 and I set the scale to 1.5 then the mouse-over font-size will be 18. I'm not sure if I need to make a custom control or just build a template for a button.

    In some of the examples I have seen there are hidden text blocks in the control template which the visual state just makes visible. I find this to be tacky because they are visible with the content presenter.

    Below is a stripped control template.

    <Style x:Key="ButtonStyle" TargetType="Button">
    		<Setter Property="Background" Value="#FF1F3B53"/>
    		<Setter Property="Foreground" Value="#FF000000"/>
    		<Setter Property="Padding" Value="3"/>
    		<Setter Property="FontSize" Value="18" />       <!-- Change this -->
    		<Setter Property="BorderThickness" Value="1"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="Button">
    					<Grid>
    						<VisualStateManager.VisualStateGroups>
    							<VisualStateGroup x:Name="CommonStates">
    								<VisualState x:Name="Normal"/>
    								<VisualState x:Name="MouseOver">
    									<!--
    											What goes here.
    									-->
    								</VisualState>
    								<VisualState x:Name="Pressed">
    								</VisualState>
    								<VisualState x:Name="Disabled">
    								</VisualState>
    							</VisualStateGroup>
    							<VisualStateGroup x:Name="FocusStates">
    								<VisualState x:Name="Focused">
    								</VisualState>
    								<VisualState x:Name="Unfocused"/>
    							</VisualStateGroup>
    						</VisualStateManager.VisualStateGroups>
    						<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>


    Friday, December 10, 2010 5:00 PM

Answers

  • Scratch that. The key is render transformations. I just went into Blend and made the mouse over state active and stretched the content presenter out. Here is the code generated in the mouse over visual state. I still have proportion issues when changing font size, but this is closer then I was and an even better approach in the long run.


    <DoubleAnimation Duration="0" To="1.902" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
    <DoubleAnimation Duration="0" To="-0.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
    <DoubleAnimation Duration="0" To="3.037" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
    <DoubleAnimation Duration="0" To="-1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
    



    Friday, December 10, 2010 5:09 PM