【Material Design Toolkit】 Transitioner

 Transitionerを使用するとパワーポイントのスライドショーの様にスライドを1枚づつ表示することができます。
 処理が複数のステップに分かれている時等に使用します。
<Window x:Class="MdDemo.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:MdDemo.ViewModels"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal" 
        TextOptions.TextRenderingMode="Auto"        
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{StaticResource MaterialDesignFont}"
        Title="MainWindow" Height="350" Width="525">
    
    <Window.DataContext>
        <vm:MainWindowViewModel/>
    </Window.DataContext>

    <materialDesign:Transitioner SelectedIndex="0">
        <materialDesign:TransitionerSlide
            OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn}">
            <StackPanel Background="AliceBlue">
                <TextBlock Text="スライド1" FontSize="64"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                    <Button Content="次へ" Width="100"
                            Command="{x:Static materialDesign:Transitioner.MoveNextCommand}"/>
                    <Button Content="最後へ" Width="100"
                            Command="{x:Static materialDesign:Transitioner.MoveLastCommand}"/>
                </StackPanel>
            </StackPanel>
        </materialDesign:TransitionerSlide>

        <materialDesign:TransitionerSlide
            OpeningEffect="{materialDesign:TransitionEffect Kind=SlideInFromLeft, Duration=0:0:2}">
            <StackPanel Background="LightSteelBlue">
                <TextBlock Text="スライド2" FontSize="64"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                    <Button Content="前へ" Width="100"
                            Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}"/>
                    <Button Content="次へ" Width="100"
                            Command="{x:Static materialDesign:Transitioner.MoveNextCommand}"/>
                </StackPanel>
            </StackPanel>
        </materialDesign:TransitionerSlide>

        <StackPanel Background="CornflowerBlue">
            <TextBlock Text="スライド3" FontSize="64"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Content="最初へ" Width="100"
                            Command="{x:Static materialDesign:Transitioner.MoveFirstCommand}"/>
            </StackPanel>
        </StackPanel>
    </materialDesign:Transitioner>
</Window>
 これを実行し、スライドを移動させると以下の様に表示されます。
Transitioner.png
 Transitioner領域にスライドが表示されます。
 SselectedIndexプロパティで最初に表示するスライドを指定しています。
 あとはTransitioner以下にスライドを表示順に定義していきます。
 TransitionerSlideを使用する場合はOpeningEffectでスライドを表示する際のエフェクトを指定できます。
 TransitionEffectにはExpandIn、FadeIn、None、SlideInFromBottom、SlideInFromLeft、SlideInFromRight、SlideInFromTopの7種類があります。
 また、Durationを指定することでスライド表示エフェクトの表示時間を変更することもできます。
 TransitionerSlideを使用いない場合(サンプルコードのスライド3)はエフェクトにはNoneが使用されます。

 スライドの移動はコマンドを使用します。
 スライド移動用コマンドは以下の4つが用意されています。
 materialDesign:Transitioner.MoveNextCommand : 次のスライドを表示する
 materialDesign:Transitioner.MovePreviousCommand : 前のスライドを表示する
 materialDesign:Transitioner.MoveFirstCommand : 最初のスライドを表示する
 materialDesign:Transitioner.MoveLastCommand : 最後のスライドを表示する
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

カレンダー
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09 
最新記事
リンク
最新コメント
検索フォーム
Amazon