首页 > 解决方案 > 如何在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 值?

标签: c#wpfxaml

解决方案


推荐阅读