c# - 如何在WPF的情节提要动画中将宽度值作为百分比
问题描述
我想用故事板做一个抽屉。基础网格中有 2 个子网格。一个是“MenuGrid”,另一个是“ContentGrid”。
所以我写了一个这样的故事板(这是一个调整'MenuGrid'宽度的故事板。):
<Window.Resources>
<Storyboard x:Key="MenuOpen">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width"
Storyboard.TargetName="MenuGrid">
<EasingDoubleKeyFrame KeyTime="0" Value="60"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="300"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MenuClose" >
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width"
Storyboard.TargetName="MenuGrid">
<EasingDoubleKeyFrame KeyTime="0" Value="300"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
<BeginStoryboard Storyboard="{StaticResource MenuOpen}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
<BeginStoryboard Storyboard="{StaticResource MenuClose}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Width="300" x:Name="MenuGrid" Grid.Column="0">
<StackPanel>
<Button x:Name="ButtonCloseMenu" Width="60" Height="60" VerticalAlignment="Top" HorizontalAlignment="Right">
</Button>
<Button x:Name="ButtonOpenMenu" Width="60" Height="60" VerticalAlignment="Top" HorizontalAlignment="left" >
</Button>
</StackPanel>
</Grid>
<Grid x:Name="ContentGrid" Grid.Column="1">
</Grid>
</Grid>
每次我按下某个按钮时,它都会很好地工作。但是,当 MenuGrid 的宽度减小时,我希望 ContentGrid 的宽度也增加。
在 EasingDoubleKeyFrame KeyTime="0" Value="300" 中,有没有办法将“值”表示为百分比或比率而不是 int 值?
解决方案
推荐阅读
- mysql - 奇怪的 MySQL 错误 #1242 - 子查询返回多于 1 行
- azure-devops - 如果发布失败,则 CI 管道失败
- c++ - “const char *”类型的参数与“char”类型的参数不兼容
- haskell - 如何避免 MaybeT 中的提升以及为什么最终验证无效?
- swift - 如何为@ObservedObject 的更改设置动画?
- java - 如何在 Windows 上的 java 中使用 Firebase ML-Kit 文本识别
- c# - 如何在更新功能中将新分数添加到旧分数
- python-3.x - 如何在 django 项目中安装 swagger_client
- javascript - CSS 动画不适用于所有 React 组件
- android - 将日期转换为时间戳并将其存储在 SQLite 中后如何搜索特定日期