views:

1621

answers:

1

In my custom button I need to show that it had focus(provides some tactile feel to tabbing to the button) and show that its pressed but what I have found is my focused state is displaying rather then my pressed state. How can I correct this. I would like to have mouse over to pressed not mouse over then focused(when the button is clicked )

Here is a sample of my control template.

<UserControl.Resources>
 <Style x:Key="GavelButtonStyle" TargetType="Button">
  <Setter Property="Template">
   <Setter.Value>
    <ControlTemplate TargetType="Button">
     <Grid Background="#FF000000" x:Name="grid">
      <vsm:VisualStateManager.VisualStateGroups>
       <vsm:VisualStateGroup x:Name="FocusStates">
        <vsm:VisualState x:Name="Unfocused"/>
        <vsm:VisualState x:Name="Focused">
         <Storyboard>
          <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.OpacityMask).(SolidColorBrush.Color)">
           <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFFFFFF"/>
          </ColorAnimationUsingKeyFrames>
          <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
           <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF2844B9"/>
          </ColorAnimationUsingKeyFrames>
         </Storyboard>
        </vsm:VisualState>
       </vsm:VisualStateGroup>
       <vsm:VisualStateGroup x:Name="CommonStates">
        <vsm:VisualStateGroup.Transitions>
         <vsm:VisualTransition GeneratedDuration="00:00:00.2000000"/>
        </vsm:VisualStateGroup.Transitions>
        <vsm:VisualState x:Name="MouseOver">
         <Storyboard>
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.5"/>
          </DoubleAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.5"/>
          </DoubleAnimationUsingKeyFrames>
         </Storyboard>
        </vsm:VisualState>
        <vsm:VisualState x:Name="Normal"/>
        <vsm:VisualState x:Name="Pressed">
         <Storyboard>
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/>
          </DoubleAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/>
          </DoubleAnimationUsingKeyFrames>
         </Storyboard>
        </vsm:VisualState>
        <vsm:VisualState x:Name="Disabled"/>
       </vsm:VisualStateGroup>
      </vsm:VisualStateManager.VisualStateGroups>
      <Image Cursor="Hand" x:Name="image" RenderTransformOrigin="0.5,0.5" Source="11_64x64.png" Stretch="Fill" OpacityMask="#FF000000">
       <Image.RenderTransform>
        <TransformGroup>
         <ScaleTransform/>
         <SkewTransform/>
         <RotateTransform/>
         <TranslateTransform/>
        </TransformGroup>
       </Image.RenderTransform>
      </Image>
      <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
     </Grid>
    </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>
</UserControl.Resources>;
+1  A: 

When you press it is becomes focused, can't do anything about that...you can clear the Visual State Manager's Focus content and then it won't look focused, but it get focus from the mouse interaction no matter what you do.

Shawn Wildermuth