Skip to content

Commit 73fc217

Browse files
BigBadBleuCheeseKeboo
BigBadBleuCheese
and
Keboo
authored
attempt at a resolution to MaterialDesignInXAML/MaterialDesignInXamlT… (#1798)
* attempt at a resolution to #736 * Cleaning up the demo This allows for theme changes to propagate immediately * hopefully as requested by @Keboo in #1798 Co-authored-by: Kevin Bost <[email protected]>
1 parent 451fcb4 commit 73fc217

File tree

4 files changed

+149
-124
lines changed

4 files changed

+149
-124
lines changed

‎MainDemo.Wpf/Domain/MainWindowViewModel.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@ private ObservableCollection<DemoItem> GenerateDemoItems(ISnackbarMessageQueue s
250250
new DemoItem("Drawer", new Drawers(),
251251
new []
252252
{
253-
DocumentationLink.DemoPageLink<Drawers>(),
253+
DocumentationLink.DemoPageLink<Drawers>("Demo View"),
254254
DocumentationLink.ApiLink<DrawerHost>()
255255
}),
256256
new DemoItem("Snackbar", new Snackbars(),

‎MainDemo.Wpf/Drawers.xaml‎

Lines changed: 127 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -7,112 +7,133 @@
77
xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
88
xmlns:system="clr-namespace:System;assembly=mscorlib"
99
mc:Ignorable="d"
10+
d:DataContext="{d:DesignInstance Type=local:DrawersViewModel}"
1011
d:DesignHeight="300" d:DesignWidth="300">
11-
<smtx:XamlDisplay Key="drawers_1" MaxHeight="{x:Static system:Double.MaxValue}" Margin="5">
12-
<materialDesign:DrawerHost Margin="64" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="2" BorderBrush="{DynamicResource MaterialDesignDivider}">
13-
<materialDesign:DrawerHost.LeftDrawerContent>
14-
<StackPanel Margin="16">
15-
<TextBlock Margin="4" HorizontalAlignment="Center">LEFT FIELD</TextBlock>
16-
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
17-
CommandParameter="{x:Static Dock.Left}"
18-
Margin="4" HorizontalAlignment="Center"
19-
Style="{DynamicResource MaterialDesignFlatButton}">
20-
CLOSE THIS
21-
</Button>
22-
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
23-
Margin="4" HorizontalAlignment="Center"
24-
Style="{DynamicResource MaterialDesignFlatButton}">
25-
CLOSE ALL
26-
</Button>
27-
</StackPanel>
28-
</materialDesign:DrawerHost.LeftDrawerContent>
29-
<materialDesign:DrawerHost.TopDrawerContent>
30-
<StackPanel Margin="16" HorizontalAlignment="Center" Orientation="Horizontal">
31-
<TextBlock Margin="4" VerticalAlignment="Center">TOP BANANA</TextBlock>
32-
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
33-
Style="{DynamicResource MaterialDesignFlatButton}"
34-
Margin="4" VerticalAlignment="Center">
35-
CLOSE ALL
36-
</Button>
37-
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
38-
CommandParameter="{x:Static Dock.Top}"
39-
Style="{DynamicResource MaterialDesignFlatButton}"
40-
Margin="4" VerticalAlignment="Center">
41-
CLOSE THIS
42-
</Button>
43-
</StackPanel>
44-
</materialDesign:DrawerHost.TopDrawerContent>
45-
<materialDesign:DrawerHost.RightDrawerContent>
46-
<StackPanel Margin="16">
47-
<TextBlock Margin="4" HorizontalAlignment="Center">THE RIGHT STUFF</TextBlock>
48-
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
49-
CommandParameter="{x:Static Dock.Right}"
50-
Margin="4" HorizontalAlignment="Center"
51-
Style="{DynamicResource MaterialDesignFlatButton}">
52-
CLOSE THIS
53-
</Button>
54-
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
55-
Margin="4" HorizontalAlignment="Center"
56-
Style="{DynamicResource MaterialDesignFlatButton}">
57-
CLOSE ALL
58-
</Button>
59-
</StackPanel>
60-
</materialDesign:DrawerHost.RightDrawerContent>
61-
<materialDesign:DrawerHost.BottomDrawerContent>
62-
<StackPanel Margin="16" HorizontalAlignment="Center" Orientation="Horizontal">
63-
<TextBlock Margin="4" VerticalAlignment="Center">BOTTOM BRACKET</TextBlock>
64-
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
65-
Style="{DynamicResource MaterialDesignFlatButton}"
66-
Margin="4" VerticalAlignment="Center">
67-
CLOSE ALL
68-
</Button>
69-
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
70-
CommandParameter="{x:Static Dock.Bottom}"
71-
Style="{DynamicResource MaterialDesignFlatButton}"
72-
Margin="4" VerticalAlignment="Center">
73-
CLOSE THIS
74-
</Button>
75-
</StackPanel>
76-
</materialDesign:DrawerHost.BottomDrawerContent>
77-
<Grid MinWidth="480" MinHeight="480">
78-
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
79-
<Grid.RowDefinitions>
80-
<RowDefinition />
81-
<RowDefinition />
82-
<RowDefinition />
83-
</Grid.RowDefinitions>
84-
<Grid.ColumnDefinitions>
85-
<ColumnDefinition />
86-
<ColumnDefinition />
87-
<ColumnDefinition />
88-
</Grid.ColumnDefinitions>
89-
<Button Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
90-
CommandParameter="{x:Static Dock.Left}"
91-
Grid.Row="1" Grid.Column="0" Margin="4">
92-
<materialDesign:PackIcon Kind="ArrowLeft" />
93-
</Button>
94-
<Button Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
95-
CommandParameter="{x:Static Dock.Top}"
96-
Grid.Row="0" Grid.Column="1" Margin="4">
97-
<materialDesign:PackIcon Kind="ArrowUp" />
98-
</Button>
99-
<Button Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
100-
CommandParameter="{x:Static Dock.Right}"
101-
Grid.Row="1" Grid.Column="2" Margin="4">
102-
<materialDesign:PackIcon Kind="ArrowRight" />
103-
</Button>
104-
<Button Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
105-
CommandParameter="{x:Static Dock.Bottom}"
106-
Grid.Row="2" Grid.Column="1" Margin="4">
107-
<materialDesign:PackIcon Kind="ArrowDown" />
108-
</Button>
109-
<Button Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
110-
Grid.Row="1" Grid.Column="1" Margin="4"
111-
Style="{DynamicResource MaterialDesignRaisedAccentButton}">
112-
<materialDesign:PackIcon Kind="ArrowAll" />
113-
</Button>
12+
<DockPanel>
13+
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="8,4,8,0">
14+
<TextBlock VerticalAlignment="Center">Black Overlay Background</TextBlock>
15+
<ToggleButton Margin="8 0 16 0" x:Name="BackgroundToggle" />
16+
<TextBlock VerticalAlignment="Center">Primary Overlay Background</TextBlock>
17+
</StackPanel>
18+
<smtx:XamlDisplay Key="drawers_1" MaxHeight="{x:Static system:Double.MaxValue}" Margin="5">
19+
<materialDesign:DrawerHost Margin="32"
20+
HorizontalAlignment="Center"
21+
VerticalAlignment="Center"
22+
BorderThickness="2"
23+
BorderBrush="{DynamicResource MaterialDesignDivider}">
24+
<materialDesign:DrawerHost.Style>
25+
<Style TargetType="materialDesign:DrawerHost" BasedOn="{StaticResource {x:Type materialDesign:DrawerHost}}">
26+
<Style.Triggers>
27+
<DataTrigger Binding="{Binding IsChecked, ElementName=BackgroundToggle}" Value="True">
28+
<Setter Property="OverlayBackground" Value="{DynamicResource PrimaryHueMidBrush}" />
29+
</DataTrigger>
30+
</Style.Triggers>
31+
</Style>
32+
</materialDesign:DrawerHost.Style>
33+
<materialDesign:DrawerHost.LeftDrawerContent>
34+
<StackPanel Margin="16">
35+
<TextBlock Margin="4" HorizontalAlignment="Center">LEFT FIELD</TextBlock>
36+
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
37+
CommandParameter="{x:Static Dock.Left}"
38+
Margin="4" HorizontalAlignment="Center"
39+
Style="{DynamicResource MaterialDesignFlatButton}">
40+
CLOSE THIS
41+
</Button>
42+
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
43+
Margin="4" HorizontalAlignment="Center"
44+
Style="{DynamicResource MaterialDesignFlatButton}">
45+
CLOSE ALL
46+
</Button>
47+
</StackPanel>
48+
</materialDesign:DrawerHost.LeftDrawerContent>
49+
<materialDesign:DrawerHost.TopDrawerContent>
50+
<StackPanel Margin="16" HorizontalAlignment="Center" Orientation="Horizontal">
51+
<TextBlock Margin="4" VerticalAlignment="Center">TOP BANANA</TextBlock>
52+
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
53+
Style="{DynamicResource MaterialDesignFlatButton}"
54+
Margin="4" VerticalAlignment="Center">
55+
CLOSE ALL
56+
</Button>
57+
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
58+
CommandParameter="{x:Static Dock.Top}"
59+
Style="{DynamicResource MaterialDesignFlatButton}"
60+
Margin="4" VerticalAlignment="Center">
61+
CLOSE THIS
62+
</Button>
63+
</StackPanel>
64+
</materialDesign:DrawerHost.TopDrawerContent>
65+
<materialDesign:DrawerHost.RightDrawerContent>
66+
<StackPanel Margin="16">
67+
<TextBlock Margin="4" HorizontalAlignment="Center">THE RIGHT STUFF</TextBlock>
68+
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
69+
CommandParameter="{x:Static Dock.Right}"
70+
Margin="4" HorizontalAlignment="Center"
71+
Style="{DynamicResource MaterialDesignFlatButton}">
72+
CLOSE THIS
73+
</Button>
74+
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
75+
Margin="4" HorizontalAlignment="Center"
76+
Style="{DynamicResource MaterialDesignFlatButton}">
77+
CLOSE ALL
78+
</Button>
79+
</StackPanel>
80+
</materialDesign:DrawerHost.RightDrawerContent>
81+
<materialDesign:DrawerHost.BottomDrawerContent>
82+
<StackPanel Margin="16" HorizontalAlignment="Center" Orientation="Horizontal">
83+
<TextBlock Margin="4" VerticalAlignment="Center">BOTTOM BRACKET</TextBlock>
84+
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
85+
Style="{DynamicResource MaterialDesignFlatButton}"
86+
Margin="4" VerticalAlignment="Center">
87+
CLOSE ALL
88+
</Button>
89+
<Button Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
90+
CommandParameter="{x:Static Dock.Bottom}"
91+
Style="{DynamicResource MaterialDesignFlatButton}"
92+
Margin="4" VerticalAlignment="Center">
93+
CLOSE THIS
94+
</Button>
95+
</StackPanel>
96+
</materialDesign:DrawerHost.BottomDrawerContent>
97+
<Grid MinWidth="480" MinHeight="480">
98+
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
99+
<Grid.RowDefinitions>
100+
<RowDefinition />
101+
<RowDefinition />
102+
<RowDefinition />
103+
</Grid.RowDefinitions>
104+
<Grid.ColumnDefinitions>
105+
<ColumnDefinition />
106+
<ColumnDefinition />
107+
<ColumnDefinition />
108+
</Grid.ColumnDefinitions>
109+
<Button Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
110+
CommandParameter="{x:Static Dock.Left}"
111+
Grid.Row="1" Grid.Column="0" Margin="4">
112+
<materialDesign:PackIcon Kind="ArrowLeft" />
113+
</Button>
114+
<Button Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
115+
CommandParameter="{x:Static Dock.Top}"
116+
Grid.Row="0" Grid.Column="1" Margin="4">
117+
<materialDesign:PackIcon Kind="ArrowUp" />
118+
</Button>
119+
<Button Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
120+
CommandParameter="{x:Static Dock.Right}"
121+
Grid.Row="1" Grid.Column="2" Margin="4">
122+
<materialDesign:PackIcon Kind="ArrowRight" />
123+
</Button>
124+
<Button Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
125+
CommandParameter="{x:Static Dock.Bottom}"
126+
Grid.Row="2" Grid.Column="1" Margin="4">
127+
<materialDesign:PackIcon Kind="ArrowDown" />
128+
</Button>
129+
<Button Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
130+
Grid.Row="1" Grid.Column="1" Margin="4"
131+
Style="{DynamicResource MaterialDesignRaisedAccentButton}">
132+
<materialDesign:PackIcon Kind="ArrowAll" />
133+
</Button>
134+
</Grid>
114135
</Grid>
115-
</Grid>
116-
</materialDesign:DrawerHost>
117-
</smtx:XamlDisplay>
136+
</materialDesign:DrawerHost>
137+
</smtx:XamlDisplay>
138+
</DockPanel>
118139
</UserControl>

‎MaterialDesignThemes.Wpf/DrawerHost.cs‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,15 @@ public DrawerHost()
7878
CommandBindings.Add(new CommandBinding(CloseDrawerCommand, CloseDrawerHandler));
7979
}
8080

81+
public static readonly DependencyProperty OverlayBackgroundProperty = DependencyProperty.Register(
82+
nameof(OverlayBackground), typeof(Brush), typeof(DrawerHost), new PropertyMetadata(default(Brush)));
83+
84+
public Brush OverlayBackground
85+
{
86+
get { return (Brush)GetValue(OverlayBackgroundProperty); }
87+
set { SetValue(OverlayBackgroundProperty, value); }
88+
}
89+
8190
#region top drawer
8291

8392
public static readonly DependencyProperty TopDrawerContentProperty = DependencyProperty.Register(

0 commit comments

Comments
 (0)