Skip to content

Commit ba94d85

Browse files
ButchersBoyButchersBoy
committed
Colour zones!
1 parent f5c1ad6 commit ba94d85

File tree

9 files changed

+133
-9
lines changed

9 files changed

+133
-9
lines changed

‎MaterialDesignColors.WpfExample/Buttons.xaml

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -109,24 +109,23 @@
109109
</Canvas>
110110
</Viewbox>
111111
</Button>
112-
<Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignRaisedLightButton}" Margin="0 0 8 0" Width="80"
112+
<Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignRaisedLightButton}" Margin="0 0 8 0" Width="88"
113113
ToolTip="Resource name: MaterialDesignRaisedLightButton">
114114
LIGHT
115115
</Button>
116-
<Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignRaisedButton}" Margin="0 0 8 0" Width="80"
116+
<Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignRaisedButton}" Margin="0 0 8 0" Width="88"
117117
ToolTip="Resource name: MaterialDesignRaisedButton">
118118
MID
119119
</Button>
120-
<Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignRaisedDarkButton}" Margin="0 0 8 0" Width="80"
120+
<Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignRaisedDarkButton}" Margin="0 0 8 0" Width="88"
121121
ToolTip="Resource name: MaterialDesignRaisedLightDarkButton">
122122
DARK
123123
</Button>
124-
<Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignRaisedAccentButton}" Margin="0 0 8 0" Width="80"
124+
<Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignRaisedAccentButton}" Margin="0 0 8 0" Width="88"
125125
ToolTip="Resource name: MaterialDesignRaisedAccentButton">
126126
ACCENT
127127
</Button>
128-
</StackPanel>
129-
<StackPanel Grid.Row="2" Grid.Column="0" Margin="0 8 0 0" Grid.ColumnSpan="3" Orientation="Horizontal">
128+
</StackPanel><StackPanel Grid.Row="2" Grid.Column="0" Margin="0 8 0 0" Grid.ColumnSpan="3" Orientation="Horizontal">
130129
<ToggleButton Content="C" Margin="0 0 8 8" Style="{StaticResource MaterialDesignActionLightToggleButton}" IsChecked="True" />
131130
<ToggleButton Content="H" Margin="0 0 8 8" Style="{StaticResource MaterialDesignActionToggleButton}"/>
132131
<!-- checkbox style same as toggle button -->

‎MaterialDesignColors.WpfExample/ColorZoneWindow.xaml

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<Window x:Class="MaterialDesignColors.WpfExample.ColorZoneWindow"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:local="clr-namespace:MaterialDesignColors.WpfExample"
7+
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
8+
mc:Ignorable="d"
9+
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
10+
TextElement.FontWeight="Medium"
11+
TextElement.FontSize="14"
12+
Background="{DynamicResource MaterialDesignPaper}"
13+
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
14+
Title="Colour Zones" Height="600" Width="800">
15+
<StackPanel Margin="16">
16+
<TextBlock FontSize="16">Colour Zones</TextBlock>
17+
<TextBlock TextWrapping="Wrap" Margin="0 16 0 0">The ColorZone control allows you to easily define striking blocks of colour to give your application extra clarity and style, whilst still remaining within the bounds of your Material Design palette.</TextBlock>
18+
<TextBlock Margin="0 16 0 0" FontSize="10">Invert the basic paper/body colours.</TextBlock>
19+
<wpf:ColorZone Mode="Inverted" Padding="16">
20+
<StackPanel Orientation="Horizontal">
21+
<ToggleButton Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
22+
<TextBlock VerticalAlignment="Center" Margin="16 0 0 0">Material Design In XAML Toolkit</TextBlock>
23+
</StackPanel>
24+
</wpf:ColorZone>
25+
<TextBlock Margin="0 16 0 0" FontSize="10">Use primary light back and fore colours.</TextBlock>
26+
<wpf:ColorZone Mode="PrimaryLight" Padding="16">
27+
<StackPanel Orientation="Horizontal">
28+
<ToggleButton Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
29+
<TextBlock VerticalAlignment="Center" Margin="16 0 0 0">Material Design In XAML Toolkit</TextBlock>
30+
</StackPanel>
31+
</wpf:ColorZone>
32+
<TextBlock Margin="0 16 0 0" FontSize="10">Use primary mid colours, and nest colour zones!</TextBlock>
33+
<wpf:ColorZone Mode="PrimaryMid" Padding="16">
34+
<StackPanel Orientation="Horizontal">
35+
<ToggleButton Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
36+
<wpf:ColorZone Mode="Standard" Padding="8 4 8 4" CornerRadius="2"
37+
Margin="16 0 0 0"
38+
Effect="{DynamicResource MaterialDesignShadowDepth1}">
39+
<Grid>
40+
<Grid.ColumnDefinitions>
41+
<ColumnDefinition Width="Auto" />
42+
<ColumnDefinition Width="*" />
43+
<ColumnDefinition Width="Auto" />
44+
</Grid.ColumnDefinitions>
45+
<Viewbox Width="16" Height="16" VerticalAlignment="Center" Opacity=".56">
46+
<Canvas Width="24" Height="24">
47+
<Path Data="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
48+
Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:ColorZone}, Path=Foreground}" />
49+
</Canvas>
50+
</Viewbox>
51+
<TextBox Grid.Column="1" Margin="8 0 0 0" wpf:TextField.Hint="Build a search bar" MinWidth="200" />
52+
<Viewbox Grid.Column="2" Width="16" Height="16" Margin="8 0 0 0" Opacity=".56">
53+
<Canvas Width="24" Height="24">
54+
<Path Data="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"
55+
Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:ColorZone}, Path=Foreground}" />
56+
</Canvas>
57+
</Viewbox>
58+
</Grid>
59+
</wpf:ColorZone>
60+
</StackPanel>
61+
</wpf:ColorZone>
62+
<TextBlock Margin="0 16 0 0" FontSize="10">Add in a corner radius and shadow.</TextBlock>
63+
<wpf:ColorZone Mode="PrimaryDark" Padding="16" CornerRadius="3" Effect="{DynamicResource MaterialDesignShadowDepth3}">
64+
<StackPanel Orientation="Horizontal">
65+
<ToggleButton Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
66+
<TextBlock VerticalAlignment="Center" Margin="16 0 0 0">Material Design In XAML Toolkit</TextBlock>
67+
</StackPanel>
68+
</wpf:ColorZone>
69+
<TextBlock Margin="0 16 0 0" FontSize="10">Use accent back and fore colours.</TextBlock>
70+
<wpf:ColorZone Mode="Accent" Padding="16">
71+
<StackPanel Orientation="Horizontal">
72+
<ToggleButton Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
73+
<TextBlock VerticalAlignment="Center" Margin="16 0 0 0">Material Design In XAML Toolkit</TextBlock>
74+
</StackPanel>
75+
</wpf:ColorZone>
76+
</StackPanel>
77+
</Window>

‎MaterialDesignColors.WpfExample/ColorZoneWindow.xaml.cs

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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.Shapes;
14+
15+
namespace MaterialDesignColors.WpfExample
16+
{
17+
/// <summary>
18+
/// Interaction logic for ColorZoneWindow.xaml
19+
/// </summary>
20+
public partial class ColorZoneWindow : Window
21+
{
22+
public ColorZoneWindow()
23+
{
24+
InitializeComponent();
25+
}
26+
}
27+
}

‎MaterialDesignColors.WpfExample/MainWindow.xaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
Title="Material Design in XAML" Height="600" Width="800"
77
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
88
TextElement.FontWeight="Medium"
9+
TextElement.FontSize="14"
910
Background="{DynamicResource MaterialDesignPaper}"
1011
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto">
1112
<Window.Resources>

‎MaterialDesignColors.WpfExample/MainWindow.xaml.cs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ public MainWindow()
3232
{
3333
DataContext = new PaletteSelectorViewModel()
3434
}.Show();
35+
new ColorZoneWindow().Show();
3536
}
3637

3738
private void ToggleButton_OnChecked(object sender, RoutedEventArgs e)

‎MaterialDesignColors.WpfExample/MaterialDesignColors.WpfExample.csproj

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,9 @@
7272
<Compile Include="CardsWindow.xaml.cs">
7373
<DependentUpon>CardsWindow.xaml</DependentUpon>
7474
</Compile>
75+
<Compile Include="ColorZoneWindow.xaml.cs">
76+
<DependentUpon>ColorZoneWindow.xaml</DependentUpon>
77+
</Compile>
7578
<Compile Include="Domain\AnotherCommandImplementation.cs" />
7679
<Compile Include="Domain\ListFieldsViewModel.cs" />
7780
<Compile Include="Domain\SelectableViewModel.cs" />
@@ -101,6 +104,10 @@
101104
<SubType>Designer</SubType>
102105
<Generator>MSBuild:Compile</Generator>
103106
</Page>
107+
<Page Include="ColorZoneWindow.xaml">
108+
<SubType>Designer</SubType>
109+
<Generator>MSBuild:Compile</Generator>
110+
</Page>
104111
<Page Include="ListsWindow.xaml">
105112
<SubType>Designer</SubType>
106113
<Generator>MSBuild:Compile</Generator>

‎MaterialDesignColors.WpfExample/PaletteSelectorWindow.xaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
88
xmlns:materialDesignColors="clr-namespace:MaterialDesignColors;assembly=MaterialDesignColors"
99
mc:Ignorable="d"
10-
Title="PaletteSelectorWindow" Height="300" Width="300"
10+
Title="PaletteSelectorWindow" Height="600" Width="800"
1111
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
1212
Background="{DynamicResource MaterialDesignPaper}"
1313
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"

‎MaterialDesignThemes.Wpf/ColorZone.cs

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,5 +43,14 @@ public ColorZoneMode Mode
4343
get { return (ColorZoneMode) GetValue(ModeProperty); }
4444
set { SetValue(ModeProperty, value); }
4545
}
46+
47+
public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register(
48+
"CornerRadius", typeof (CornerRadius), typeof (ColorZone), new PropertyMetadata(default(CornerRadius)));
49+
50+
public CornerRadius CornerRadius
51+
{
52+
get { return (CornerRadius) GetValue(CornerRadiusProperty); }
53+
set { SetValue(CornerRadiusProperty, value); }
54+
}
4655
}
4756
}

‎MaterialDesignThemes.Wpf/Themes/Generic.xaml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -289,12 +289,15 @@
289289
<Style TargetType="{x:Type local:ColorZone}">
290290
<Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}" />
291291
<Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
292+
<Setter Property="VerticalAlignment" Value="Top" />
292293
<Setter Property="Template">
293294
<Setter.Value>
294295
<ControlTemplate TargetType="{x:Type local:ColorZone}">
295296
<Border Background="{TemplateBinding Background}"
296297
BorderBrush="{TemplateBinding BorderBrush}"
297-
BorderThickness="{TemplateBinding BorderThickness}">
298+
BorderThickness="{TemplateBinding BorderThickness}"
299+
CornerRadius="{TemplateBinding CornerRadius}"
300+
>
298301
<ContentPresenter Content="{TemplateBinding Content}"
299302
ContentTemplate="{TemplateBinding ContentTemplate}"
300303
TextElement.Foreground="{TemplateBinding Foreground}"
@@ -320,7 +323,7 @@
320323
<Setter Property="Background" Value="{DynamicResource PrimaryHueMidBrush}" />
321324
<Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}" />
322325
</Trigger>
323-
<Trigger Property="Mode" Value="PrimaryLight">
326+
<Trigger Property="Mode" Value="PrimaryDark">
324327
<Setter Property="Background" Value="{DynamicResource PrimaryHueDarkBrush}" />
325328
<Setter Property="Foreground" Value="{DynamicResource PrimaryHueDarkForegroundBrush}" />
326329
</Trigger>

0 commit comments

Comments
 (0)