如何为更改另一个控件宽度的控件编写样式？

Question

有没有办法为一个改变另一个控件宽度的控件编写Style？

<Style x:Key="SubMenuStyle" TargetType="Label">
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="FontFamily" Value="Arial"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="LightCyan"/>

    <Style.Triggers>
        <EventTrigger RoutedEvent="MouseLeftButtonDown">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Menu" Storyboard.TargetProperty="Width" To="0" Duration="0:0:.5"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Style.Triggers>
</Style>

此代码导致错误：

无法在样式设置器上设置 TargetName 属性

我知道我可以在下面编写代码并且它可以工作：

<Label Name="Owners" Margin="0,1,0,0" MouseLeftButtonDown="SubMenuClicked" Style="{StaticResource SubMenuStyle}">
    <Label.Triggers>
        <EventTrigger RoutedEvent="MouseLeftButtonDown">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Menu" Storyboard.TargetProperty="Width" To="0" Duration="0:0:.5"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Label.Triggers>
</Label>

但由于我在多个标签中使用此触发器，所以我想以一种样式编写一次。

这是我定义控件的代码：

<Border Name="Menu" Grid.Column="2" Grid.Row="1" Width="0" HorizontalAlignment="Right" BorderBrush="LightBlue" BorderThickness="2" CornerRadius="2" Background="LightCyan">
    <StackPanel Name="MenuPanel">
        <Button Style="{StaticResource MenuButtonsStyle}">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="ListsMenu" Storyboard.TargetProperty="Height" To="86" Duration="0:0:.6"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

        <StackPanel Name="ListsMenu" Height="0">
            <Label Name="Owners" Margin="0,1,0,0" MouseLeftButtonDown="SubMenuClicked" Style="{StaticResource SubMenuStyle}"/>
            <Label Name="Contacts" MouseLeftButtonDown="SubMenuClicked" Style="{StaticResource SubMenuStyle}"/>
            <Label Name="Groups" MouseLeftButtonDown="SubMenuClicked" Style="{StaticResource SubMenuStyle}"/>
        </StackPanel>
    </StackPanel>
</Border>

场景：有一个边框，它的默认宽度为零，它会在另一个可以正常工作的触发器中升至 165，我想在单击标签时再次将其动画为零，但我无法访问该宽度标签样式的边框

Answer 1

您声称您在多个标签中使用触发器，因此您可以像这样定义一次触发器

        <Storyboard x:Key="animation">
             <DoubleAnimation Storyboard.TargetName="ListsMenu" Storyboard.TargetProperty="Height" To="86" Duration="0:0:.6"/>
        </Storyboard>

以后需要的时候可以调用它

 <EventTrigger RoutedEvent="MouseEnter" >
                <BeginStoryboard Storyboard="{StaticResource animation}"/> 
            </EventTrigger>

但我有点困惑你想要获得什么。 正如所说，您无法访问样式，因为样式没有名称范围。如果它改变标签的宽度，你可以这样做

  <Style x:Key="style_button" TargetType="Button">
        <Style.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Width" To="300" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>

但它通过 StoryBoard.TargetName 调用另一个对象。

Answer 2

尝试：

 <EventTrigger RoutedEvent="MouseLeftButtonDown">
     <BeginStoryboard>
           <Storyboard>
               <DoubleAnimation Storyboard.Target="{Binding ElementName=Menu}"
                                Storyboard.TargetProperty="Width" To="0" Duration="0:0:.5"/>
           </Storyboard>
      </BeginStoryboard>
  </EventTrigger>

TargetName 仅在模板内有效。