트리거를 사용한 WPF 버튼 동작

Question

ControlTemplate으로 정의 된 사용자 정의 모양의 Button이 있습니다.

이 포함되어 있으며 Path이 포함되어 있습니다. 나는 마우스 상태에 따라 Path.Opacity에 변경 내용을 추가하고 싶습니다 :

• 기본 - 이상 누르지 0.5
• 마우스 - 이상 누르면 1.0
• 마우스 - 0.5

첫 번째 경우 로컬 값 Path.Opacity을 0.5으로 설정하고 에 대해 Trigger을 추가하여 간단하게 다룹니다.

<Button x:Class="ImagingShop.Panosphere.Controls.PathButton" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="100" d:DesignWidth="100" 
     Name="pathButton"> 

    <Button.Template> 
     <ControlTemplate> 
      <Canvas Background="Transparent" Width="{TemplateBinding Width}" Height="{TemplateBinding Width}"> 
       <Canvas.Style> 
        <Style TargetType="Canvas"> 
         <Setter Property="Path.Opacity" Value="0.5"/> 
         <Style.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Path.Opacity" Value="1.0"/> 
          </Trigger> 
         </Style.Triggers> 
        </Style> 
       </Canvas.Style> 
       <Path Data="{Binding ElementName=pathButton, Path=PathData}" Stretch="Uniform" Fill="#FFFFFFFF" Width="{TemplateBinding Width}" Height="{TemplateBinding Width}"/> 
      </Canvas> 
     </ControlTemplate> 
    </Button.Template> 

    <Grid> 

    </Grid> 
</Button> 

그러나 세 번째 경우는 작동하지 않습니다. 나는 다음과 같은 트리거를 추가 한 :

<MultiTrigger> 
    <MultiTrigger.Conditions> 
     <Condition Property="IsMouseOver" Value="True"/> 
     <Condition Property="Button.IsPressed" Value="True"/> 
    </MultiTrigger.Conditions> 
    <Setter Property="Path.Opacity" Value="0.75"/> 
</MultiTrigger> 

그래서이 마우스 버튼을 누를 때 및 버튼 위에 놓을 Path.Opacity입니다 0.75에 설정해야합니다.

불투명도가 0.75 대신 0.5으로 변경되었으므로이 문제로 고민했습니다. 트리거는 적용 할 것 같지만에 트리거를 예상대로 왜 그냥 Button의 Opacity 사용하지 않는 ...

Answer 1

작동하고 있지 않는 Button의 Style 직접 귀하의 ControlTemplate이 Path하지만 아무것도하지 않습니다 어쨌든.

<Style TargetType="{x:Type local:PathButton}"> 
    <Setter Property="Opacity" 
      Value=".5" /> 
    <Setter Property="OverridesDefaultStyle" 
      Value="True" /> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type local:PathButton}"> 
     <Canvas Width="{TemplateBinding Width}" 
       Height="{TemplateBinding Width}" 
       Background="Transparent"> 
      <Path Width="{TemplateBinding Width}" 
       Height="{TemplateBinding Width}" 
       Data="{Binding ElementName=pathButton, 
           Path=PathData}" 
       Fill="#FFFFFFFF" 
       Opacity="{TemplateBinding Opacity}" 
       Stretch="Uniform" /> 
     </Canvas> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
    <Trigger Property="IsMouseOver" 
       Value="True"> 
     <Setter Property="Opacity" 
       Value="1" /> 
    </Trigger> 
    <Trigger Property="IsPressed" 
       Value="True"> 
     <Setter Property="Opacity" 
       Value=".75" /> 
    </Trigger> 
    </Style.Triggers> 
</Style> 

출력을 기대합니다.

업데이트 :

당신은 단지 ResourceDictionary에서 Style이 있고 코드 숨김 파일의 서브 클래스 선언을 할 수 있습니다. 그러면 하나의 xaml 파일 만 생성됩니다. 이 방법에서는 2 개의 xaml 파일이 남아 있지 않습니다.

PathData의 바인딩을 RelativeSource 바인딩으로 전환했습니다.

Here에서 샘플을 다운로드 할 수 있습니다. 열기 및 체크 아웃

또한 vsproj 파일을 편집하고 DependsOn 속성을 추가하여 파일을 사용자 지정 그룹으로 그룹화 할 수있는 추가 기능 NestIn을 사용했습니다. 이를 통해 UserControl과 Window이 코드 숨김 파일로 IDE를 찾는 모양과 마찬가지로 ResourceDictionary과 코드 숨김 클래스 파일을 하나의 엔터티 PathButton.xaml으로 그룹화 할 수 있습니다.