如何使用多数据触发器有条件地更改不同控件的不透明度

如何解决如何使用多数据触发器有条件地更改不同控件的不透明度

我无法理解 Datatriggers 和 Multidatatriggers 的功能。我假设它们有条件地用于 XAML 函数。我的问题如下：

我想使用 Multidatatrigger，这样当按下按钮时，Wrap 面板的不透明度从 1 减少到 0（大概使用 DoubleAnimation），但前提是它当前可见（Visibility is Visible）并且它的不透明度目前为 1。完成此操作后，我想要某种已完成的事件，以允许我将包装面板的可见性设置为在代码中折叠。

我能弄清楚如何做后者，但不能做前者。

这是我目前想到的：

<Image x:Name="btn" HorizontalAlignment="Center" Height="70" VerticalAlignment="Top" Width="225" Grid.Column="1" Source="pack://application:,/Images/btn.png">
<Image.Style>
    <Style TargetType="{x:Type Image}">
        <Style.Triggers>
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Path=Opacity}" Value="1" />
                    <Condition Binding="{Binding Path=IsVisible}" Value="True" />
                </MultiDataTrigger.Conditions>
                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard x:Name="wrap_panel_storyboard">
                        <Storyboard>
                            <DoubleAnimation 
                                Storyboard.TargetName="wrap_panel_home_scroller" 
                                Storyboard.TargetProperty="Opacity" 
                                Duration="0:0:1"
                                From="1" To="0"/>
                        </Storyboard>
                    </BeginStoryboard>
                </MultiDataTrigger.EnterActions>
                <MultiDataTrigger.ExitActions>
                    <RemoveStoryboard BeginStoryboardName="wrap_panel_storyboard"/>
                </MultiDataTrigger.ExitActions>
            </MultiDataTrigger>
        </Style.Triggers>
    </Style>
</Image.Style>
</Image>

<WrapPanel x:Name="wrap_panel" Grid.Row="1" HorizontalAlignment="Center">    
</WrapPanel>

现在我完全不知道“条件绑定”行是做什么的，也不知道如何将它们附加到我在换行面板中想要的变量。我不确定绑定路径是什么，或者为什么在那里使用 {}，因此我不知道如何让这个多数据触发器使用包装面板不透明度和可见性作为执行条件。

我希望得到一些指导或被告知如何实现！

编辑：如果我必须为要完成的任务编写伪代码，则如下所示：

On Image.Click:
 If Panel.Opacity = 1 And Panel.Visible = True Then
  RunAnimation
 End If

应用此样式的图像和正在评估的面板是两个单独的控件

下面是网格标记，其中保留了控件的位置。

        <Grid x:Name="grid_parent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid x:Name="grid_child"  Height="70" Margin="0" VerticalAlignment="Center" Width="1200" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*" />
                <ColumnDefinition Width="50*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
            </Grid.RowDefinitions>            

            <Image x:Name="btn" HorizontalAlignment="Center" Height="70" VerticalAlignment="Top" Width="225" Grid.Column="1" Source="pack://application:,/Images/btn.png">
                <Image.Style>
                    <Style TargetType="{x:Type Image}">
                        <Style.Triggers>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
                <Image.Triggers>
                </Image.Triggers>
            </Image>
          </Grid>
        <ScrollViewer x:Name="wrap_panel_scroller" Grid.Row="1" Foreground="{x:Null}">
            <WrapPanel x:Name="wrap_panel" Grid.Row="1" HorizontalAlignment="Center">                    
            </WrapPanel>
        </ScrollViewer>
    </Grid>

解决方法

如果您想根据应用 Image 的 Style 的属性值触发动画，您应该将 MultiDataTrigger 替换为 MultiTrigger：

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="Opacity" Value="1" />
        <Condition Property="IsVisible" Value="True" />
    </MultiTrigger.Conditions>
    <MultiTrigger.EnterActions>
        <BeginStoryboard x:Name="wrap_panel_storyboard">
            ...
        </BeginStoryboard>
    </MultiTrigger.EnterActions>
</MultiTrigger>

您还应该删除 ExitAction，因为您将属性设置为与触发的 1 不同的值。这意味着一旦动画开始并且 Opacity 属性已被设置为 1 到 0 之间的新值，退出操作就会触发。

如果你想根据另一个元素的属性值触发动画，你应该坚持使用MultiDataTrigger：

<MultiDataTrigger.Conditions>
    <Condition Binding="{Binding Opacity,ElementName=wrap_panel_storyboard}" Value="1" />
    <Condition Binding="{Binding IsVisible,ElementName=wrap_panel_storyboard}" Value="True" />
</MultiDataTrigger.Conditions>

这要求 WrapPanel 和 Image 驻留在同一个 namescope 中。

另请注意，应用于 WrapPanel 的动画应在应用于 Style 的 WrapPanel 中定义，而不是在应用于 Style 的 Image 中定义MeshBasicMaterial()。