VisualState modifications

[PaulHuppé]

Hi,

I am quite new to Expression Blend and using the VisualStateManager.  In the Styles.xaml file, the is a resource I am using which I would like to mofify.  The resource is called "ToolbarButton", and it makes use of another resource called "WhiteBackGlowButton".  What I would like to do, is to add a "Pressed" state so that after the button is pressed, it as a different appearance, say maybe a different background color.  Here is the code from the xaml:

    <ControlTemplate x:Key="WhiteBackGlowButton" TargetType="Button">
        <Grid Cursor="Hand" Background="Transparent" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <ScaleTransform x:Name="handScale" />
            </Grid.RenderTransform>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <Storyboard>
                            <DoubleAnimation To="0" FillBehavior="HoldEnd" 
              Storyboard.TargetName="brushLight" 
              Storyboard.TargetProperty="Opacity" 
              Duration="0:0:0.4" />
                            <DoubleAnimation To="1" Storyboard.TargetName="handScale" BeginTime="0:0:0" Storyboard.TargetProperty="ScaleX" Duration="0:0:0.1" />
                            <DoubleAnimation To="1" Storyboard.TargetName="handScale" BeginTime="0:0:0" Storyboard.TargetProperty="ScaleY" Duration="0:0:0.1" />
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <DoubleAnimation To="0.75" FillBehavior="HoldEnd" 
              Storyboard.TargetName="brushLight" 
              Storyboard.TargetProperty="Opacity" 
              Duration="0:0:0.1" />
                            <DoubleAnimation To="1.15" Storyboard.TargetName="handScale" BeginTime="0:0:0" Storyboard.TargetProperty="ScaleX" Duration="0:0:0.1" />
                            <DoubleAnimation To="1.15" Storyboard.TargetName="handScale" BeginTime="0:0:0" Storyboard.TargetProperty="ScaleY" Duration="0:0:0.1" />
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <!-- The background white glow effect -->
            <Canvas Width="65" Height="55" Margin="-10,-10,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
                <Rectangle x:Name="backGlow" RenderTransformOrigin="0.5,1" IsHitTestVisible="False" 
            Width="65" Height="55" Canvas.Left="0" Canvas.Top="0">
                    <Rectangle.Fill>
                        <RadialGradientBrush x:Name="brushLight" Center="0.5, 0.5" RadiusY="0.5">
                            <GradientStop Offset="0" Color="#FFFFFFFF" />
                            <GradientStop Offset="0.98" Color="#00FFFFFF" />
                        </RadialGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
            </Canvas>
            <!-- Content of the menu/tool -->
            <ContentPresenter
       x:Name="contentPresenter"
       Content="{TemplateBinding Content}"
       ContentTemplate="{TemplateBinding ContentTemplate}"
       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
       Margin="{TemplateBinding Padding}"/>
        </Grid>
    </ControlTemplate>

    <Style x:Key="ToolbarButton" TargetType="Button">
        <Setter Property="Template" Value="{StaticResource WhiteBackGlowButton}" />
        <Setter Property="Margin" Value="5" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Width" Value="35" />
        <Setter Property="Height" Value="30" />
    </Style>

I have tried several things and nothing I tried seemed to work for me.

Thanks,
Paul

[DominiqueBroux]

There is a sample of the 'Pressed' state here : http://msdn.microsoft.com/en-us/library/cc278069(v=vs.95).aspx

[PaulHuppé]

Hi,
Ok, that helped.  But I see that the "Pressed" state does not "stick".  I mean that as soon as I release the mouse button it goes from "Pressed" state back to "Normal" state.  I wanted to have it stay in "Pressed" state until something else happens like clicking another button for example.  I guess what I need to do is to assign the button to a different style after a mouse click.

Maybe there is a way to do this with bindings.  The following line of code does not work because what comes after "StaticResource" must be a string.  But it is essentially what I would like to do:

<Button x:Name="btnZoomIn" Style="{StaticResource {Binding zoomInButtonStyle}}"

where the "zoomInButtonStyle" would be changed in code behind to select different styles.  Can something like that be achieved?

Paul

[DominiqueBroux]

But I see that the "Pressed" state does not "stick". I mean that as soon as I release the mouse button it goes from "Pressed" state back to "Normal" state. I wanted to have it stay in "Pressed" state until something else happens like clicking another button for example.

In this case you need a 'ToggleButton' instead of a 'Button' but you will have to implement the logic to uncheck the button when something else happens.

[PaulHuppé]

ok, I will see if that can work for me.
Thanks,
Paul