WPF觸發沒有認出控制來改變其屬性

Question

我試圖建立一個HamburgerMenu這裏是菜單樣式：

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

現在我的問題是如何能夠在切換按鈕 觸發鼠標懸停此代碼不能正常工作監守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> 

請注意，您可能還需要更改其他一些內容。希望它可以幫助

Answer 2

您可以在Path的Fill屬性綁定到ToggleButton的Foreground屬性，然後應用Style到在Foreground屬性設置爲另一個Brush鼠標的ToggleButton。

這應該工作：

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