YKSoftware - for WPF Developers

Extended Controls - TransitionControl

　画面遷移アニメーションをおこなうコントロールです。

ページ内リンク

基本的な使い方

基本的な使い方

　TransitionControl コントロールは、画面遷移アニメーションを実現するためのコントロールです。表示結果はTransition コントロールと同じですが、その内部構造の違いから、コンテンツの指定方法が異なります。

　TransitionControl コントロールは、Content プロパティに指定されたオブジェクトを画面に表示するコントロールで、 Content プロパティが変更されるタイミングで画面遷移アニメーションが実行されます。以下に TransitionControl コントロールを使用したサンプルコードを示します。

　以下に Transition コントロールを使用したサンプルコードを示します。

<YK:Window x:Class="Section4_13.Views.MainView"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:YK="clr-namespace:YKToolkit.Controls;assembly=YKToolkit.Controls"
           xmlns:vw="clr-namespace:Section4_13.Views"
           xmlns:vm="clr-namespace:Section4_13.ViewModels"
           Title="MainView" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="24" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <ComboBox x:Name="ScreenSelector" SelectedIndex="0">
            <ComboBox.ItemsSource>
                <x:Array Type="{x:Type UserControl}">
                    <vw:Page1View>
                        <vw:Page1View.DataContext>
                            <vm:Page1ViewModel />
                        </vw:Page1View.DataContext>
                    </vw:Page1View>
                    <vw:Page2View>
                        <vw:Page2View.DataContext>
                            <vm:Page2ViewModel />
                        </vw:Page2View.DataContext>
                    </vw:Page2View>
                    <vw:Page3View>
                        <vw:Page3View.DataContext>
                            <vm:Page3ViewModel />
                        </vw:Page3View.DataContext>
                    </vw:Page3View>
                </x:Array>
            </ComboBox.ItemsSource>
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" />
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

        <Border Grid.Row="1">
            <YK:TransitionControl Content="{Binding SelectedItem, ElementName=ScreenSelector}" />
        </Border>
    </Grid>
</YK:Window>

Code 1 : TransitionControl コントロールのサンプルコード

サンプルコードでは、ComboBox で TrnsitionControl コントロールの Content プロパティに対するオブジェクトを指定させています。 TransitionControl コントロールでは、Content にインスタンスを指定しないといけないため、ComboBox のアイテムにはオブジェクトインスタンスを並べています。