3

XAMl アニメーションで以下を有効にする方法に関するガイドライン/例を探しています。画像を表示する簡単なコントロールがあります。コントロールをクリックすると、画像を操作するためのボタンを持つ別のコントロールを表示する必要があります。

私はユーザーコントロール1を持っています:

別のユーザー コントロール 2 があります。

アニメーションを使用して、ユーザーがイメージ ビューアーをタップしたときに、左隅の ImageViewer の上に ImageControl を表示する必要があります。

入力してください

4

1 に答える 1

5

必要なのは、ユーザーが最初の UserControl を操作したときに UserControl 2 を表示するストーリーボードです。これにはいくつかの方法があります。たとえば、Opacity または Visibility を使用して 2 番目の UserControl を表示または非表示にすることができます。

これが私のサンプルです：

2 つの UserControls があるとします。

1 番目の UserControl (例: ImageViewer)

<UserControl
    x:Class="XamlAnimation.MyUserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid Background="Cyan">
    </Grid>
</UserControl>

2 番目の UserControl (たとえば、いくつかのボタンまたはコントロール)

<UserControl
    x:Class="XamlAnimation.MyUserControl2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <StackPanel Orientation="Horizontal" Background="Black" 
                HorizontalAlignment="Left"
                VerticalAlignment="Top">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
    </StackPanel>
</UserControl>

両方の UserControls を含むページは次のとおりです。

<Page
    x:Class="XamlAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">   
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <local:MyUserControl1 Tapped="MyUserControl1_Tapped"/>
        <local:MyUserControl2 x:Name="myUserControl2" Opacity="0"/>
    </Grid>
</Page>

2 番目の UserControl の不透明度をゼロに設定していることに注意してください。これにより、ページが読み込まれると 2 番目の UserControl が非表示になります。

ストーリーボードを作成する最も簡単な方法は、Blend を使用することです。まず、Blend でページを開き、新しい Storyboard リソースを作成します。

新しいストーリーボードを作成する

ストーリーボードを作成すると、Blend は記録モードになります。

次に、2 番目の UserControl を選択し、2 番目の UserControl をいつ表示するかを選択します。 ここに画像の説明を入力 ここに画像の説明を入力

その際、2 番目の UserControl の不透明度の値を 100% に変更できるため、ボタンが表示されます。必要に応じて、イージング機能を適用して、アニメーションを滑らかに見せることができます。

ここに画像の説明を入力 ここに画像の説明を入力

ここで、Blend を閉じて、Visual Studio でプロジェクトを再構築します。ページに Storyboard リソースが表示されます。

<Page
    x:Class="XamlAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Storyboard x:Name="ShowUserControl2">
            <DoubleAnimation Duration="0:0:2" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="myUserControl2" d:IsOptimized="True">
                <DoubleAnimation.EasingFunction>
                    <CircleEase EasingMode="EaseInOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Page.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <local:MyUserControl1 Tapped="MyUserControl1_Tapped"/>
        <local:MyUserControl2 x:Name="myUserControl2" Opacity="0"/>
    </Grid>
</Page>

最後に、次のようにコード ビハインドでストーリーボードを開始できます。

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    /// <summary>
    /// Invoked when this page is about to be displayed in a Frame.
    /// </summary>
    /// <param name="e">Event data that describes how this page was reached.  The Parameter
    /// property is typically used to configure the page.</param>
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
    }

    private void MyUserControl1_Tapped(object sender, TappedRoutedEventArgs e)
    {
        ShowUserControl2.Begin();
    }
}

プロジェクトを実行すると、最初の UserControl をタップして、アニメーションの動作を確認できるはずです。お役に立てれば！

于 2013-05-11T16:45:45.517 に答える