Skip to content
This repository was archived by the owner on Nov 25, 2023. It is now read-only.

Commit c43417d

Browse files
InvvardInvvard
committed
Start redesigning keys
1 parent 979cf09 commit c43417d

File tree

1 file changed

+78
-88
lines changed

1 file changed

+78
-88
lines changed

‎src/InvvardDev.EZLayoutDisplay.Desktop/Skins/KeyboardLayoutSkin.xaml‎

Lines changed: 78 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,23 @@
66
<FontFamily x:Key="LatoFontFamily">/InvvardDev.EZLayoutDisplay.Desktop;component/Skins/Fonts/#Lato</FontFamily>
77
<FontFamily x:Key="OryxFontFamily">/InvvardDev.EZLayoutDisplay.Desktop;component/Skins/Fonts/#Oryx</FontFamily>
88

9+
<SolidColorBrush x:Key="KeyLabelForeground" Color="#323546" />
910
<SolidColorBrush x:Key="DefaultBackgroundBrush" Color="#FFFFFF" />
1011
<SolidColorBrush x:Key="ColorControlBackgroundBrush" Color="#FFF1BA" />
1112
<SolidColorBrush x:Key="CustomLabelBackgroundBrush" Color="#FFBFA3" />
1213
<SolidColorBrush x:Key="DualFunctionBackgroundBrush" Color="#E1EBFF" />
1314
<SolidColorBrush x:Key="MacroBackgroundBrush" Color="#E0DBFF" />
1415
<SolidColorBrush x:Key="ModifierBackgroundBrush" Color="#EBFFE1" />
1516

16-
<SolidColorBrush x:Key="TopDefaultBackgroundBrush" Color="#fcfcfc" />
17-
<SolidColorBrush x:Key="TopDualFunctionBackgroundBrush" Color="#e1ebff" />
18-
<SolidColorBrush x:Key="TopModifierBackgroundBrush" Color="#ebffe1" />
19-
2017
<converter:KeyCategoryToBrushConverter x:Key="KeyCategoryToBrushConverter"
2118
DefaultBackgroundBrush="{StaticResource DefaultBackgroundBrush}"
2219
ColorControlBackgroundBrush="{StaticResource ColorControlBackgroundBrush}"
2320
CustomLabelBackgroundBrush="{StaticResource CustomLabelBackgroundBrush}"
2421
DualFunctionBackgroundBrush="{StaticResource DualFunctionBackgroundBrush}"
2522
MacroBackgroundBrush="{StaticResource MacroBackgroundBrush}"
2623
ModifierBackgroundBrush="{StaticResource ModifierBackgroundBrush}"/>
27-
28-
<converter:KeyCategoryToBrushConverter x:Key="KeyCategoryToTopBrushConverter"
29-
DefaultBackgroundBrush="{StaticResource TopDefaultBackgroundBrush}"
30-
DualFunctionBackgroundBrush="{StaticResource TopDualFunctionBackgroundBrush}"
31-
ModifierBackgroundBrush="{StaticResource TopModifierBackgroundBrush}" />
3224

33-
<SolidColorBrush x:Key="KeyBaseBorderColorBrush" Color="#c7c7c7" />
34-
<SolidColorBrush x:Key="KeyTopBorderColorBrush" Color="#1affffff" />
25+
<SolidColorBrush x:Key="KeyBorderColorBrush" Color="#c7c7c7" />
3526

3627
<Style TargetType="Rectangle" x:Key="BaseKey">
3728
<Setter Property="StrokeThickness" Value="1" />
@@ -48,66 +39,56 @@
4839
<Style TargetType="Rectangle" BasedOn="{StaticResource BaseKey}" x:Key="KeyBase">
4940
<Setter Property="RadiusX" Value="5" />
5041
<Setter Property="RadiusY" Value="5" />
51-
<Setter Property="Fill" Value="{Binding Key.KeyCategory, Converter={StaticResource KeyCategoryToBrushConverter}}" />
52-
<Setter Property="Stroke" Value="{StaticResource KeyBaseBorderColorBrush}" />
42+
<Setter Property="Fill" Value="{Binding Key.DisplayMode, Converter={StaticResource KeyCategoryToBrushConverter}}" />
43+
<Setter Property="Stroke" Value="{StaticResource KeyBorderColorBrush}" />
5344
<Setter Property="Canvas.Top" Value="{Binding BaseKeyY}" />
5445
<Setter Property="Canvas.Left" Value="{Binding BaseKeyX}" />
5546
<Setter Property="Height" Value="{Binding BaseKeyHeight}" />
5647
<Setter Property="Width" Value="{Binding BaseKeyWidth}" />
5748
</Style>
5849

