ホバー上でボタンの背景画像を変更する/テンプレートを使用してクリックする

Question

私は、ホバー/クリックエフェクトでもう少し上手くしたいトンとトンのボタンを持つアプリケーションを持っています。私はこれにスタイリングテンプレートを使用することができたので、それぞれのボタンごとにトリガーを書く必要はありませんでしたが、このフェーズでは固執しています。

私はあなたが私はこのコードスニペットで、ここで達成しようとしています何の一般的なアイデアを得ると思う：

<Button BorderBrush="#00000000" Foreground="#00000000" Height="20" HorizontalContentAlignment="Right" IsEnabled="True" Name="btnMinimizeWindow" Width="21" DockPanel.Dock="Right" Margin="0,0,4,2" BorderThickness="0" Focusable="False" Style="{StaticResource ModernButton}"> 
    <Button.Background> 
     <ImageBrush ImageSource="/MyApp;component/Images/btnMinimize.png" /> 
    </Button.Background> 
    <Button.Resources> 
     <DataTemplate x:Key="Default" > 
      <Image Source="/MyApp;component/Images/btnMinimize.png" /> 
     </DataTemplate> 
     <DataTemplate x:Key="Hover"> 
      <Image Source="/MyApp;component/Images/btnMinimizeHover.png" /> 
     </DataTemplate> 
     <DataTemplate x:Key="Active"> 
      <Image Source="/MyApp;component/Images/btnMinimizeActive.png" /> 
     </DataTemplate> 
    </Button.Resources> 
</Button> 

とテンプレートファイル：私はこの問題に取り掛かるにはどうすればよい

<Style x:Key="ModernButton" TargetType="{x:Type Button}"> 
    <Setter Property="Padding" Value="1"/> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border Name="border" Background="{TemplateBinding Background}"> 
        <ContentPresenter Name="Content" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
            Margin="{TemplateBinding Padding}" 
            RecognizesAccessKey="True" 
            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 

        </Trigger> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="True"> 

        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

？このようにすることも可能ですか、何百万というトリガーでコードを乱雑にする必要がありますか？

Answer 1

あなたは、マウスオーバーとプレス（そしておそらくそれ以上）のノーマル状態のための背景画像用attached propertiesを定義できます。コントロールテンプレートの別のImageコントロールのSourceプロパティにこれらの添付プロパティを使用し、 VisualStateが変更されたときの画像の不透明度

例のスタイル：

<Button local:BackgroundImages.NormalBackgroundImage="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" 
     local:BackgroundImages.MouseOverBackgroundImage="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" 
     local:BackgroundImages.PressedBackgroundImage="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" 
     Content="Hello"/> 

そして最後に、これらの添付プロパティの定義：設定添付プロパティを持つボタンで使用

<Style TargetType="Button"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="Disabled"/> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="mouseOverBackgroundImage" Storyboard.TargetProperty="Opacity" Duration="0:0:0.1" To="1"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="pressedBackgroundImage" Storyboard.TargetProperty="Opacity" Duration="0:0:0.1" To="1"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Image Name="normalBackgroundImage" Source="{TemplateBinding local:BackgroundImages.NormalBackgroundImage}"/> 
        <Image Name="mouseOverBackgroundImage" Source="{TemplateBinding local:BackgroundImages.MouseOverBackgroundImage}" Opacity="0"/> 
        <Image Name="pressedBackgroundImage" Source="{TemplateBinding local:BackgroundImages.PressedBackgroundImage}" Opacity="0"/> 
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

public static class BackgroundImages 
{ 
    public static readonly DependencyProperty NormalBackgroundImageProperty = 
     DependencyProperty.RegisterAttached("NormalBackgroundImage", typeof(ImageSource), typeof(BackgroundImages)); 

    public static readonly DependencyProperty MouseOverBackgroundImageProperty = 
     DependencyProperty.RegisterAttached("MouseOverBackgroundImage", typeof(ImageSource), typeof(BackgroundImages)); 

    public static readonly DependencyProperty PressedBackgroundImageProperty = 
     DependencyProperty.RegisterAttached("PressedBackgroundImage", typeof(ImageSource), typeof(BackgroundImages)); 

    public static ImageSource GetNormalBackgroundImage(DependencyObject obj) 
    { 
     return (ImageSource)obj.GetValue(NormalBackgroundImageProperty); 
    } 

    public static void SetNormalBackgroundImage(DependencyObject obj, ImageSource value) 
    { 
     obj.SetValue(NormalBackgroundImageProperty, value); 
    } 

    public static ImageSource GetMouseOverBackgroundImage(DependencyObject obj) 
    { 
     return (ImageSource)obj.GetValue(MouseOverBackgroundImageProperty); 
    } 

    public static void SetMouseOverBackgroundImage(DependencyObject obj, ImageSource value) 
    { 
     obj.SetValue(MouseOverBackgroundImageProperty, value); 
    } 

    public static ImageSource GetPressedBackgroundImage(DependencyObject obj) 
    { 
     return (ImageSource)obj.GetValue(PressedBackgroundImageProperty); 
    } 

    public static void SetPressedBackgroundImage(DependencyObject obj, ImageSource value) 
    { 
     obj.SetValue(PressedBackgroundImageProperty, value); 
    } 
}