wpf 弹性窗口

XAML


<Window Width="400" Height="250"    AllowsTransparency="True" Background="WhiteSmoke" RenderTransformOrigin="0.5 0.5" WindowStyle="None"
    >

    <Window.RenderTransform>
        <!--  1. 窗口缩放, 控制缩放系数,决定窗口弹性, 注意,窗口设置了 RenderTransformOrigin = .5, .5 , 这样方便居中缩放  -->
        <!--  1. x, y 轴缩放系数进行了绑定,这样只要控制一个值就可以等比例进行缩放窗口  -->
        <ScaleTransform x:Name="SizeScaleTransform" ScaleX="1" ScaleY="{Binding ElementName=SizeScaleTransform, Path=ScaleX}" />
    </Window.RenderTransform>

    <Window.Resources>

        <!--  2. 窗口载入动画, 在窗口的 loaded Trigger 中加载  -->
        <Storyboard x:Key="LoadStoryboard">
            <DoubleAnimation
                Storyboard.TargetName="SizeScaleTransform" Storyboard.TargetProperty="ScaleX" From="0.3" To="1"
                Duration="0:0:0.2">
                <DoubleAnimation.EasingFunction>
                    <ElasticEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>

        <!--  3. 窗口关闭动画, 在按钮的 PreviewMouseLeftButtonUp Trigger 中加载  -->
        <!--  3. 注意,在动画完成事件中, Close 窗口  -->
        <Storyboard x:Key="CloseStoryboard" Completed="CloseStoryboard_OnCompleted">
            <DoubleAnimation
                Storyboard.TargetName="SizeScaleTransform" Storyboard.TargetProperty="ScaleX" From="1" To="0"
                Duration="0:0:0.15">
                <DoubleAnimation.EasingFunction>
                    <ElasticEase EasingMode="EaseIn" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>

    </Window.Resources>

    <Window.Triggers>
        <!--  2. 窗口 loaded 触发器,  触发窗口载入动画  -->
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard Storyboard="{StaticResource LoadStoryboard}" />
        </EventTrigger>
    </Window.Triggers>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>

        <Button
            Grid.Row="2"
            HorizontalAlignment="Center" VerticalAlignment="Center"
            Content="确 定">
            <Button.Triggers>
                <!--  3. 绑定按钮的 PreviewMouseLeftButtonUp Trigger, 触发窗口关闭动画  -->
                <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
                    <BeginStoryboard Storyboard="{StaticResource CloseStoryboard}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>
上一篇
下一篇