1

我正在尝试在页面上模拟这种效果OnLoad：

在此处输入图像描述

蓝色方块代表开始交易，红色方块代表动画结束。

在 WPF 中，那个正方形对我来说是 a ContentControl，我试过这个：

<Window x:Class="WPFShapes.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="802" Width="1557" WindowState="Maximized" WindowStyle="None" WindowStartupLocation="CenterScreen">
<Window.Resources>
    <!-- This effect makes the main container appear the first time smoothly -->
    <Style TargetType="Border" x:Key="animatedBorder">
        <Setter Property="Opacity" Value="0.0" />
        <Style.Triggers>
            <Trigger Property="Opacity" Value="0.0">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
                         From="0.0" To="1.0" Duration="0:0:0.4"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="900*" />
        <RowDefinition Height="150" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="460" />
        <ColumnDefinition Width="850*" />
        <ColumnDefinition Width="150" />
    </Grid.ColumnDefinitions>
<ContentControl Grid.Column="1" Grid.Row="1" Margin="150,0,150,0" Name="contentControl1" Width="Auto" Height="650" >
        <ContentControl.RenderTransform>
            <TranslateTransform X="0" Y="0"/>
        </ContentControl.RenderTransform>
        <Border Style="{StaticResource animatedBorder}"
            Name="movableBorder"
            Background="WhiteSmoke"
                >
            <Border.Effect>
                <DropShadowEffect 
                BlurRadius="10"
                Color="#877b77"
                Opacity="100"
                ShadowDepth="10"
                Direction="-50" />
            </Border.Effect>
        </Border>
    </ContentControl>
</Grid>

我的想法是，给ContentControl一个起始位置（蓝色方块），当它被加载时，将它从位置 1（蓝色方块）平滑地平移到位置 2（红色方块）。我试过了RenderTransform，但我想我找不到足够的信息，我觉得有点失落。

你可以看到我有一个ContentControl带有淡入淡出效果的边框。这种Border效果发生了，但我对如何使ContentControl我想要的出现有点迷茫。

到目前为止，我还没有任何 C# 代码。

关于我能做什么的任何想法？

4

1 回答 1

3

您可以使用为您的内容控件ThicknessAnimation设置动画Margin。

这是一个示例，它会在鼠标悬停时进行动画处理，但您将能够看到如何使用ThicknessAnimation

<Window x:Class="WpfApplication11.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="317.3" Width="337" x:Name="UI">
    <Grid>
        <Border BorderBrush="Red" BorderThickness="2" Margin="10,107,60,10">
            <Border.Style>
                <Style TargetType="Border">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Storyboard.TargetProperty="Margin" Duration="0:0:1.5" FillBehavior="HoldEnd" From="10,107,60,10" To="36,48,34,69" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
       </Border>
   </Grid>
</Window>
于 2013-01-18T09:34:51.477 回答