FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【Material Design Toolkit】 Expander

 Material Design ToolkitのExpanderのスタイルはMaterialDesignExpanderという名前のスタイルが1つあるだけです。
 デフォルトスタイルにMaterialDesignExpanderが指定されているためStyleを指定しなくても使用できます。
<StackPanel>
    <Expander Header="Up" ExpandDirection="Up">
        <StackPanel>
            <TextBlock Text="ExpandDirection:Up1"/>
            <TextBlock Text="ExpandDirection:Up2"/>
            <TextBlock Text="ExpandDirection:Up3"/>
        </StackPanel>
    </Expander>

    <StackPanel Orientation="Horizontal">
        <Expander ExpandDirection="Left">
            <Expander.Header>
                <TextBlock Text="Left" RenderTransformOrigin="0.5, 0.5">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="90" />
                    </TextBlock.LayoutTransform>
                </TextBlock>
            </Expander.Header>
            <StackPanel>
                <TextBlock Text="ExpandDirection:Left1"/>
                <TextBlock Text="ExpandDirection:Left2"/>
                <TextBlock Text="ExpandDirection:Left3"/>
            </StackPanel>
        </Expander>

        <Expander ExpandDirection="Right">
            <Expander.Header>
                <TextBlock Text="Right" RenderTransformOrigin="0.5, 0.5">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="90" />
                    </TextBlock.LayoutTransform>
                </TextBlock>
            </Expander.Header>
            <StackPanel>
                <TextBlock Text="ExpandDirection:Right1"/>
                <TextBlock Text="ExpandDirection:Right2"/>
                <TextBlock Text="ExpandDirection:Right3"/>
            </StackPanel>
        </Expander>

    </StackPanel>

    <Expander Header="Down">
        <StackPanel>
            <TextBlock Text="ExpandDirection:Down1"/>
            <TextBlock Text="ExpandDirection:Down2"/>
            <TextBlock Text="ExpandDirection:Down3"/>
        </StackPanel>
    </Expander>
</StackPanel>
MaterialDesignExpander.png
 画像左側がExpanderを閉じている場合で右側が開いている場合です。
 
スポンサーサイト

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

コメントの投稿

非公開コメント

カレンダー
09 | 2018/10 | 11
- 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 31 - - -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
11  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
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。