使用Storyboard更改WPF中网格的高度

时间:2013-11-18 20:36:19

标签: wpf storyboard

我尝试使用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?

感谢您帮助我:)

1 个答案:

答案 0 :(得分:1)

请参考下面的代码,我使用 TranslateTransform 而不是MaxWidth,它为幻灯片场景制作了场景。来暗示这是StoryBoard应该在资源中定义,然后storyboard可以在doubleanimation中找到指定控件绑定。

<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>