Skip to content

Commit cde5d53

Browse files
HClausingKeboo
HClausing
and
Keboo
authored
Tabs And NavigationRail Styles for WPF TabControl (#2026)
* Initial work on TabControl Style. * Finished Tabs styling, with color zones and alignments. Added to Demo App. * Added first attempt of NavigationRail stylies. * Fix for NavigationRail background bar color. * Fix for XamlDisplay's Keys. * Fixes from last review. * Fixing demo app link * Removed tab control styles Updated demo navigation rail for theme colors. Handled background and foreground theme colors. * Removing reference to tab control style. * Removing TabItem style reference Co-authored-by: Henrique Clausing <[email protected]> Co-authored-by: Kevin Bost <[email protected]>
1 parent f90f160 commit cde5d53

File tree

6 files changed

+749
-0
lines changed

6 files changed

+749
-0
lines changed

‎MainDemo.Wpf/Domain/MainWindowViewModel.cs

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,15 @@ private ObservableCollection<DemoItem> GenerateDemoItems(ISnackbarMessageQueue s
264264
DocumentationLink.DemoPageLink<Progress>(),
265265
DocumentationLink.StyleLink("ProgressBar")
266266
}),
267+
new DemoItem("Navigation Rail", new NavigationRail { DataContext = null},
268+
new []
269+
{
270+
DocumentationLink.DemoPageLink<NavigationRail>("Demo View"),
271+
DocumentationLink.StyleLink("TabControl"),
272+
})
273+
{
274+
VerticalScrollBarVisibilityRequirement = ScrollBarVisibility.Auto
275+
},
267276
new DemoItem("Dialogs", new Dialogs { DataContext = new DialogsViewModel()},
268277
new []
269278
{

‎MainDemo.Wpf/NavigationRail.xaml

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
<UserControl x:Class="MaterialDesignColors.WpfExample.NavigationRail"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
7+
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
8+
mc:Ignorable="d"
9+
d:DesignHeight="450" d:DesignWidth="800">
10+
<Grid>
11+
<Grid.ColumnDefinitions>
12+
<ColumnDefinition Width="1*"/>
13+
<ColumnDefinition Width="1*"/>
14+
</Grid.ColumnDefinitions>
15+
<Grid.RowDefinitions>
16+
<RowDefinition Height="1*"/>
17+
<RowDefinition Height="1*"/>
18+
</Grid.RowDefinitions>
19+
<GroupBox Header="General" Style="{StaticResource MaterialDesignCardGroupBox}" materialDesign:ColorZoneAssist.Mode="Standard" Margin="5" materialDesign:ShadowAssist.ShadowEdges="Right" Grid.RowSpan="2">
20+
<Grid>
21+
<Grid.ColumnDefinitions>
22+
<ColumnDefinition Width="1*"/>
23+
<ColumnDefinition Width="1*"/>
24+
</Grid.ColumnDefinitions>
25+
<Grid.RowDefinitions>
26+
<RowDefinition Height="1*"/>
27+
<RowDefinition Height="1*"/>
28+
</Grid.RowDefinitions>
29+
<smtx:XamlDisplay Key="navrail_1" Margin="5,5,5,0" >
30+
<TabControl Style="{StaticResource MaterialDesignNavigatilRailTabControl}">
31+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}">
32+
<TabItem.Header>
33+
<materialDesign:PackIcon Kind="Heart" Width="24" Height="24"/>
34+
</TabItem.Header>
35+
<TextBlock Padding="5" TextWrapping="Wrap" >
36+
<Run Text="tab 1 content. Default look and behaviors. "/>
37+
<LineBreak/>
38+
<LineBreak/>
39+
<Run FontStyle="Italic">
40+
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
41+
</Run>
42+
</TextBlock>
43+
</TabItem>
44+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
45+
<TabItem.Header>
46+
<materialDesign:PackIcon Kind="Spade" Width="24" Height="24"/>
47+
</TabItem.Header>
48+
<TextBlock Padding="5" TextWrapping="Wrap" >
49+
<Run Text="tab 2 content. Default look and behaviors. "/>
50+
<LineBreak/>
51+
<LineBreak/>
52+
<Run FontStyle="Italic">
53+
Praesent sed dui arcu. Vivamus porta auctor sagittis
54+
</Run>
55+
</TextBlock>
56+
</TabItem>
57+
</TabControl>
58+
</smtx:XamlDisplay>
59+
<smtx:XamlDisplay Key="navrail_4" Margin="5,5,5,0" Grid.Column="1">
60+
<TabControl Style="{StaticResource MaterialDesignNavigatilRailTabControl}"
61+
materialDesign:ColorZoneAssist.Mode="Accent">
62+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
63+
<TabItem.Header>
64+
<materialDesign:PackIcon Kind="Heart" Width="24" Height="24"/>
65+
</TabItem.Header>
66+
<TextBlock Padding="5" TextWrapping="Wrap" >
67+
<Run Text="tab 1 content. Default look and behaviors. "/>
68+
<LineBreak/>
69+
<LineBreak/>
70+
<Run FontStyle="Italic">
71+
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
72+
</Run>
73+
</TextBlock>
74+
</TabItem>
75+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
76+
<TabItem.Header>
77+
<materialDesign:PackIcon Kind="Spade" Width="24" Height="24"/>
78+
</TabItem.Header>
79+
<TextBlock Padding="5" TextWrapping="Wrap" >
80+
<Run Text="tab 2 content. Default look and behaviors. "/>
81+
<LineBreak/>
82+
<LineBreak/>
83+
<Run FontStyle="Italic">
84+
Praesent sed dui arcu. Vivamus porta auctor sagittis
85+
</Run>
86+
</TextBlock>
87+
</TabItem>
88+
</TabControl>
89+
</smtx:XamlDisplay>
90+
<smtx:XamlDisplay Key="navrail_2" Margin="5,5,5,0" Grid.Row="1" >
91+
<TabControl Style="{StaticResource MaterialDesignNavigatilRailTabControl}" TabStripPlacement="Right">
92+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
93+
<TabItem.Header>
94+
<materialDesign:PackIcon Kind="Heart" Width="24" Height="24"/>
95+
</TabItem.Header>
96+
<TextBlock Padding="5" TextWrapping="Wrap" >
97+
<Run Text="tab 1 content. Default look and right aligned. "/>
98+
<LineBreak/>
99+
<LineBreak/>
100+
<Run FontStyle="Italic">
101+
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
102+
</Run>
103+
</TextBlock>
104+
</TabItem>
105+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
106+
<TabItem.Header>
107+
<materialDesign:PackIcon Kind="Spade" Width="24" Height="24"/>
108+
</TabItem.Header>
109+
<TextBlock Padding="5" TextWrapping="Wrap" >
110+
<Run Text="tab 2 content. Default look and right aligned. "/>
111+
<LineBreak/>
112+
<LineBreak/>
113+
<Run FontStyle="Italic">
114+
Praesent sed dui arcu. Vivamus porta auctor sagittis
115+
</Run>
116+
</TextBlock>
117+
</TabItem>
118+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
119+
<TabItem.Header>
120+
<materialDesign:PackIcon Kind="Tree" Width="24" Height="24"/>
121+
</TabItem.Header>
122+
<TextBlock Padding="5" TextWrapping="Wrap" >
123+
<Run Text="tab 3 content. Default look and right aligned. "/>
124+
<LineBreak/>
125+
<LineBreak/>
126+
<Run FontStyle="Italic">
127+
Praesent sed dui arcu. Vivamus porta auctor sagittis
128+
</Run>
129+
</TextBlock>
130+
</TabItem>
131+
</TabControl>
132+
</smtx:XamlDisplay>
133+
<smtx:XamlDisplay Key="navrail_3" Margin="5,5,5,0" Grid.Row="1" Grid.Column="1">
134+
<TabControl Style="{StaticResource MaterialDesignNavigatilRailTabControl}" materialDesign:ColorZoneAssist.Mode="PrimaryMid">
135+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
136+
<TabItem.Header>
137+
<materialDesign:PackIcon Kind="Heart" Width="24" Height="24"/>
138+
</TabItem.Header>
139+
<TextBlock Padding="5" TextWrapping="Wrap" >
140+
<Run Text="tab 1 content. Default look and behaviors. "/>
141+
<LineBreak/>
142+
<LineBreak/>
143+
<Run FontStyle="Italic">
144+
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
145+
</Run>
146+
</TextBlock>
147+
</TabItem>
148+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
149+
<TabItem.Header>
150+
<materialDesign:PackIcon Kind="Spade" Width="24" Height="24"/>
151+
</TabItem.Header>
152+
<TextBlock Padding="5" TextWrapping="Wrap" >
153+
<Run Text="tab 2 content. Default look and behaviors. "/>
154+
<LineBreak/>
155+
<LineBreak/>
156+
<Run FontStyle="Italic">
157+
Praesent sed dui arcu. Vivamus porta auctor sagittis
158+
</Run>
159+
</TextBlock>
160+
</TabItem>
161+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
162+
<TabItem.Header>
163+
<materialDesign:PackIcon Kind="Tree" Width="24" Height="24"/>
164+
</TabItem.Header>
165+
<TextBlock Padding="5" TextWrapping="Wrap" >
166+
<Run Text="tab 3 content. Default look and right aligned. "/>
167+
<LineBreak/>
168+
<LineBreak/>
169+
<Run FontStyle="Italic">
170+
Praesent sed dui arcu. Vivamus porta auctor sagittis
171+
</Run>
172+
</TextBlock>
173+
</TabItem>
174+
</TabControl>
175+
</smtx:XamlDisplay>
176+
177+
</Grid>
178+
</GroupBox>
179+
<GroupBox Grid.Column="1" Header="Floating Action Button" Style="{StaticResource MaterialDesignCardGroupBox}" materialDesign:ColorZoneAssist.Mode="Standard" Margin="5">
180+
<smtx:XamlDisplay Key="navrail_floating_1">
181+
<TabControl Style="{StaticResource MaterialDesignNavigatilRailTabControl}"
182+
materialDesign:ColorZoneAssist.Mode="PrimaryDark">
183+
<materialDesign:NavigationRailAssist.FloatingContent>
184+
<Button Style="{StaticResource MaterialDesignFloatingActionAccentButton}" Margin="0,8">
185+
<materialDesign:PackIcon Kind="Plus" />
186+
</Button>
187+
</materialDesign:NavigationRailAssist.FloatingContent>
188+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
189+
<TabItem.Header>
190+
<materialDesign:PackIcon Kind="Heart" Width="24" Height="24"/>
191+
</TabItem.Header>
192+
<TextBlock Padding="5" TextWrapping="Wrap" >
193+
<Run Text="tab 1 content. Default look and behaviors. "/>
194+
<LineBreak/>
195+
<LineBreak/>
196+
<Run FontStyle="Italic">
197+
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
198+
</Run>
199+
</TextBlock>
200+
</TabItem>
201+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
202+
<TabItem.Header>
203+
<materialDesign:PackIcon Kind="Spade" Width="24" Height="24"/>
204+
</TabItem.Header>
205+
<TextBlock Padding="5" TextWrapping="Wrap" >
206+
<Run Text="tab 2 content. Default look and behaviors. "/>
207+
<LineBreak/>
208+
<LineBreak/>
209+
<Run FontStyle="Italic">
210+
Praesent sed dui arcu. Vivamus porta auctor sagittis
211+
</Run>
212+
</TextBlock>
213+
</TabItem>
214+
</TabControl>
215+
</smtx:XamlDisplay>
216+
</GroupBox>
217+
<GroupBox Grid.Column="1" Grid.Row="1" Header="Shadow" Style="{StaticResource MaterialDesignCardGroupBox}" materialDesign:ColorZoneAssist.Mode="Standard" Margin="5">
218+
<StackPanel Orientation="Horizontal">
219+
<smtx:XamlDisplay Key="navrail_noshadow_1">
220+
<TabControl Style="{StaticResource MaterialDesignNavigatilRailTabControl}"
221+
materialDesign:ColorZoneAssist.Mode="Standard"
222+
materialDesign:ShadowAssist.ShadowDepth="Depth0">
223+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
224+
<TabItem.Header>
225+
<materialDesign:PackIcon Kind="Heart" Width="24" Height="24"/>
226+
</TabItem.Header>
227+
</TabItem>
228+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
229+
<TabItem.Header>
230+
<materialDesign:PackIcon Kind="Spade" Width="24" Height="24"/>
231+
</TabItem.Header>
232+
</TabItem>
233+
</TabControl>
234+
</smtx:XamlDisplay>
235+
<smtx:XamlDisplay Key="navrail_wshadow_1">
236+
<TabControl Style="{StaticResource MaterialDesignNavigatilRailTabControl}"
237+
materialDesign:ColorZoneAssist.Mode="Standard"
238+
materialDesign:ShadowAssist.ShadowDepth="Depth1" >
239+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
240+
<TabItem.Header>
241+
<materialDesign:PackIcon Kind="Heart" Width="24" Height="24"/>
242+
</TabItem.Header>
243+
</TabItem>
244+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
245+
<TabItem.Header>
246+
<materialDesign:PackIcon Kind="Spade" Width="24" Height="24"/>
247+
</TabItem.Header>
248+
</TabItem>
249+
</TabControl>
250+
</smtx:XamlDisplay>
251+
<smtx:XamlDisplay Key="navrail_wshadow_2">
252+
<TabControl Style="{StaticResource MaterialDesignNavigatilRailTabControl}"
253+
materialDesign:ColorZoneAssist.Mode="Standard"
254+
materialDesign:ShadowAssist.ShadowDepth="Depth2">
255+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
256+
<TabItem.Header>
257+
<materialDesign:PackIcon Kind="Heart" Width="24" Height="24"/>
258+
</TabItem.Header>
259+
</TabItem>
260+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
261+
<TabItem.Header>
262+
<materialDesign:PackIcon Kind="Spade" Width="24" Height="24"/>
263+
</TabItem.Header>
264+
</TabItem>
265+
</TabControl>
266+
</smtx:XamlDisplay>
267+
<smtx:XamlDisplay Key="navrail_wshadow_3">
268+
<TabControl Style="{StaticResource MaterialDesignNavigatilRailTabControl}"
269+
materialDesign:ColorZoneAssist.Mode="Standard"
270+
materialDesign:ShadowAssist.ShadowDepth="Depth3">
271+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
272+
<TabItem.Header>
273+
<materialDesign:PackIcon Kind="Heart" Width="24" Height="24"/>
274+
</TabItem.Header>
275+
</TabItem>
276+
<TabItem Style="{StaticResource MaterialDesignNavigationRailTabItem}" >
277+
<TabItem.Header>
278+
<materialDesign:PackIcon Kind="Spade" Width="24" Height="24"/>
279+
</TabItem.Header>
280+
</TabItem>
281+
</TabControl>
282+
</smtx:XamlDisplay>
283+
</StackPanel>
284+
</GroupBox>
285+
</Grid>
286+
</UserControl>

‎MainDemo.Wpf/NavigationRail.xaml.cs

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
using System.Windows;
7+
using System.Windows.Controls;
8+
using System.Windows.Data;
9+
using System.Windows.Documents;
10+
using System.Windows.Input;
11+
using System.Windows.Media;
12+
using System.Windows.Media.Imaging;
13+
using System.Windows.Navigation;
14+
using System.Windows.Shapes;
15+
16+
namespace MaterialDesignColors.WpfExample
17+
{
18+
/// <summary>
19+
/// Interação lógica para NavigationRail.xam
20+
/// </summary>
21+
public partial class NavigationRail : UserControl
22+
{
23+
public NavigationRail()
24+
{
25+
InitializeComponent();
26+
}
27+
}
28+
}

‎MaterialDesignThemes.Wpf/NavigationRailAssist.cs

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
using System.Windows;
2+
using System.Windows.Controls;
3+
4+
namespace MaterialDesignThemes.Wpf
5+
{
6+
public static class NavigationRailAssist
7+
{
8+
#region Property FloatingContent
9+
10+
/// <summary>
11+
/// Floating Content (ex: Button) on navigation rail (optional)
12+
/// </summary>
13+
public static readonly DependencyProperty FloatingContentProperty = DependencyProperty.RegisterAttached(
14+
"FloatingContent", typeof(object), typeof(NavigationRailAssist), new PropertyMetadata(null));
15+
16+
public static object GetFloatingContent(DependencyObject element) => (object)element.GetValue(FloatingContentProperty);
17+
public static void SetFloatingContent(DependencyObject element, object value) => element.SetValue(FloatingContentProperty, value);
18+
19+
#endregion
20+
}
21+
}

0 commit comments

Comments
 (0)