Question

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

enter image description here

蓝色方块表示开始的交易，红色方块表示动画的结尾。

在WPF中，这个方格对我来说是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＃代码。

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

Answer 1

您可以使用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>

如何使用ContentControl WPF动画移动

1 个答案: