1

ページでこの効果をシミュレートしようとしていOnLoadます:

ここに画像の説明を入力

青い四角はトランザクションの開始を表し、赤い四角はアニメーションの終わりを表します。

WPFでは、その四角は私にとってはaContentControlであり、これを試しました：

<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 に答える