さまざまなホバー状態のボタンリソースを使用する

Question

ボタンのtranslateXとtranslateYの値を再配置することによって、xamlのスプライトシートを使用してボタンを作成しています。

状態変更のtranslateXとtranslateYの値を変更することですが、これはxamlでは可能ですが、ブレンドしてxとyの値を変更できるようにします計算された値（これらの値はトゥイーンではなく、ホバー上で変更したくない）

現在の単一状態ボタンの例です。

 <Button Content="test" HorizontalAlignment="Center" Height="57" VerticalAlignment="Center" Width="294" d:LayoutOverrides="VerticalAlignment"> 
      <Button.Resources> 
       <Style x:Key="ButtonStyle1" TargetType="Button"> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="Button"> 
           <Grid> 
            <Rectangle x:Name="R" Opacity="1" StrokeThickness="0" Visibility="Visible"> 
             <Rectangle.Fill> 
              <ImageBrush ImageSource="/Project;component/wp7_buttons.png" Stretch="None" AlignmentX="Left" AlignmentY="Top" > 
               <ImageBrush.Transform> 
                <CompositeTransform TranslateX="-558" TranslateY="0"/> 
               </ImageBrush.Transform> 
              </ImageBrush> 
             </Rectangle.Fill> 
            </Rectangle> 
            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
           </Grid> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </Button.Resources> 
      <Button.Style> 
       <StaticResource ResourceKey="ButtonStyle1"/> 
      </Button.Style> 
     </Button> 

どうすればよいですか？私はxとyの変換値とImageSourceを含むプロパティに各状態をバインドできる必要があります。

Answer 1

あなたはボタンテンプレートのコピーを編集CAND、あなたはそのすべてのVisualStatesを見ることができますブレンドで

以下のようなVisualStatesと仕事をしなければなりません。あなたが必要とする状態ごとに重複要素を持つと組み合わせる

ので、あなたは自分のImageBrush CompositeTransformに合わせてStoryboard.TargetNameとStoryboard.TargetPropertyを変更する必要があります:)

<ControlTemplate TargetType="Button"> 
    <Grid x:Name="Root"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CommonStates"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="0:0:0.1" /> 
        <VisualTransition To="Pressed" /> 
        <VisualTransition From="Pressed" /> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Normal" /> 
       <VisualState x:Name="MouseOver"> 
        <Storyboard> 
         <DoubleAnimation Duration="0" Storyboard.TargetName="PressedElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="0" /> 
         <DoubleAnimation Duration="0" Storyboard.TargetName="MouseOverElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="1" /> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Pressed"> 
        <Storyboard> 
         <DoubleAnimation Duration="0" Storyboard.TargetName="NormalElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="0.25" /> 
         <DoubleAnimation Duration="0" Storyboard.TargetName="PressedElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="1" />