호버 위에 버튼 배경 이미지 변경/템플릿을 사용하여 클릭하십시오.

Question

호버/클릭 효과로 좀 더 화려하게 만들고 싶은 톤과 톤의 응용 프로그램이 있습니다. 나는 이것을 위해 스타일 템플릿을 사용할 수 있기를 바랬는데 각각의 버튼마다 트리거를 작성할 필요는 없지만이 단계에서 멈추지 않습니다. 어떻게이 문제 가야합니까

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

:

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

및 템플릿 파일 :

나는 당신이 코드 조각 여기 달성하기 위해 노력하고 무엇을의 일반적인 생각을 생각한다 ? 이 방법으로도 가능합니까? 아니면 수백만 트리거로 코드를 복잡하게해야합니까?

Answer 1

당신은, 에 MouseOver 및 프레스 (어쩌면 더) 정상 상태 의 배경 이미지 attached properties을 정의 할 수 있습니다. 컨트롤 템플릿의 별도 Image 컨트롤의 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); 
    } 
}