C# WPF 中 DataTrigger 和 MultiDataTrigger 中的进入和退出动作动画问题

问题描述 投票：0回答：1

我想达到以下目标： 如果 ShowGrid = false，则 Border.Padding = "0 0 0 0"，否则 Border.Padding = "0 0 0 40" 如果 ShowGrid = true 且 IsMouseOver = true，则 Border.Padding = "0 0 0 0" 如果 ShowGrid = true 且 IsMouseOver = false，则 Border.Padding = "0 0 0 40"

动画说明： 如果不显示网格，我们通过在 0.25 秒内逐渐将 Padding 减少到 0 来显示 Border 的内容。这样一来，在grid不显示的情况下，我们总能看到Border的内容。但是，如果出现网格，我们需要在0.25秒内将Padding增加到“0 0 0 40”，即显示网格，看不到Border的内容。 如果显示网格，当鼠标悬停在其区域上时，我们应该通过将 Padding 减少到 0 来查看其内容，当 IsMouseOver = false 时，我们通过将 Padding 增加到“0 0 0 40”来再次隐藏它。

问题描述： 如果在没有 ThicknessAnimation 的情况下使用代码，则一切正常 - 如果 ShowGrid = false，则始终显示 Border 的内容并且不响应鼠标移动，如果 ShowGrid = true，则仅当鼠标移动时显示 Border 的内容在边界上空盘旋。 如果代码与 ThicknessAnimation 一起使用，则行为会根据触发器的顺序发生变化。 第一种行为，其中DataTrigger顺序在前：如果ShowGrid = false，则不显示Border的内容，但如果ShowGrid = true，则仅当鼠标悬停在Border上时才显示Border的内容。也就是说，MultiDataTrigger 起作用了。 第二种行为，MultiDataTrigger顺序在前：如果ShowGrid = true，悬停在Border上时不显示Border的内容，但如果ShowGrid = false，则显示Border的内容。也就是说，DataTrigger 起作用了。

这是一个没有动画的全功能参考：

<Border.Style>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="Padding" Value="0 0 0 40" />
                    <Style.Triggers>

                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}"
                                           Value="True" />
                                <Condition Binding="{Binding ShowGrid}" Value="True" />
                            </MultiDataTrigger.Conditions>
                            <MultiDataTrigger.Setters>
                                <Setter Property="Padding" Value="0" />
                            </MultiDataTrigger.Setters>
                        </MultiDataTrigger>

                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}"
                                           Value="False" />
                                <Condition Binding="{Binding ShowGrid}" Value="True" />
                            </MultiDataTrigger.Conditions>
                            <MultiDataTrigger.Setters>
                                <Setter Property="Padding" Value="0 0 0 40" />
                            </MultiDataTrigger.Setters>
                        </MultiDataTrigger>

                        <DataTrigger Binding="{Binding ShowGrid}" Value="False">
                            <Setter Property="Padding" Value="0" />
                        </DataTrigger>

                    </Style.Triggers>
                </Style>
            </Border.Style>

这就是我正在尝试做的，据我所知，进入和退出操作存在问题：

<Border.Style>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="Padding" Value="0 0 0 40" />
                    <Style.Triggers>
                        
                        <DataTrigger Binding="{Binding ShowGrid}" Value="False">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Padding" To="0 0 0 0"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Padding" To="0 0 0 40"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>

                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}"
                                           Value="True" />
                                <Condition Binding="{Binding ShowGrid}" Value="True" />
                            </MultiDataTrigger.Conditions>
                            <MultiDataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Padding" To="0"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.EnterActions>
                            <MultiDataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Padding" To="0 0 0 40"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.ExitActions>
                        </MultiDataTrigger>

                       

                    </Style.Triggers>
                </Style>
            </Border.Style>

没有动画的行为演示 动画行为演示

非常感谢您的帮助！

MainWindow.xaml

    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="35" />
            <RowDefinition Height="20" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button Content="{Binding ButtonMessage, Mode=OneWay}" Command="{Binding ChangeShowGrid}" />
        <Border Grid.Row="1" HorizontalAlignment="Stretch" Background="Transparent" Padding="0 0 0 40" >
            <ItemsControl>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.Items>
                    <TextBlock Text="Hello, world!" Foreground="Red" />
                    <TextBlock Text="Good bye, world!" Foreground="Red" />
                </ItemsControl.Items>
            </ItemsControl>
            <Border.Style>
                <Style TargetType="{x:Type Border}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ShowGrid}" Value="False">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Padding" To="0 0 0 0" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Padding" To="0 0 0 40" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>

                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True" />
                                <Condition Binding="{Binding ShowGrid}" Value="True" />
                            </MultiDataTrigger.Conditions>
                            <MultiDataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Padding" To="0" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.EnterActions>
                            <MultiDataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Padding" To="0 0 0 40" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.ExitActions>
                        </MultiDataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
    </Grid>

MainWindowViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

public class MainWindowViewModel : ObservableObject
{
    private bool _showGrid;

    public MainWindowViewModel()
    {
        ChangeShowGrid = new RelayCommand(() => ShowGrid = !ShowGrid);
    }

    public string ButtonMessage => ShowGrid ? "Hide Grid" : "Show Grid";

    public bool ShowGrid
    {
        get => _showGrid;
        set
        {
            if (_showGrid == value) return;
            _showGrid = value;
            OnPropertyChanged();
            OnPropertyChanged(nameof(ButtonMessage));
        }
    }


    public RelayCommand ChangeShowGrid { get; }
}
c# .net wpf data-binding wpf-animation
1个回答
0
投票

我对属性和消息的命名有点困惑，但我认为你可以通过设置

FillBehavior
来修复动画。

<Style TargetType="{x:Type Border}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding ShowGrid}" Value="False">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ThicknessAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Padding" To="0 0 0 0"
                                            FillBehavior="HoldEnd"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ThicknessAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Padding" To="0 0 0 40"
                                            FillBehavior="Stop"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions>
        </DataTrigger>

        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding ShowGrid}" Value="True"/>
                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True"/>
            </MultiDataTrigger.Conditions>
            <MultiDataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ThicknessAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Padding" To="0"
                                            FillBehavior="HoldEnd"/>
                    </Storyboard>
                </BeginStoryboard>
            </MultiDataTrigger.EnterActions>
            <MultiDataTrigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ThicknessAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Padding" To="0 0 0 40"
                                            FillBehavior="Stop"/>
                    </Storyboard>
                </BeginStoryboard>
            </MultiDataTrigger.ExitActions>
        </MultiDataTrigger>
    </Style.Triggers>
</Style>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.