0

Silverlight で実装しようとしている非常に単純なシナリオのように見えるものがありますが、Silverlight/Blend 4 の信じられないほど強力なトランジション機能にもかかわらず、その方法がわかりません。

私はこれに要約するレイアウトを持っています:

<UserControl>
    <Grid>
        <StackPanel>
            <Button x:Name="Button1" />
            <Button x:Name="Button2" />
            <Button x:Name="Button3" />
            <Button x:Name="Button4" />
        </StackPanel>
        <Grid x:Name="Page1" />
        <Grid x:Name="Page2" />
        <Grid x:Name="Page3" />
        <Grid x:Name="Page4" />
    </Grid>
</UserControl>

最初は、4 つのページ グリッドがすべて非表示になっており、サイズが 0 になっていますが、対応するボタンをクリックすると、ページが拡大するアニメーションで表示されます。別のボタンをクリックすると、縮小アニメーションで前のページが消え、拡大アニメーションで別のページが表示されます。このように、ボタンを使用して 4 つのページすべてに移動できます。

私が読んだことから、これを行う「正しい」方法は、ユーザーコントロールで視覚的な状態を使用することです。そのため、Page1 から Page4 までの 4 つの状態を作成し、各状態に対して適切なページ グリッドを表示するように設定しました。次に、ボタンにコマンドを配置して、ユーザー コントロールの表示状態を変更します。これは問題なく機能し、ページを切り替えることができましたが、状態間のアニメーションを定義しようとしたときに問題が発生しました。

最初は、状態ごとに「To *」と「From *」のアニメーションを定義できると思っていました。したがって、状態 Page1 でボタンをクリックして状態 Page2 に移動すると、Page1 を非表示にする「From *」アニメーションが再生され、次に Page2 を表示する「To *」アニメーションが再生されます。しかし、これはうまくいきません。各状態に対して 'To *' および 'From *' アニメーションを定義した場合でも、Silverlight は 'To *' アニメーションのみを再生し、'From *' アニメーションを完全に無視します!

さらに悪いことに、この動作は、まったく意味がありませんが、Silverlight が動作するはずの方法のようです! つまり、各ページを縮小し、その場所で別のページを拡大したい場合、各状態から他の各状態への個別の遷移を定義する必要があります! 現在の 4 ページの場合、これは 12 の個別のトランジションを意味しますが、ページ数を増やしたい場合、この数は急増します。10 ページの場合、9*9 = 81 回のトランジションが必要です! 現在のページを縮小し、新しいページを拡大するためのすべて。

このような単純なシナリオと思われるものを処理するためのより良い方法がないとは信じられませんが、方法を説明しているようには見えません。ストーリーボードを変更する分離コードを使用して一緒にハックすることもできますが、Blend でページ グリッドを表示および編集できるようにしたいと考えています。

明らかな何かが欠けていると教えてください。

4

1 に答える 1

3

Blend では、[状態] タブで状態をクリックするだけで、状態の記録を開始し、状態がどのように見えるかを定義し、状態遷移の期間を設定できます。

個々の状態遷移順列を個別に変更したくない場合を除き、個々の状態遷移順列について心配する必要はありません。

状態が「線形」にアニメーション化できないプロパティを使用している場合 (Visibility の変更など)、FluidLayout ボタンを確認してください。

編集: 状態ごとに追加のストーリーボードを 1 つだけ使用して、記述した「完全に縮小してから拡大する」効果を作成できます。Any -> {State} 遷移で、現在の要素を拡大する前に BeginTime を遅延するように設定します。

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="CommandingLeakWithScrollbar.UserControl1"
d:DesignWidth="640" d:DesignHeight="480">

<Grid x:Name="LayoutRoot">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:1"/>
                <VisualTransition GeneratedDuration="0:0:1" To="Page1">
                    <Storyboard>
                        <DoubleAnimation BeginTime="0:0:1" Duration="0:0:1" To="640" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid1" d:IsOptimized="True" />
                        <DoubleAnimation BeginTime="0:0:1" Duration="0:0:1" To="480" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="grid1" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualTransition>
                <VisualTransition GeneratedDuration="0:0:1" To="Page2">
                    <Storyboard>
                        <DoubleAnimation BeginTime="0:0:1" Duration="0:0:1" To="640" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid2" d:IsOptimized="True" />
                        <DoubleAnimation BeginTime="0:0:1" Duration="0:0:1" To="480" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="grid2" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualTransition>
                <VisualTransition From="None" GeneratedDuration="0:0:1" To="Page1"/>
                <VisualTransition From="None" GeneratedDuration="0:0:1" To="Page2"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="None"/>
            <VisualState x:Name="Page1">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="640" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid1" d:IsOptimized="True" />
                    <DoubleAnimation Duration="0" To="480" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="grid1" d:IsOptimized="True" />
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Page2">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="640" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid2" d:IsOptimized="True"/>
                    <DoubleAnimation Duration="0" To="480" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="grid2" d:IsOptimized="True"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid x:Name="grid1"  Background="Beige" Width="40" Height="40" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Grid x:Name="grid2" HorizontalAlignment="Right" Width="40" Height="40" VerticalAlignment="Top" Background="Wheat" />
    <Grid HorizontalAlignment="Left" Width="40" Height="40" VerticalAlignment="Bottom" />
    <Grid HorizontalAlignment="Right" Width="40" Height="40" VerticalAlignment="Bottom"/>
    <StackPanel HorizontalAlignment="Center">
        <Button Content="Reset" >
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:GoToStateAction StateName="None"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Button Content="Page1" >
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:GoToStateAction StateName="Page1"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Button Content="Page2" >
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:GoToStateAction StateName="Page2"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </StackPanel>
</Grid>

于 2011-03-02T21:54:46.963 に答える