WPF UI库- dragablz的简单使用（整合MaterialDesign）

0. 展示

 

1. dragablz的下载
        官网  ：官方网站，包括样式展示，使用方法，和MaterialDesign的整合
        github:  github
        Nuget:  Install-Package Dragablz -Version 0.0.3.203

2. 使用
    本次只介绍简单使用，详情请去官网查看
    
    1. 在app.xmal添加如下代码

 xmlns:dragablz ="clr-namespace:Dragablz;assembly=Dragablz"

 

 <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>

                <!--primary color-->
                <ResourceDictionary>
                    <!--include your primary palette-->
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.purple.xaml" />
                    </ResourceDictionary.MergedDictionaries>

                    <!--include three hues from primary dont rename-->
                    <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="{StaticResource Primary100}"/>
                    <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="{StaticResource Primary100Foreground}"/>

                    <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="{StaticResource Primary500}"/>
                    <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="{StaticResource Primary500Foreground}"/>

                    <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="{StaticResource Primary700}"/>
                    <SolidColorBrush x:Key="PrimaryHueDarkBForegroundBrush" Color="{StaticResource Primary700Foreground}"/>

                </ResourceDictionary>

                <!--second primary color-->
                <ResourceDictionary>
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.purple.xaml" />
                    </ResourceDictionary.MergedDictionaries>
                    <SolidColorBrush x:Key="SecondaryAccentBrush" Color="{StaticResource Accent200}"/>
                    <SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="{StaticResource Accent200Foreground}"/>
                </ResourceDictionary>

                <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/Accent/MaterialDesignColor.Lime.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />

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

            <!--tell dragablz to user MaterialDesign theme-->
            <Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}"/>
        </ResourceDictionary>

  2. 在窗口xmal中按照如下代码样式添加即可

<dragablz:TabablzControl x:Name="tabcontrol_main" Grid.Row="1" Background="AliceBlue" SelectionChanged="Tabcontrol_main_SelectionChanged">
                <dragablz:TabablzControl.InterTabController>
                    <dragablz:InterTabController/>
                </dragablz:TabablzControl.InterTabController>
                <TabItem Header="上一场比赛">
                    <Grid x:Name="grid_prevMatch" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">

                    </Grid>
                </TabItem>
                <TabItem Header="下一场比赛">
                    <Grid x:Name="grid_nextMatch" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">

                    </Grid>
                </TabItem>
                <TabItem Header="新比赛">
                    <Grid x:Name="grid_newMatch" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">

                    </Grid>
                </TabItem>
                <TabItem Header="导入比赛">
                    <Grid x:Name="grid_exportMatch" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">

                    </Grid>
                </TabItem>
                <TabItem Header="已配置比赛">
                    <Grid x:Name="grid_readyConfigMatch" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">

                    </Grid>
                </TabItem>
                <TabItem Header="自定义数据">
                    <Grid x:Name="grid_matchDataByUser" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">

                    </Grid>
                </TabItem>
</dragablz:TabablzControl>