使用模板更改懸停/點擊按鈕背景圖片

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。您可以將這些附加屬性用於控件模板中單獨圖像控件的Source屬性，並修改當VisualState更改時圖像的不透明度。

一個例子樣式：

<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> 

在一個按鈕用於與設置附加屬性

：

<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"/> 

而這些附加屬性的最後的定義：

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); 
    } 
}