Wpf觸發器無法識別控件以更改其屬性

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>

現在我的問題是我如何在ToggleButton上觸發MouseOver這個代碼不起作用因為TargetName =“path”無法識別!!! ：

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

這個解決方案有效但不完美，因為它觸發菜單的MouseOver而不僅僅是ToogleButton所以當鼠標在菜單的任何位置結束時，ToogleButton的顏色會發生變化：

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

Answer 1

您可以設置它的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應用於ToggleButton ，它將Foreground屬性設置為鼠標懸停在另一個Brush上。

這應該工作：

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