59-
<Style TargetType="Rectangle" BasedOn="{StaticResource BaseKey}" x:Key="KeyTop">
60-
<Setter Property="RadiusX" Value="3" />
61-
<Setter Property="RadiusY" Value="3" />
62-
<Setter Property="Fill" Value="{Binding EZKey.KeyCategory, Converter={StaticResource KeyCategoryToTopBrushConverter}}" />
63-
<Setter Property="Stroke" Value="{StaticResource KeyTopBorderColorBrush}" />
64-
<Setter Property="Canvas.Top" Value="{Binding TopKeyY}" />
65-
<Setter Property="Canvas.Left" Value="{Binding TopKeyX}" />
66-
<Setter Property="Height" Value="{Binding TopKeyHeight}" />
67-
<Setter Property="Width" Value="{Binding TopKeyWidth}" />
50+
<Style TargetType="Label" x:Key="BaseLabelStyle">
51+
<Setter Property="Padding" Value="2 0" />
52+
<Setter Property="Foreground" Value="{StaticResource KeyLabelForeground}" />
53+
</Style>
54+
55+
<Style TargetType="Label" x:Key="LabelStyle" BasedOn="{StaticResource BaseLabelStyle}">
56+
<Setter Property="FontFamily" Value="{StaticResource LatoFontFamily}" />
57+
<Setter Property="FontSize" Value="22" />
6858
</Style>
6959

70-
<Style TargetType="Label" x:Key="LabelStyle">
71-
<Style.Triggers>
72-
<DataTrigger Binding="{Binding EZKey.Primary.Content.IsGlyph}" Value="true">
73-
<Setter Property="FontFamily" Value="{StaticResource OryxFontFamily}" />
74-
<Setter Property="FontSize" Value="18" />
75-
<Setter Property="Foreground" Value="{Binding EZKey.Color}" />
76-
</DataTrigger>
77-
<DataTrigger Binding="{Binding EZKey.Primary.Content.IsGlyph}" Value="false">
78-
<Setter Property="FontFamily" Value="{StaticResource LatoFontFamily}" />
79-
<Setter Property="FontSize" Value="22" />
80-
<Setter Property="FontWeight" Value="Bold" />
81-
<Setter Property="Foreground" Value="{Binding EZKey.Color}" />
82-
</DataTrigger>
83-
</Style.Triggers>
60+
<Style TargetType="Label" x:Key="GlyphStyle" BasedOn="{StaticResource BaseLabelStyle}">
61+
<Setter Property="FontFamily" Value="{StaticResource OryxFontFamily}" />
62+
<Setter Property="FontSize" Value="18" />
8463
</Style>
8564

86-
<DataTemplate x:Key="KeyBaseDataTemplate">
65+
<DataTemplate x:Key="KeyDataTemplate">
8766
<Canvas>
88-
<Rectangle x:Name="KeyBaseRect" Style="{DynamicResource KeyBase}" />
89-
<Rectangle x:Name="KeyTopRect" Style="{DynamicResource KeyTop}" />
67+
<Rectangle x:Name="KeyRect" Style="{DynamicResource KeyBase}" />
9068
</Canvas>
9169
</DataTemplate>
9270

93-
<Style TargetType="TextBlock" x:Key="PrimaryTag">
71+
<Style TargetType="TextBlock" x:Key="BaseTag">
9472
<Setter Property="FontSize" Value="10" />
95-
<Setter Property="HorizontalAlignment" Value="Right" />
73+
<Setter Property="Foreground" Value="{StaticResource KeyLabelForeground}" />
9674
<Setter Property="Margin" Value="0 -2 2 0" />
75+
<Setter Property="Canvas.Right" Value="0" />
9776
</Style>
9877

99-
<Style TargetType="TextBlock" x:Key="SecondaryTag">
100-
<Setter Property="FontSize" Value="10" />
101-
<Setter Property="HorizontalAlignment" Value="Right" />
102-
<Setter Property="VerticalAlignment" Value="Bottom" />
103-
<Setter Property="Margin" Value="0 -2 2 0" />
78+
<Style TargetType="TextBlock" x:Key="PrimaryTag" BasedOn="{StaticResource BaseTag}">
79+
<Setter Property="Canvas.Top" Value="0" />
80+
</Style>
81+
82+
<Style TargetType="TextBlock" x:Key="SecondaryTag" BasedOn="{StaticResource BaseTag}">
83+
<Setter Property="Canvas.Bottom" Value="0" />
10484
</Style>
10585

10686
<Style TargetType="Viewbox" x:Key="LabelViewBox">
10787
<Setter Property="Height" Value="30" />
108-
<Setter Property="Margin" Value="3 0" />
88+
<Setter Property="Margin" Value="1 0" />
10989
<Setter Property="Stretch" Value="Uniform" />
11090
<Setter Property="StretchDirection" Value="Both" />
91+
<Setter Property="VerticalAlignment" Value="Center" />
11192
</Style>
11293

11394
<Style TargetType="Viewbox" x:Key="ModifierViewBox" BasedOn="{StaticResource LabelViewBox}">
@@ -129,66 +110,75 @@
129110
</Setter>
130111
</Style>
131112

132-
<DataTemplate x:Key="CustomLabelDataTemplate">
133-
<Canvas>
134-
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource KeyBaseDataTemplate}" />
135-
<Grid Style="{StaticResource ContentGridBase}">
136-
<Viewbox Style="{StaticResource LabelViewBox}" Grid.Column="0" Grid.Row="0">
137-
<Label Style="{StaticResource LabelStyle}" Content="{Binding EZKey.Primary.Content.Label}" />
138-
</Viewbox>
139-
</Grid>
140-
</Canvas>
113+
<DataTemplate x:Key="SimpleLabelDataTemplate">
114+
<Viewbox Style="{StaticResource LabelViewBox}">
115+
<Label Style="{StaticResource LabelStyle}" Content="{Binding Label}" />
116+
</Viewbox>
117+
</DataTemplate>
118+
119+
<DataTemplate x:Key="GlyphDataTemplate">
120+
<Viewbox Style="{StaticResource LabelViewBox}">
121+
<Label Style="{StaticResource GlyphStyle}" Content="{Binding Label}" />
122+
</Viewbox>
141123
</DataTemplate>
142124

125+
<DataTemplate x:Key="ModdedGlyphDataTemplate">
126+
<Viewbox Style="{StaticResource LabelViewBox}">
127+
<Label Style="{StaticResource GlyphStyle}" Content="{Binding Label}" />
128+
</Viewbox>
129+
</DataTemplate>
130+
131+
<DataTemplate x:Key="LayerDataTemplate">
132+
<Viewbox Style="{StaticResource LabelViewBox}">
133+
<Label Style="{StaticResource GlyphStyle}" Content="{Binding Label}" />
134+
</Viewbox>
135+
</DataTemplate>
136+
137+
<DataTemplate x:Key="ColorPickerDataTemplate">
138+
<Viewbox Style="{StaticResource LabelViewBox}">
139+
<Label Style="{StaticResource GlyphStyle}" Content="{Binding Label}" />
140+
</Viewbox>
141+
</DataTemplate>
142+
143+
<helper:KeyFeatureTemplateSelector x:Key="KeyFeatureTemplateSelector"
144+
SimpleLabelDataTemplate = "{StaticResource SimpleLabelDataTemplate}"
145+
GlyphDataTemplate = "{StaticResource GlyphDataTemplate}"
146+
ModdedGlyphDataTemplate = "{StaticResource ModdedGlyphDataTemplate}"
147+
LayerDataTemplate = "{StaticResource LayerDataTemplate}"
148+
ColorPickerDataTemplate = "{StaticResource ColorPickerDataTemplate}" />
149+
143150
<DataTemplate x:Key="SingleFeatureDataTemplate">
144151
<Canvas>
145-
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource KeyBaseDataTemplate}" />
152+
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource KeyDataTemplate}" />
146153
<Grid Style="{StaticResource ContentGridBase}">
147-
<Grid.RowDefinitions>
148-
<RowDefinition Height=".6*"/>
149-
<RowDefinition/>
150-
</Grid.RowDefinitions>
151-
<Viewbox Style="{StaticResource ModifierViewBox}" VerticalAlignment="Bottom" Grid.Column="0" Grid.Row="0">
152-
<Label Style="{StaticResource LabelStyle}" Content="{Binding EZKey.Primary.Modifier}" />
153-
</Viewbox>
154-
<Viewbox Style="{StaticResource LabelViewBox}" VerticalAlignment="Top" Grid.Column="0" Grid.Row="1">
155-
<Label Style="{StaticResource LabelStyle}" Content="{Binding EZKey.Primary.Content.Label}" />
156-
</Viewbox>
154+
<TextBlock Style="{StaticResource PrimaryTag}" Text="{Binding Key.Primary.Tag}" />
155+
<ContentControl ContentTemplateSelector="{StaticResource KeyFeatureTemplateSelector}" Content="{Binding Key.Primary}" />
157156
</Grid>
158157
</Canvas>
159158
</DataTemplate>
160159

161160
<DataTemplate x:Key="DoubleFeatureDataTemplate">
162161
<Canvas>
163-
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource KeyBaseDataTemplate}" />
162+
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource KeyDataTemplate}" />
164163
<Grid Style="{StaticResource ContentGridBase}">
165164
<Grid.RowDefinitions>
166-
<RowDefinition Height=".5*"/>
167-
<RowDefinition Height="1*"/>
168-
<RowDefinition Height=".5*"/>
169-
<RowDefinition Height="1*"/>
165+
<RowDefinition Height="*"/>
166+
<RowDefinition Height="*"/>
170167
</Grid.RowDefinitions>
171-
<TextBlock Style="{StaticResource PrimaryTag}" Text="{Binding EZKey.Primary.Tag}" />
172-
<TextBlock Style="{StaticResource SecondaryTag}" Text="{Binding EZKey.Secondary.Tag}" />
173-
174-
<Viewbox Style="{StaticResource ModifierViewBox}" Grid.Column="0" Grid.Row="0">
175-
<Label Style="{StaticResource LabelStyle}" Content="{Binding EZKey.Primary.Modifier}" />
176-
</Viewbox>
177-
<Viewbox Style="{StaticResource LabelViewBox}" Grid.Column="0" Grid.Row="1">
178-
<Label Style="{StaticResource LabelStyle}" Content="{Binding EZKey.Primary.Content.Label}" />
179-
</Viewbox>
180-
<Viewbox Style="{StaticResource ModifierViewBox}" Grid.Column="0" Grid.Row="2">
181-
<Label Style="{StaticResource LabelStyle}" Content="{Binding EZKey.Secondary.Modifier}" />
182-
</Viewbox>
183-
<Viewbox Style="{StaticResource LabelViewBox}" Grid.Column="0" Grid.Row="3">
184-
<Label Style="{StaticResource LabelStyle}" Content="{Binding EZKey.Secondary.Content.Label}" />
185-
</Viewbox>
168+
<TextBlock Style="{StaticResource PrimaryTag}" Text="{Binding Key.Primary.Tag}" />
169+
<TextBlock Style="{StaticResource SecondaryTag}" Text="{Binding Key.Secondary.Tag}" />
170+
171+
<ContentControl ContentTemplateSelector="{StaticResource KeyFeatureTemplateSelector}"
172+
Content="{Binding Key.Primary}"
173+
Grid.Column="0" Grid.Row="0"/>
174+
<ContentControl ContentTemplateSelector="{StaticResource KeyFeatureTemplateSelector}"
175+
Content="{Binding Key.Secondary}"
176+
Grid.Column="0" Grid.Row="1"/>
186177
</Grid>
187178
</Canvas>
188179
</DataTemplate>
189180

190181
<helper:KeyContentTemplateSelector x:Key="KeyContentTemplateSelector"
191-
CustomLabelDataTemplate="{StaticResource CustomLabelDataTemplate}"
192182
SingleFeatureDataTemplate="{StaticResource SingleFeatureDataTemplate}"
193183
DoubleFeatureDataTemplate="{StaticResource DoubleFeatureDataTemplate}" />
194184

0 commit comments

Comments
 (0)