使用 Storyboard 在 WPF 中更改 Grid 的高度答案

【问题标题】：Changing height of Grid in WPF using Storyboard使用 Storyboard 在 WPF 中更改 Grid 的高度
【发布时间】：2013-11-18 20:36:19
【问题描述】：

我正在尝试使用 Storyboard 将 WPF 网格的高度从 0 更改为 Auto。我知道我不能不欺骗就做到这一点，所以我尝试使用情节提要中的数据绑定来更改 MaxHeight 值。但我不能让它工作（高度总是等于0）。这是我使用的代码：

两种视觉状态：

 <VisualState x:Name="SelectionMode">
      <Storyboard>
           <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CurrentToolGrid" Storyboard.TargetProperty="(FrameworkElement.MaxHeight)">
                <EasingDoubleKeyFrame KeyTime="0" Value="0" />                  
           </DoubleAnimationUsingKeyFrames> 
       </Storyboard>
 </VisualState>

 <VisualState x:Name="EditionMode">
      <Storyboard>
           <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CurrentToolGrid" Storyboard.TargetProperty="(FrameworkElement.MaxHeight)">
                <EasingDoubleKeyFrame KeyTime="0" Value="{Binding ElementName=CurrentToolGrid, Path=ActualHeight}" />               
           </DoubleAnimationUsingKeyFrames> 
       </Storyboard>
 </VisualState>

这是我的网格定义：

 <Grid x:Name="CurrentToolGrid" Background="#FFDEDEDE" Grid.Row="1" Height="Auto">
      [... some controls that extends the grid's height ...]
 </Grid>

为什么 CurrentToolGrid 的高度总是 0 ？

谢谢你帮助我:)

【问题讨论】：

我想你想在 Editing 模式时隐藏 ToolGrid，在 SelectionMode 时显示 ToolGrid，那么为什么不尝试将 ToolGrid 的 Visibility 属性设置在 Visible 和 Collapsed 之间呢？
因为我想让它向上滑动。

标签： wpf storyboard

【解决方案1】：

请参考以下代码，我使用 TranslateTransform 而不是 MaxWidth，它为 Slide 场景制作场景。key 表示这是 StoryBoard 应该在资源中定义，然后情节提要可以在双动画中找到绑定的指定控件。

<Window x:Class="SlideUpWPFTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        x:Name="Window"
        Title="MainWindow"
        Width="640"
        Height="480">
    <Window.Resources>
        <Storyboard x:Key="sb1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="grdContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <EasingDoubleKeyFrame KeyTime="0" Value="{Binding ElementName=grdContent, Path=ActualWidth}" />
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="sb2">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="grdContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="{Binding ElementName=grdContent, Path=ActualWidth}" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

    <Grid x:Name="LayoutRoot" RenderTransformOrigin="0.5,0.5">
        <Grid.RowDefinitions>
            <RowDefinition Height="35" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.RenderTransform>
            <TransformGroup>
                <ScaleTransform />
                <SkewTransform />
                <RotateTransform />
                <TranslateTransform />
            </TransformGroup>
        </Grid.RenderTransform>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="EditMode" Storyboard="{StaticResource sb1}" />
                <VisualState x:Name="SelectionMode" Storyboard="{StaticResource sb2}" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
            <Button Content="Enter Edit Mode">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <ei:GoToStateAction StateName="EditMode" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Button>
            <Button Content="Enter Selected Mode">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <ei:GoToStateAction StateName="SelectionMode" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Button>
        </StackPanel>

        <Grid x:Name="grdContent"
              Grid.Row="1"
              RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform />
                    <SkewTransform />
                    <RotateTransform />
                    <TranslateTransform />
                </TransformGroup>
            </Grid.RenderTransform>
            <!--  some content  -->
            <Rectangle Height="65" Fill="LightBlue" />
        </Grid>
    </Grid>
</Window>

【讨论】：