Question

我正在努力实现与VS2012设置窗口相同的动画，以一种漂亮的动画方式自动调整和集中每个内容大小的变化。

问题是它不能完全由代码完成，因为我不知道最终的窗口大小（我依赖于SizeToContent =“WidthAndHeight”），但让它自己的SizeToContent =“WidthAndHeight”呢？不允许我为过渡设置动画

有什么办法吗？

Answer 1

我认为实现此目的的最简单方法是在窗口类中使用自定义视觉状态。我做了一个小测试项目，你可以在这里下载：https://dl.dropboxusercontent.com/u/14810011/ResizingWindow.zip

您需要Visual Studio 2012来执行它。

主窗口XAML如下所示：

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ResizingWindow"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    x:Name="Window" x:Class="ResizingWindow.MainWindow"
    Title="MainWindow" Width="350" Height="300" WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation="CenterScreen">
<Window.DataContext>
    <local:MainWindowViewModel />
</Window.DataContext>
  <Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="ExtendedStates">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.6">
                    <VisualTransition.GeneratedEasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </VisualTransition.GeneratedEasingFunction>
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Normal">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TextBlock">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="Window">
                        <EasingDoubleKeyFrame KeyTime="0" Value="300"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Extended">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="Window">
                        <EasingDoubleKeyFrame KeyTime="0" Value="400"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TextBlock">
                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.RowDefinitions>
        <RowDefinition Height="300"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>
    <Border Background="#FF6C6C6C">
        <Grid>
            <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="Hey, I here is some really cool content." VerticalAlignment="Top" FontSize="32" FontFamily="Segoe UI Light" TextAlignment="Center" Margin="0,50,0,0"/>
            <CheckBox Content="I want to see more" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,15" IsChecked="{Binding ShowAdditionalContent}">
                <i:Interaction.Behaviors>
                    <ei:DataStateBehavior Binding="{Binding ShowAdditionalContent}" Value="False" TrueState="Normal" FalseState="Extended"/>
                </i:Interaction.Behaviors>
            </CheckBox>
            <Button Content="&#xE221;" HorizontalAlignment="Right" VerticalAlignment="Top" FontFamily="Segoe UI Symbol" FontSize="21.333" Style="{DynamicResource ButtonStyle}" Margin="0,5,5,0" Click="CloseMainWindow"/>
        </Grid>
    </Border>
    <Border Grid.Row="1" Background="#FF383838">
        <TextBlock x:Name="TextBlock" TextWrapping="Wrap" Text="You can see this, when the check box is activated." FontFamily="Segoe UI Light" FontSize="18.667" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Silver"/>
    </Border>
  </Grid>
</Window>

您需要注意的方面如下：

主窗口由一个网格组成，默认情况下隐藏第二行。这是通过将窗口高度设置为300来实现的，而网格实际上使用400个逻辑单元。也可以在运行时动态计算这个高度，但是对于这个简单的例子，这不是必需的。
激活“扩展”视觉状态时，第二行变为可见。这实际上是使用复选框来完成的，该复选框更新了相应的视图模型以及响应它的附加DataStateBehavior（这是Blend SDK的一部分）。更改状态时，此行为可确保激活相应的可视状态，即取消选中复选框时为“正常”，选中时为“扩展”。
WindowStyle设置为None，ResizeMode设置为NoResize。这可确保窗口周围不显示边框。还可以选择将AllowTransparency设置为true，但我不建议这样做，因为这会对性能产生严重影响。请注意，默认的最小化，最大化/恢复和退出按钮也不会出现在此模式中。

如果您有其他问题，请随时询问。

VS2012设置像WPF窗口动画SizeToContent

1 个答案: