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>