【Material Design Toolkit】 Drawer

 Drawerは画面(正確にはDrawerHost)の上下左右からせり出してくるコントロールです。(メニュー表示等でよく見かけると思います。)
 DrawerのOpen、Close用のコマンドも用意されているのでかなり簡単に扱うことができます。
<materialDesign:DrawerHost Margin="10" BorderThickness="2" BorderBrush="Black">
    <materialDesign:DrawerHost.LeftDrawerContent>
        <StackPanel>
            <TextBlock Text="Left Drawer"/>
            <Button Content="閉じる" Style="{DynamicResource MaterialDesignFlatButton}"
                    Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
                    CommandParameter="{x:Static Dock.Left}"/>
            <Button Content="全て閉じる" Style="{DynamicResource MaterialDesignFlatButton}"
                    Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"/>
        </StackPanel>
    </materialDesign:DrawerHost.LeftDrawerContent>
    <materialDesign:DrawerHost.TopDrawerContent>
        <StackPanel>
            <TextBlock Text="Top Drawer"/>
            <Button Content="閉じる" Style="{DynamicResource MaterialDesignFlatButton}"
                    Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
                    CommandParameter="{x:Static Dock.Top}"/>
            <Button Content="全て閉じる" Style="{DynamicResource MaterialDesignFlatButton}"
                    Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"/>
        </StackPanel>
    </materialDesign:DrawerHost.TopDrawerContent>
    <materialDesign:DrawerHost.RightDrawerContent>
        <StackPanel>
            <TextBlock Text="Right Drawer"/>
            <Button Content="閉じる" Style="{DynamicResource MaterialDesignFlatButton}"
                    Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
                    CommandParameter="{x:Static Dock.Right}"/>
            <Button Content="全て閉じる" Style="{DynamicResource MaterialDesignFlatButton}"
                    Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"/>
        </StackPanel>
    </materialDesign:DrawerHost.RightDrawerContent>
    <materialDesign:DrawerHost.BottomDrawerContent>
        <StackPanel>
            <TextBlock Text="Bottom Drawer"/>
            <Button Content="閉じる" Style="{DynamicResource MaterialDesignFlatButton}"
                    Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
                    CommandParameter="{x:Static Dock.Bottom}"/>
            <Button Content="全て閉じる" Style="{DynamicResource MaterialDesignFlatButton}"
                    Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"/>
        </StackPanel>
    </materialDesign:DrawerHost.BottomDrawerContent>

    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Button Grid.Row="1" Grid.Column="0"
                Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                CommandParameter="{x:Static Dock.Left}">
            <materialDesign:PackIcon Kind="ArrowLeft"/>
        </Button>
        <Button Grid.Row="0" Grid.Column="1"
                Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                CommandParameter="{x:Static Dock.Top}">
            <materialDesign:PackIcon Kind="ArrowUp"/>
        </Button>
        <Button Grid.Row="1" Grid.Column="2"
                Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                CommandParameter="{x:Static Dock.Right}">
            <materialDesign:PackIcon Kind="ArrowRight"/>
        </Button>
        <Button Grid.Row="2" Grid.Column="1"
                Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                CommandParameter="{x:Static Dock.Bottom}">
            <materialDesign:PackIcon Kind="ArrowDown"/>
        </Button>
        <Button Grid.Row="1" Grid.Column="1"
                Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}">
            <materialDesign:PackIcon Kind="ArrowAll"/>
        </Button>
    </Grid>
</materialDesign:DrawerHost>
 これを実行すると以下の様になります。
MaterialDesign Drawer
 Drawerを使用するためにはDrawerHostを使用します。
 DrawerHost領域の上下左右にDrawerが表示されます。(大抵の場合はDrawerHostがルート要素になると思います。)
 表示するDrawerはDrawerHostのXxxDrawerContentに定義します。
 例えば、左側Drawerを表示させたい場合はDrawerHost.LeftDrawerContentに表示させたい内容を定義します。
 サンプルコードでは上下左右のDrawerすべてを定義しています。
 
 画面中央のボタンを押すと対応するDrawerが表示されるようになっています。
 Drawerの表示はmaterialDesign:DrawerHost.OpenDrawerCommandを利用します。
 特定のDrawerを表示したい場合はCommandParameterにDock.Xxxを指定します。(Xxxは表示する方向)
 CommandParameterを指定しない場合は定義されているDrawerが全て表示されます。

 Drawerの表示中はDrawer以外の領域はグレー表示され、この部分をクリックするとDrawerが閉じられます。
 ボタンを押す等のアクションでDrawerを閉じたい場合はmaterialDesign:DrawerHost.CloseDrawerCommandを使用します。
 OpenDrawerCommandと同様にCommandParameterで閉じるDrawerを指定します。
 CommandParameterを指定しない場合は表示されている全Drawerを閉じます。
スポンサーサイト

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

コメントの投稿

非公開コメント

カレンダー
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