Question

我正在使用ListBox在WPF中创建一个菜单。我需要能够访问ListBox的项模板中文本框的所有不透明度属性，以便在菜单进入时进行动画处理。这是我的ListBox代码：

<ListBox Name="testList" HorizontalContentAlignment="Stretch" Style="{StaticResource MenuListBoxStyle}" ItemContainerStyle="{StaticResource MenuListBoxItemStyle}" Margin="-30,0">
<ListBox.ItemTemplate>
    <DataTemplate>
        <Button Style="{StaticResource ButtonStyle1}" Height="42" Click="Button_Click" IsHitTestVisible="{Binding IsButton}" HorizontalContentAlignment="Left">
            <Grid Margin="30,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Path Grid.Column="0" Data="{Binding Icon}" Width="{Binding IconWidth}" Height="{Binding IconHeight}" Fill="White" Stretch="Uniform"
                        MaxWidth="22" MaxHeight="22" MinWidth="0" MinHeight="20"/>
                <TextBlock Grid.Column="1" Text="{Binding Title}" Foreground="White" FontSize="18" Margin="5,0,0,0" VerticalAlignment="Center"/>
            </Grid>
        </Button>
    </DataTemplate>
</ListBox.ItemTemplate>

如何访问TextBlock的Opacity属性来为其设置动画（使用Storyboard并在鼠标移动时更改）？ ListBox绑定到MenuItem可观察集合。我唯一能想到的是添加一个依赖属性并将其绑定到不透明度，但我不知道如何。谢谢你的帮助。

Answer 1

如果你想改变所有textBlocks的不透明度，我建议你在ListBox上设置StoryBoard：

<ListBox>
   <ListBox.Style>
      <Style TargetType="ListBox">
         <Style.Triggers>
             <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                   <Storyboard AutoReverse="True">
                      <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                       From="1" To="0" Duration="0:0:1"/>
                   </Storyboard>
                </BeginStoryboard>
             </EventTrigger>
         </Style.Triggers>
      </Style>
   </ListBox.Style>
</ListBox>

Answer 2

试试这个

                        <Path Grid.Column="0" Data="{Binding Icon}" Width="{Binding IconWidth}" Height="{Binding IconHeight}" Fill="White" Stretch="Uniform"
                    MaxWidth="22" MaxHeight="22" MinWidth="0" MinHeight="20"/>
                        <TextBlock Grid.Column="1" Text="{Binding Title}" Foreground="White" FontSize="18" Margin="5,0,0,0" VerticalAlignment="Center">
                            <TextBlock.Triggers>
                                <EventTrigger RoutedEvent="MouseEnter">
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="00:00:00.1" From="1" To="0.2"  Storyboard.TargetProperty="Opacity">
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                                <EventTrigger RoutedEvent="MouseLeave">
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="00:00:00.1" From="0.2" To="1"  Storyboard.TargetProperty="Opacity">
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </TextBlock.Triggers>
                        </TextBlock>
                    </Grid>
                </Button>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

另一种选择可以是

<ListBox Name="testList" HorizontalContentAlignment="Stretch" Style="{StaticResource MenuListBoxStyle}" ItemContainerStyle="{StaticResource MenuListBoxItemStyle}" Margin="-30,0">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Button Style="{StaticResource ButtonStyle1}" Height="42" Click="Button_Click" IsHitTestVisible="{Binding IsButton}" HorizontalContentAlignment="Left">
                    <Grid Margin="30,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="40"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Path Grid.Column="0" Data="{Binding Icon}" Width="{Binding IconWidth}" Height="{Binding IconHeight}" Fill="White" Stretch="Uniform"
                    MaxWidth="22" MaxHeight="22" MinWidth="0" MinHeight="20"/>
                        <TextBlock Grid.Column="1" Text="{Binding Title}" Foreground="White" FontSize="18" Margin="5,0,0,0" VerticalAlignment="Center">
                            <TextBlock.Style>
                                <Style TargetType="TextBlock">
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Opacity" Value="0.2"></Setter>
                                        </Trigger>
                                        <Trigger Property="IsMouseOver" Value="False">
                                            <Setter Property="Opacity" Value="1"></Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                    </Grid>
                </Button>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Answer 3

我想看看你的后续内容：当鼠标在列表框上移动时，所有上的只是文字按钮会发生变化。

您可以通过从IsMouseOver的{{1}}属性触发故事板，让自己的生活变得更简单。通过这样做，您可以避免ListBox棘手。

EventTrigger

如何在WPF中同时为所有ListBox项设置动画？

3 个答案: