Skip to content

Commit 90c31b4

Browse files
amaitlandamaitland
authored
WPF Example - Implement Material Design (#4446)
* WPF Example - Improve layout/design using MaterialDesignInXamlToolkit - Some very basic UI improvements using MaterialDesignInXamlToolkit
1 parent 1460dee commit 90c31b4

File tree

5 files changed

+294
-270
lines changed

5 files changed

+294
-270
lines changed

‎CefSharp.Wpf.Example/App.xaml‎

Lines changed: 71 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,62 @@
11
<Application x:Class="CefSharp.Wpf.Example.App"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
45
xmlns:controls="clr-namespace:CefSharp.Wpf.Example.Controls"
56
xmlns:view="clr-namespace:CefSharp.Wpf.Example.Views"
67
xmlns:viewModel="clr-namespace:CefSharp.Wpf.Example.ViewModels"
78
StartupUri="MainWindow.xaml">
89
<Application.Resources>
9-
<!-- Used for testing https://github.com/cefsharp/CefSharp/issues/2488 -->
10-
<!--<Style TargetType="ToolTip">
11-
<Setter Property="ContentTemplate">
12-
<Setter.Value>
13-
<DataTemplate>
14-
<StackPanel>
15-
<TextBlock Text="{Binding}" MaxWidth="400" TextWrapping='Wrap' />
16-
</StackPanel>
17-
</DataTemplate>
18-
</Setter.Value>
19-
</Setter>
20-
</Style>-->
10+
<ResourceDictionary>
11+
<ResourceDictionary.MergedDictionaries>
12+
<materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" />
13+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
14+
</ResourceDictionary.MergedDictionaries>
2115

22-
<Style TargetType="{x:Type controls:NonReloadingTabControl}">
23-
<Setter Property="Template">
24-
<Setter.Value>
25-
<ControlTemplate TargetType="{x:Type controls:NonReloadingTabControl}">
26-
<Grid Background="{TemplateBinding Background}"
16+
<!-- Used for testing https://github.com/cefsharp/CefSharp/issues/2488 -->
17+
<!--<Style TargetType="ToolTip">
18+
<Setter Property="ContentTemplate">
19+
<Setter.Value>
20+
<DataTemplate>
21+
<StackPanel>
22+
<TextBlock Text="{Binding}" MaxWidth="400" TextWrapping='Wrap' />
23+
</StackPanel>
24+
</DataTemplate>
25+
</Setter.Value>
26+
</Setter>
27+
</Style>-->
28+
29+
<Style TargetType="{x:Type controls:NonReloadingTabControl}">
30+
<Setter Property="Template">
31+
<Setter.Value>
32+
<ControlTemplate TargetType="{x:Type controls:NonReloadingTabControl}">
33+
<Grid Background="{TemplateBinding Background}"
2734
ClipToBounds="True"
2835
KeyboardNavigation.TabNavigation="Local"
2936
SnapsToDevicePixels="True">
30-
<Grid.ColumnDefinitions>
31-
<ColumnDefinition x:Name="ColumnDefinition0" />
32-
<ColumnDefinition x:Name="ColumnDefinition1" Width="0" />
33-
</Grid.ColumnDefinitions>
34-
<Grid.RowDefinitions>
35-
<RowDefinition x:Name="RowDefinition0" Height="Auto" />
36-
<RowDefinition x:Name="RowDefinition1" Height="*" />
37-
</Grid.RowDefinitions>
38-
<StackPanel Orientation="Horizontal">
39-
<TabPanel x:Name="HeaderPanel"
37+
<Grid.ColumnDefinitions>
38+
<ColumnDefinition x:Name="ColumnDefinition0" />
39+
<ColumnDefinition x:Name="ColumnDefinition1" Width="0" />
40+
</Grid.ColumnDefinitions>
41+
<Grid.RowDefinitions>
42+
<RowDefinition x:Name="RowDefinition0" Height="Auto" />
43+
<RowDefinition x:Name="RowDefinition1" Height="*" />
44+
</Grid.RowDefinitions>
45+
<StackPanel Orientation="Horizontal">
46+
<TabPanel x:Name="HeaderPanel"
4047
Margin="0,0,0,-1"
4148
VerticalAlignment="Bottom"
4249
Panel.ZIndex="1"
4350
IsItemsHost="True"
4451
KeyboardNavigation.TabIndex="1" />
45-
<Button Content="+"
46-
FontSize="12"
47-
FontWeight="Bold"
48-
Margin="10, 0, 0, 0"
52+
<Button Margin="10, 0, 0, 0"
53+
ToolTip="Open new Tab"
54+
Style="{StaticResource MaterialDesignToolButton}"
55+
Content="{materialDesign:PackIcon Kind=TabAdd, Size=16}"
4956
Width="25"
5057
Command="ApplicationCommands.New" />
51-
</StackPanel>
52-
<Border x:Name="ContentPanel"
58+
</StackPanel>
59+
<Border x:Name="ContentPanel"
5360
Grid.Row="1"
5461
Grid.Column="0"
5562
Background="Transparent"
@@ -58,42 +65,43 @@
5865
KeyboardNavigation.DirectionalNavigation="Contained"
5966
KeyboardNavigation.TabIndex="2"
6067
KeyboardNavigation.TabNavigation="Local">
61-
<Grid x:Name="PART_ItemsHolder"
68+
<Grid x:Name="PART_ItemsHolder"
6269
Margin="{TemplateBinding Padding}"
6370
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
64-
</Border>
65-
</Grid>
66-
</ControlTemplate>
67-
</Setter.Value>
68-
</Setter>
69-
</Style>
71+
</Border>
72+
</Grid>
73+
</ControlTemplate>
74+
</Setter.Value>
75+
</Setter>
76+
</Style>
7077

71-
<Style TargetType="TabItem">
72-
<Setter Property="Template">
73-
<Setter.Value>
74-
<ControlTemplate TargetType="TabItem">
75-
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" Margin="2,0">
76-
<ContentPresenter x:Name="ContentSite"
78+
<Style TargetType="TabItem">
79+
<Setter Property="Template">
80+
<Setter.Value>
81+
<ControlTemplate TargetType="TabItem">
82+
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" Margin="2,0">
83+
<ContentPresenter x:Name="ContentSite"
7784
VerticalAlignment="Center"
7885
HorizontalAlignment="Center"
7986
ContentSource="Header"
8087
Margin="10,2"/>
81-
</Border>
82-
<ControlTemplate.Triggers>
83-
<Trigger Property="IsSelected" Value="True">
84-
<Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
85-
</Trigger>
86-
<Trigger Property="IsSelected" Value="False">
87-
<Setter TargetName="Border" Property="Background" Value="GhostWhite" />
88-
</Trigger>
89-
</ControlTemplate.Triggers>
90-
</ControlTemplate>
91-
</Setter.Value>
92-
</Setter>
93-
</Style>
94-
95-
<DataTemplate DataType="{x:Type viewModel:BrowserTabViewModel}">
96-
<view:BrowserTabView />
97-
</DataTemplate>
88+
</Border>
89+
<ControlTemplate.Triggers>
90+
<Trigger Property="IsSelected" Value="True">
91+
<Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
92+
</Trigger>
93+
<Trigger Property="IsSelected" Value="False">
94+
<Setter TargetName="Border" Property="Background" Value="GhostWhite" />
95+
</Trigger>
96+
</ControlTemplate.Triggers>
97+
</ControlTemplate>
98+
</Setter.Value>
99+
</Setter>
100+
</Style>
101+
102+
<DataTemplate DataType="{x:Type viewModel:BrowserTabViewModel}">
103+
<view:BrowserTabView />
104+
</DataTemplate>
105+
</ResourceDictionary>
98106
</Application.Resources>
99107
</Application>

‎CefSharp.Wpf.Example/CefSharp.Wpf.Example.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
</ItemGroup>
3333
<ItemGroup>
3434
<PackageReference Include="chromiumembeddedframework.runtime" Version="111.2.7" />
35+
<PackageReference Include="MaterialDesignThemes" Version="4.8.0" />
3536
</ItemGroup>
3637
<ItemGroup>
3738
<Compile Remove="bin.netcore\**" />

‎CefSharp.Wpf.Example/CefSharp.Wpf.Example.netcore.csproj‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<?xml version="1.0" encoding="utf-8"?>
1+
<?xml version="1.0" encoding="utf-8"?>
22
<Project>
33
<!-- Note: We cannot use the recommended style of specifying <Project Sdk=...> because we need
44
to set BaseIntermediateOutputPath and BaseOutputPath before the SDK props are imported. -->
@@ -42,6 +42,7 @@
4242
<ProjectReference Include="..\CefSharp\CefSharp.netcore.csproj" />
4343
<PackageReference Include="chromiumembeddedframework.runtime" Version="111.2.7" />
4444
<PackageReference Include="System.Runtime.InteropServices.WindowsRuntime" Version="4.3.0" />
45+
<PackageReference Include="MaterialDesignThemes" Version="4.8.0" />
4546
</ItemGroup>
4647

4748
<ItemGroup>

‎CefSharp.Wpf.Example/MainWindow.xaml‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
<Window x:Class="CefSharp.Wpf.Example.MainWindow"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
45
xmlns:controls="clr-namespace:CefSharp.Wpf.Example.Controls"
56
xmlns:ex="clr-namespace:CefSharp.Example;assembly=CefSharp.Example"
7+
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
8+
TextElement.FontWeight="Regular"
9+
TextElement.FontSize="13"
10+
TextOptions.TextFormattingMode="Ideal"
11+
TextOptions.TextRenderingMode="Auto"
12+
Background="{DynamicResource MaterialDesignPaper}"
13+
FontFamily="{DynamicResource MaterialDesignFont}"
614
Title="CefSharp.Wpf.Example"
715
WindowState="Maximized">
816
<Window.InputBindings>
917
<KeyBinding Key="T" Modifiers="Control" Command="New"/>
1018
<KeyBinding Key="W" Modifiers="Control" Command="Close"/>
1119
</Window.InputBindings>
1220
<DockPanel>
13-
<Menu DockPanel.Dock="Top">
21+
<Menu DockPanel.Dock="Top" materialDesign:MenuAssist.TopLevelMenuItemHeight="25">
1422
<MenuItem Header="_File">
1523
<MenuItem Header="_New Tab" Command="New"/>
1624
<MenuItem Header="_Close Tab" Command="Close"/>
@@ -63,12 +71,10 @@
6371
<DataTemplate>
6472
<StackPanel Orientation="Horizontal">
6573
<TextBlock Text="{Binding Title}"/>
66-
<Button Content="X"
67-
Height="20"
74+
<Button Height="20"
6875
Width="20"
69-
FontFamily="Courier"
70-
FontWeight="Bold"
71-
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
76+
Style="{StaticResource MaterialDesignToolButton}"
77+
Content="{materialDesign:PackIcon Kind=Close, Size=14}"
7278
Command="Close"
7379
FontSize="10"
7480
Padding="0"

0 commit comments

Comments
 (0)