我想实现以下目标：如果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。填充=“0 0 0 40”
动画描述：如果网格未显示，我们将通过逐渐将“填充”减少到0/0来显示边框的内容。25秒。因此，我们总是可以看到边框的内容，而网格不显示。但是，如果网格出现，我们需要将“填充”增加到“0 0 0 40”超过0。25秒，这意味着网格显示，边框的内容不可见。如果网格显示，当鼠标悬停在其区域上时，我们应该通过将Padding减少到0来查看其内容，当IsMouseOver = false时，我们通过将Padding增加到“0 0 0 40”来再次隐藏它。
问题描述：如果代码没有使用ThicknessAnimation，则一切工作都很完美-如果ShowGrid = false，则始终显示边框的内容，并且不响应鼠标移动，如果ShowGrid = true，则仅当鼠标悬停在边框上时才会显示边框的内容。如果代码与ThicknessAnimation一起使用，则行为将根据触发器的顺序而更改。第一个行为，其中DataTrigger顺序为第一个：如果ShowGrid = false，则不显示边框的内容，但如果ShowGrid = true，则仅当鼠标悬停在边框上时才会显示边框的内容。也就是说，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>下面是我试图做的，据我所知，Enter & Exit Actions有一个问题：
<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>Demonstration of behavior without animationDemonstration of behavior with animation
我会很感激你的帮助！
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; }
}
1条答案
按热度按时间z31licg01#
我对属性和消息的命名有点困惑，但我认为你可以通过设置
FillBehavior来修复动画。