WPFのトリガーは、私がここにHamburgerMenuを開発しようとしているそのプロパティ

Question

を変更する制御を認識しなかったメニュースタイルです：

<Style TargetType="local:HamburgerMenu"> 
    <Style.Resources> 
     <!-- Fill Brushes --> 
     <SolidColorBrush x:Key="DarkBrush" Color="#40000000" /> 

    </Style.Resources> 
    <Setter Property="Width" Value="50"/> 
    <Setter Property="Visibility" Value="Visible"/> 
    <Setter Property="IsOpen" Value="False"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="local:HamburgerMenu">     
       <Grid x:Name="mainGrid" Background="{TemplateBinding Background}"> 
        <ToggleButton x:Name="menuIcon" HorizontalAlignment="Left" VerticalAlignment="Top" Height="40" Width="50" IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:HamburgerMenu}}, Path=IsOpen}"> 
         <Path x:Name="path" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" Width="30" Fill="{TemplateBinding MenuIconColor}" Data="M2,15.5L22,15.5 22,17.5 2,17.5 2,15.5z M2,10.5L22,10.5 22,12.5 2,12.5 2,10.5z M2,5.5L22,5.5 22,7.5 2,7.5 2,5.5z"/>       
        </ToggleButton>       
        <ListBox ItemsSource="{TemplateBinding Content}" HorizontalAlignment="Left" Margin="0,40,0,0" VerticalAlignment="Top" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedIndex="0"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
     <Trigger Property="IsOpen" Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation 
            Storyboard.TargetProperty="Width" 
            To="300" 
            Duration="0:0:0.3" AccelerationRatio="0.1" DecelerationRatio="0.9"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation 
            Storyboard.TargetProperty="Width" 
            To="50" 
            Duration="0:0:0.2"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.ExitActions> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

今、私の質問は、私はこのコードが動作しないトグルボタン にマウスオーバーをトリガすることができる方法であるbecuase TargetName = "パス"は認識されません！ ：

<ToggleButton.Triggers > 
          <Trigger Property="IsMouseOver" Value="true"> 
           <Setter TargetName="path" Property="Fill" Value="{StaticResource DarkBrush}" /> 
          </Trigger> 
         </ToggleButton.Triggers> 

、この溶液作品ではなく、完全にマウスがメニューのどこにでもオーバーのときToogleButtonの色が変化しますので、それは、メニューのマウスオーバーだけでなくToogleButtonを誘発するので：

<ControlTemplate.Triggers> 
       <Trigger Property="IsMouseOver" Value="true"> 
        <Setter TargetName="path" Property="Fill" Value="{StaticResource DarkBrush}" /> 
       </Trigger> 
       </ControlTemplate.Triggers> 

Answer 1

は、あなたが使用して、そのTemplateを設定することができますそのdefault template。例：

<ToggleButton x:Name="menuIcon" HorizontalAlignment="Left" VerticalAlignment="Top" Height="40" Width="50" > 
    <ToggleButton.Template> 
     <ControlTemplate TargetType="ToggleButton"> 
      <Grid> 
       <Border x:Name="Background" CornerRadius="3" Background="White" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         BorderBrush="{TemplateBinding BorderBrush}"> 
        <Grid Background="{TemplateBinding Background}" Margin="1"> 
         <Border Opacity="0" x:Name="BackgroundAnimation" Background="#FF448DCA" /> 
         <Rectangle x:Name="BackgroundGradient" > 
          <Rectangle.Fill> 
           <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1"> 
            <GradientStop Color="#FFFFFFFF" Offset="0" /> 
            <GradientStop Color="#F9FFFFFF" Offset="0.375" /> 
            <GradientStop Color="#E5FFFFFF" Offset="0.625" /> 
            <GradientStop Color="#C6FFFFFF" Offset="1" /> 
           </LinearGradientBrush> 
          </Rectangle.Fill> 
         </Rectangle> 
        </Grid> 
       </Border> 
       <Path x:Name="path" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" Width="30" 
      Data="M2,15.5L22,15.5 22,17.5 2,17.5 2,15.5z M2,10.5L22,10.5 22,12.5 2,12.5 2,10.5z M2,5.5L22,5.5 22,7.5 2,7.5 2,5.5z"/> 
       <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" /> 
       <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" /> 
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsMouseOver" Value="true"> 
        <Setter TargetName="path" Property="Fill" Value="Red" /> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </ToggleButton.Template> 
</ToggleButton> 

その他の変更が必要な場合があります。それはあなたがToggleButtonのForegroundプロパティにPathのFillプロパティをバインドして、マウスオーバーで別のBrushにForegroundプロパティを設定しますToggleButtonにStyleを適用することができ

Answer 2

に役立ちます願っています。

これは動作するはずです：

<ControlTemplate TargetType="local:HamburgerMenu"> 
    <Grid x:Name="mainGrid" Background="{TemplateBinding Background}"> 
     <ToggleButton x:Name="menuIcon" HorizontalAlignment="Left" VerticalAlignment="Top" Height="40" Width="50" 
              IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:HamburgerMenu}}, Path=IsOpen}"> 
      <ToggleButton.Style> 
       <Style TargetType="ToggleButton" BasedOn="{StaticResource {x:Type ToggleButton}}"> 
        <Setter Property="Foreground" Value="{Binding MenuIconColor, RelativeSource={RelativeSource AncestorType=local:HamburgerMenu}}" /> 
        <Style.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter Property="Foreground" Value="{StaticResource DarkBrush}" /> 
         </Trigger> 
        </Style.Triggers> 
       </Style> 
      </ToggleButton.Style> 
      <Path x:Name="path" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" Width="30" 
             Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ToggleButton}}" 
             Data="M2,15.5L22,15.5 22,17.5 2,17.5 2,15.5z M2,10.5L22,10.5 22,12.5 2,12.5 2,10.5z M2,5.5L22,5.5 22,7.5 2,7.5 2,5.5z"/> 
     </ToggleButton> 
     <ListBox ItemsSource="{TemplateBinding Content}" HorizontalAlignment="Left" Margin="0,40,0,0" VerticalAlignment="Top" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedIndex="0"/> 
    </Grid> 
</ControlTemplate>