FC2ブログ

スポンサーサイト

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

【Material Design Toolkit】 TabControl (Dragablz)

 Material Design Toolkitにはタブコントロールが定義されていません。
 Material Design Toolkitのデザインに合わせたタブコントロールが必要な場合はDragablzライブラリを使用します。
 DragablzライブラリはMaterial Design Toolkitと同じ作者が作成した高機能なタブコントロールでタブアイテムを別ウインドウとして切り離したり、タブアイテムを上下左右に並べて表示したりできます。
 Dragablzを使用する場合はNuGetでインストールが必要です。
 また、Dragablzの見た目をMaterial Design Toolkitと合わせるためにDragablz用の設定を行う必要があります。
<Application x:Class="MdDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
             StartupUri="Views\MainWindow.xaml"
             Startup="Application_Startup">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />

                <!-- Dragablz Material Design -->
                <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml"/>
            </ResourceDictionary.MergedDictionaries>

            <!-- Dragablz Material Design -->
            <Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}" />
        </ResourceDictionary>
    </Application.Resources>
</Application>
 Dragablzを使用する場合はApp.xamlでMaterial Design Toolkit用の設定と合わせてDragablz用設定を指定する必要があります。

<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:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
        xmlns:dockablz="clr-namespace:Dragablz.Dockablz;assembly=Dragablz"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="14"
        TextOptions.TextFormattingMode="Ideal" 
        TextOptions.TextRenderingMode="Auto"        
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{StaticResource MaterialDesignFont}"
        Title="MainWindow" Height="350" Width="525">
    
    <Window.DataContext>
        <vm:MainWindowViewModel/>
    </Window.DataContext>

    <dockablz:Layout>
        <dragablz:TabablzControl FixedHeaderCount="1" ConsolidateOrphanedItems="True">
            <dragablz:TabablzControl.InterTabController>
                <dragablz:InterTabController />
            </dragablz:TabablzControl.InterTabController>

            <TabItem Header="Item1">
                <TextBlock Text="Tab Item1" FontSize="32"/>
            </TabItem>
            <TabItem Header="Item2">
                <TextBlock Text="Tab Item2" FontSize="32"/>
            </TabItem>
            <TabItem Header="Item3">
                <TextBlock Text="Tab Item3" FontSize="32"/>
            </TabItem>
        </dragablz:TabablzControl>
    </dockablz:Layout>
</Window>
 このコードを実行すると以下の様になります。
Dragablz_TabControl.png
 タブアイテムを上下左右に並べて表示したい場合はdockablz:Layout内にdragablz:TabablzControlを設置し、dragablz:TabablzControl.InterTabControllerを設定する必要があります。
 こうすればタブアイテムをドラッグしてタブアイテムの配置を変更できるようになります。
Dragablz_タブアイテムレイアウト位置指定
 タブアイテムをドラッグすると上の図のようにレイアウト範囲の上下左右にグレーの半円が表示されます。
 ドラッグ中のタブアイテムをグレーの半円部分にドロップするとレイアウトが変更されます。
 以下の図はTabItem2をTabItem1の下に表示した後、TabItem3を右側に配置した図です。
Dragablz_タブアイテムレイアウト変更後
 タブアイテムのレイアウト機能が必要ない場合はdockablz:Layoutは必要ありません。

 タブアイテムを別ウインドウとして切り出す場合はdragablz:TabablzControlにdragablz:TabablzControl.InterTabControllerを設定します。
 タブアイテムをドラッグすることで別ウインドウとして切り離すことが可能です。
Dragablz_タブアイテム切り離し
 また、切り離したウインドウのタブをドラッグして元のウインドウのタブヘッダー上にドロップすることで元に戻すこともできます。
(ウインドウ上部をドラッグしている場合は戻せません。タブのヘッダーをドラッグしてください。)
 dragablz:TabablzControlのConsolidateOrphanedItemsプロパティをTrueにすると切り離したタブウインドウを閉じると元のウインドウに再び表示されるようになります。
 FixedHeaderCountプロパティを指定すると、指定した数のタブアイテムがドラッグできなくなります。(レイアウトの変更やウインドウ切り離し、タブアイテムの並べ替えができなくなります)

 以下の様にLayoutもTabablzControl.InterTabControllerも使用しなければシンプルなタブコントロールとして使用できます。
<dragablz:TabablzControl >
    <TabItem Header="Item1">
        <TextBlock Text="Tab Item1" FontSize="32"/>
    </TabItem>
    <TabItem Header="Item2">
        <TextBlock Text="Tab Item2" FontSize="32"/>
    </TabItem>
    <TabItem Header="Item3">
        <TextBlock Text="Tab Item3" FontSize="32"/>
    </TabItem>
</dragablz:TabablzControl>
 
スポンサーサイト

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

コメントの投稿

非公開コメント

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

全ての記事を表示する

カテゴリ
タグリスト

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