im试图滑出并在带有按钮的菜单栏中单击WPF

Question

这是我在做什么我有一个Buttons.xaml样式文件，用于设置菜单按钮的样式]

    <!-- Menu button -->
    <Style x:Key="MenuButton" TargetType="{x:Type Button}">

        <Setter Property="Background" Value="{x:Null}" />
        <Setter Property="BorderBrush" Value="{x:Null}" />
        <Setter Property="Height" Value="20" />
        <Setter Property="Width" Value="50" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="IsHitTestVisible" Value="True" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="border">

                        <Grid  VerticalAlignment="{TemplateBinding VerticalAlignment}" 
                              HorizontalAlignment="{TemplateBinding HorizontalAlignment}">

                            <Rectangle x:Name="rectangle" Width="20" Height="2" Fill="{StaticResource DarkGrayBrush}" Margin="0 0 0 0" HorizontalAlignment="Center" VerticalAlignment="Top" RenderTransformOrigin="-0, 0.5" />
                            <Rectangle x:Name="rectangle1" Width="20" Height="2" Fill="{StaticResource DarkGrayBrush}" Margin="0 5 0 0" HorizontalAlignment="Center" VerticalAlignment="Top" RenderTransformOrigin="-0, 0.5" />
                            <Rectangle x:Name="rectangle2" Width="20" Height="2" Fill="{StaticResource DarkGrayBrush}" Margin="0 10 0 0" HorizontalAlignment="Center" VerticalAlignment="Top" RenderTransformOrigin="-0, 0.5" />


                            <ContentPresenter  />

                        </Grid>


                    </Border>


                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource FaintWhiteBrush}"/>
                        </Trigger>

                        <EventTrigger RoutedEvent="Button.Click" SourceName="menuButton">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="gridMenu" Storyboard.TargetProperty="Width" From="0" To="100" Duration="0:0:0.3" />
                                </Storyboard>
                            </BeginStoryboard>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="gridMenu" Storyboard.TargetProperty="Width" From="100" To="0" Duration="0:0:0.3" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>

这是我的usercontrol视图文件菜单按钮本身带有样式和源名称，该样式和源名称应为我的样式，当单击此按钮并滑出网格时，应该由事件触发器找到但找不到它

    <Grid>


        <!-- Menu button -->
        <Button x:Name="menuButton" Style="{StaticResource MenuButton}" />

        <!-- Menu bar -->       
        <Grid x:Name="gridMenu" Background="White" Width="0" HorizontalAlignment="Left">

        </Grid>

当我在上面运行此代码时，这是我收到的错误消息

InvalidOperationException: Cannot find element 'menuButton' targeted by this EventTrigger.

预先感谢

Answer 1

ControlTemplate（或DataTemplate）内的触发器只能引用该模板内的元素。模板不会“知道”其自身以外的任何内容，因此它只能与自己的部分进行交互。

如果您想让menuButton与gridMenu进行交互，则必须从知道这两种情况的上下文/范围中进行设置。在您的情况下，这将是两者都声明的UserControl。

如果要使用EventTrigger（仅使用XAML-没有代码）来实现类似的操作，则必须在直接包含这两个元素的ControlTemplate的Control中完成。像这样的东西：

        <Control>
            <Control.Template>
                <ControlTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>

                        <Button Name="menuButton"/>
                        <Grid Name="gridMenu" Background="Green" Grid.Row="1"/>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <EventTrigger SourceName="menuButton" RoutedEvent="Button.Click">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="gridMenu" Storyboard.TargetProperty="Width" From="0" To="100" Duration="0:0:0.3" />
                                </Storyboard>
                            </BeginStoryboard>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="gridMenu" Storyboard.TargetProperty="Width" From="100" To="0" Duration="0:0:0.3" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>                
            </Control.Template>
        </Control>

上面的示例显示了如何将触发器放置在包含两个元素的合并范围内，以便一个触发器可以影响另一个触发器。这不是最终的解决方案，但应该可以使您了解我的意思。

[请记住，我只是将您的EventTrigger复制/粘贴到了我的代码中。当您编写触发器时，触发器只会增长，然后立即收缩menuGrid，我猜这并不是您真正想要的。您可能希望它成长，保持开放，然后在以后收缩。您需要自己解决（或问另一个问题），但是假设您想再次单击menuButton以关闭menuGrid，请尝试使用ToggleButton而不是普通的ToggleButton并使用Button和EventTrigger事件中的Checked个。

[最后一个想法：由于要制作Unchecked，因此您可能需要考虑声明一个UserControl属性，例如Boolean，然后使用该属性来触发IsOpen动画（通过menuGrid），而不是直接点击DataTrigger触发它。这样，您就可以从容纳Button的Window中打开/关闭菜单。具有某种弹出式窗口的所有标准控件（例如UserControl和ComboBox）都具有这样的属性，可以告诉您当前状态并允许您从外部进行更改。