Skip to content

Commit 8e46ade

Browse files
apmanapman
authored
Indicate inactive window by switching accent colour items to a subdued look (#36)
1 parent c26d13c commit 8e46ade

File tree

9 files changed

+255
-77
lines changed

9 files changed

+255
-77
lines changed

‎samples/SampleApp/MainWindow.axaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
<TabItem Header="TreeView">
6262
<demoPages:TreeViewDemo />
6363
</TabItem>
64-
<TabItem Header="ToolTip" IsSelected="True">
64+
<TabItem Header="ToolTip">
6565
<demoPages:ToolTipDemo />
6666
</TabItem>
6767

‎src/MacOS.Avalonia.Theme/Accents/ThemeResources.axaml

+60-50
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828

2929
<Color x:Key="DefaultIconColor">#000000</Color>
3030

31+
<Color x:Key="TransparentColor">Transparent</Color>
32+
3133
<SolidColorBrush x:Key="BackgroundBrush" Color="{DynamicResource BackgroundColor}" Opacity="1" />
3234

3335
<SolidColorBrush x:Key="ForegroundHighMidBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.73" />
@@ -58,9 +60,7 @@
5860
<BoxShadows x:Key="ComboBoxDisabledBoxShadow">0 0.5 2.5 0 #26000000, 0 0 0 0.5 #08000000</BoxShadows>
5961
<BoxShadows x:Key="ToolTipBorderShadow">0 0 1 0 #66000000, 0 7 17 0 #30000000</BoxShadows>
6062
<Thickness x:Key="ButtonBorderThickness">0.6 0.6 0.6 1</Thickness>
61-
<Thickness x:Key="ButtonBorderAccentThickness">0</Thickness>
6263
<Thickness x:Key="ControlBorderThickness">0.6</Thickness>
63-
<Thickness x:Key="ControlBorderAccentThickness">0</Thickness>
6464
<Thickness x:Key="TabControlBorderThickness">0 0.6 0 0</Thickness>
6565
<Thickness x:Key="ToolTipBorderThickness">0</Thickness>
6666

@@ -75,28 +75,19 @@
7575
<SolidColorBrush x:Key="DataGridItemBackgroundAlternating"
7676
Color="{DynamicResource ForegroundColor}" Opacity="0.04" />
7777

78-
<LinearGradientBrush x:Key="ControlBackgroundRecessedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
79-
<GradientStop Offset="0" Color="{DynamicResource ControlBorderLowColor}" />
80-
<GradientStop Offset="1" Color="{DynamicResource ControlBorderMidColor}" />
81-
</LinearGradientBrush>
82-
83-
<LinearGradientBrush x:Key="ControlBorderRaisedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
84-
<GradientStop Offset="0" Color="{DynamicResource ControlBorderLowColor}" />
85-
<GradientStop Offset="1" Color="{DynamicResource ControlBorderMidColor}" />
86-
</LinearGradientBrush>
87-
<LinearGradientBrush x:Key="ControlBorderRecessedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
88-
<GradientStop Offset="0" Color="{DynamicResource ControlBorderMidColor}" />
89-
<GradientStop Offset="1" Color="{DynamicResource ControlBorderLowColor}" />
90-
</LinearGradientBrush>
91-
92-
<LinearGradientBrush x:Key="ControlBackgroundAccentRaisedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
93-
<GradientStop Offset="0" Color="{StaticResource SystemAccentColorLight1}" />
94-
<GradientStop Offset="1" Color="{StaticResource SystemAccentColor}" />
95-
</LinearGradientBrush>
96-
<LinearGradientBrush x:Key="ControlBackgroundAccentRecessedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
97-
<GradientStop Offset="0" Color="{StaticResource SystemAccentColor}" />
98-
<GradientStop Offset="1" Color="{StaticResource SystemAccentColorDark1}" />
99-
</LinearGradientBrush>
78+
<StaticResource x:Key="ControlBorderRaisedTopColor" ResourceKey="ControlBorderLowColor" />
79+
<StaticResource x:Key="ControlBorderRaisedBottomColor" ResourceKey="ControlBorderMidColor" />
80+
81+
<StaticResource x:Key="ControlBorderRecessedTopColor" ResourceKey="ControlBorderMidColor" />
82+
<StaticResource x:Key="ControlBorderRecessedBottomColor" ResourceKey="ControlBorderLowColor" />
83+
84+
<StaticResource x:Key="AccentButtonTopColor" ResourceKey="SystemAccentColorLight1" />
85+
<StaticResource x:Key="AccentButtonBottomColor" ResourceKey="SystemAccentColor" />
86+
87+
<StaticResource x:Key="ControlBackgroundAccentRecessedTopColor" ResourceKey="SystemAccentColor" />
88+
<StaticResource x:Key="ControlBackgroundAccentRecessedBottomColor" ResourceKey="SystemAccentColorDark1" />
89+
90+
<StaticResource x:Key="ControlBorderAccentColor" ResourceKey="TransparentColor" />
10091

10192
<StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="TransparentBrush" />
10293
<Thickness x:Key="MenuFlyoutPresenterBorderThickness">0</Thickness>
@@ -166,10 +157,9 @@
166157
<BoxShadows x:Key="ComboBoxDisabledBoxShadow">0 0.5 2.5 0 #26ffffff, 0 0 0 0.5 #08ffffff</BoxShadows>
167158
<BoxShadows x:Key="ToolTipBorderShadow">0 0 1 0 #ff000000</BoxShadows>
168159

169-
<Thickness x:Key="ButtonBorderThickness">0.6 1 0.6 0</Thickness>
160+
<Thickness x:Key="ButtonBorderThickness">0 1 0 0</Thickness>
170161
<Thickness x:Key="ButtonBorderAccentThickness">0 1 0 0</Thickness>
171162
<Thickness x:Key="ControlBorderThickness">0 0.6 0 0</Thickness>
172-
<Thickness x:Key="ControlBorderAccentThickness">0 0.6 0 0</Thickness>
173163
<Thickness x:Key="TabControlBorderThickness">0 0.6 0 0.6</Thickness>
174164
<Thickness x:Key="ToolTipBorderThickness">0.6</Thickness>
175165

@@ -182,28 +172,19 @@
182172
<SolidColorBrush x:Key="DataGridItemBackgroundAlternating"
183173
Color="{DynamicResource ForegroundColor}" Opacity="0.05" />
184174

185-
<LinearGradientBrush x:Key="ControlBackgroundRecessedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
186-
<GradientStop Offset="0" Color="{DynamicResource ControlBorderLowColor}" />
187-
<GradientStop Offset="1" Color="{DynamicResource ControlBorderMidColor}" />
188-
</LinearGradientBrush>
189-
190-
<LinearGradientBrush x:Key="ControlBorderRaisedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
191-
<GradientStop Offset="0" Color="{DynamicResource ControlBorderMidColor}" />
192-
<GradientStop Offset="1" Color="{DynamicResource ControlBorderLowColor}" />
193-
</LinearGradientBrush>
194-
<LinearGradientBrush x:Key="ControlBorderRecessedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
195-
<GradientStop Offset="0" Color="{DynamicResource ControlBorderLowColor}" />
196-
<GradientStop Offset="1" Color="{DynamicResource ControlBorderMidColor}" />
197-
</LinearGradientBrush>
198-
199-
<LinearGradientBrush x:Key="ControlBackgroundAccentRaisedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
200-
<GradientStop Offset="0" Color="{StaticResource SystemAccentColor}" />
201-
<GradientStop Offset="1" Color="{StaticResource SystemAccentColorDark1}" />
202-
</LinearGradientBrush>
203-
<LinearGradientBrush x:Key="ControlBackgroundAccentRecessedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
204-
<GradientStop Offset="0" Color="{StaticResource SystemAccentColorLight1}" />
205-
<GradientStop Offset="1" Color="{StaticResource SystemAccentColor}" />
206-
</LinearGradientBrush>
175+
<StaticResource x:Key="ControlBorderRaisedTopColor" ResourceKey="ControlBorderMidColor" />
176+
<StaticResource x:Key="ControlBorderRaisedBottomColor" ResourceKey="ControlBorderLowColor" />
177+
178+
<StaticResource x:Key="ControlBorderRecessedTopColor" ResourceKey="ControlBorderLowColor" />
179+
<StaticResource x:Key="ControlBorderRecessedBottomColor" ResourceKey="ControlBorderMidColor" />
180+
181+
<StaticResource x:Key="AccentButtonTopColor" ResourceKey="SystemAccentColor" />
182+
<StaticResource x:Key="AccentButtonBottomColor" ResourceKey="SystemAccentColorDark1" />
183+
184+
<StaticResource x:Key="ControlBackgroundAccentRecessedTopColor" ResourceKey="SystemAccentColorLight1" />
185+
<StaticResource x:Key="ControlBackgroundAccentRecessedBottomColor" ResourceKey="SystemAccentColor" />
186+
187+
<StaticResource x:Key="ControlBorderAccentColor" ResourceKey="SystemAccentColorLight1" />
207188

208189
<StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="ControlBorderBrush" />
209190
<Thickness x:Key="MenuFlyoutPresenterBorderThickness">1</Thickness>
@@ -220,6 +201,31 @@
220201

221202
<!-- TODO: Appkit buttons have DD at the bottom, EE at the top & fading -> try sub-pixel rendering (UseLayoutRounding) (s. `default button issues.psd` ... -->
222203

204+
<LinearGradientBrush x:Key="ControlBackgroundRecessedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
205+
<GradientStop Offset="0" Color="{DynamicResource ControlBorderLowColor}" />
206+
<GradientStop Offset="1" Color="{DynamicResource ControlBorderMidColor}" />
207+
</LinearGradientBrush>
208+
209+
<LinearGradientBrush x:Key="ControlBackgroundAccentRaisedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
210+
<GradientStop Offset="0" Color="{DynamicResource AccentButtonTopColor}" />
211+
<GradientStop Offset="1" Color="{DynamicResource AccentButtonBottomColor}" />
212+
</LinearGradientBrush>
213+
214+
<LinearGradientBrush x:Key="ButtonBackgroundAccentRecessedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
215+
<GradientStop Offset="0" Color="{DynamicResource ControlBackgroundAccentRecessedTopColor}" />
216+
<GradientStop Offset="1" Color="{DynamicResource ControlBackgroundAccentRecessedBottomColor}" />
217+
</LinearGradientBrush>
218+
219+
<LinearGradientBrush x:Key="ControlBorderRaisedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
220+
<GradientStop Offset="0" Color="{DynamicResource ControlBorderRaisedTopColor}" />
221+
<GradientStop Offset="1" Color="{DynamicResource ControlBorderRaisedBottomColor}" />
222+
</LinearGradientBrush>
223+
224+
<LinearGradientBrush x:Key="ControlBorderRecessedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
225+
<GradientStop Offset="0" Color="{DynamicResource ControlBorderRecessedTopColor}" />
226+
<GradientStop Offset="1" Color="{DynamicResource ControlBorderRecessedBottomColor}" />
227+
</LinearGradientBrush>
228+
223229
<CornerRadius x:Key="LayoutCornerRadius">5</CornerRadius>
224230
<CornerRadius x:Key="ControlCornerRadius">5</CornerRadius>
225231
<CornerRadius x:Key="SelectionCornerRadius">4</CornerRadius>
@@ -236,7 +242,11 @@
236242
<SolidColorBrush x:Key="ForegroundMidLowBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.34" />
237243
<!-- <SolidColorBrush x:Key="ForegroundLowBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.25" /> -->
238244

245+
<SolidColorBrush x:Key="SelectionInActiveWindow" Color="{DynamicResource ForegroundColor}" Opacity="0.15" />
246+
239247
<SolidColorBrush x:Key="ControlForegroundAccentHighBrush" Color="{DynamicResource AccentForegroundColor}" />
248+
<SolidColorBrush x:Key="ControlForegroundAccentInactiveHighBrush" Color="{DynamicResource ForegroundColor}"
249+
Opacity="0.85" />
240250

241251
<SolidColorBrush x:Key="ControlBackgroundHighBrush" Color="{DynamicResource ControlBackgroundHighColor}" />
242252
<SolidColorBrush x:Key="ControlBackgroundMidBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.1" />
@@ -245,7 +255,7 @@
245255
<SolidColorBrush x:Key="ControlBackgroundAccentHighBrush" Color="{StaticResource SystemAccentColor}" />
246256
<SolidColorBrush x:Key="ControlBackgroundAccentMidBrush" Color="{StaticResource SystemAccentColor}" Opacity="0.63" />
247257

248-
<SolidColorBrush x:Key="ControlBorderAccentBrush" Color="{DynamicResource SystemAccentColorLight1}" />
258+
<SolidColorBrush x:Key="ControlBorderAccentBrush" Color="{DynamicResource ControlBorderAccentColor}" />
249259

250260
<BoxShadows x:Key="ControlBackgroundRaisedShadow">2 2 3 -2 #bfbfbf</BoxShadows>
251261

@@ -257,7 +267,7 @@
257267
<!-- Button Resources (& button-like parts of other controls) -->
258268
<Thickness x:Key="ButtonPadding">10 1.4 10 2.6</Thickness>
259269
<FontWeight x:Key="ButtonFontWeight">400</FontWeight>
260-
<SolidColorBrush x:Key="ButtonBorderAccentBrush" Color="{DynamicResource SystemAccentColorLight1}" />
270+
<SolidColorBrush x:Key="ButtonBorderAccentBrush" Color="{DynamicResource ControlBorderAccentColor}" />
261271

262272
<!-- TODO: To be replaced by templated button control (accent colour with hard-coded gradient overlay) -->
263273
<VisualBrush x:Key="TempButtonAccentBackgroundPrecise" Stretch="Fill">

‎src/MacOS.Avalonia.Theme/Controls/Button.axaml

+28-5
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,35 @@
3636
</Style>
3737

3838
<Style Selector="^.accent">
39-
<Setter Property="Background" Value="{DynamicResource ControlBackgroundAccentRaisedBrush}" />
40-
<Setter Property="Foreground" Value="{DynamicResource ControlForegroundAccentHighBrush}" />
41-
<Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderAccentBrush}" />
42-
<Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderAccentThickness}" />
39+
<Setter Property="Background">
40+
<Setter.Value>
41+
<MultiBinding Converter="{StaticResource BooleanToChoiceConverter}">
42+
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Window}" Path="IsActive" />
43+
<Binding Source="{StaticResource ControlBackgroundAccentRaisedBrush}" />
44+
<Binding Source="{StaticResource ControlBackgroundHighBrush}" />
45+
</MultiBinding>
46+
</Setter.Value>
47+
</Setter>
48+
<Setter Property="Foreground">
49+
<Setter.Value>
50+
<MultiBinding Converter="{StaticResource BooleanToChoiceConverter}">
51+
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Window}" Path="IsActive" />
52+
<Binding Source="{StaticResource ControlForegroundAccentHighBrush}" />
53+
<Binding Source="{StaticResource ForegroundHighBrush}" />
54+
</MultiBinding>
55+
</Setter.Value>
56+
</Setter>
57+
<Setter Property="BorderBrush">
58+
<Setter.Value>
59+
<MultiBinding Converter="{StaticResource BooleanToChoiceConverter}">
60+
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Window}" Path="IsActive" />
61+
<Binding Source="{StaticResource ButtonBorderAccentBrush}" />
62+
<Binding Source="{StaticResource ControlBorderRaisedBrush}" />
63+
</MultiBinding>
64+
</Setter.Value>
65+
</Setter>
4366
<Style Selector="^:pressed">
44-
<Setter Property="Background" Value="{DynamicResource ControlBackgroundAccentRecessedBrush}" />
67+
<Setter Property="Background" Value="{DynamicResource ButtonBackgroundAccentRecessedBrush}" />
4568
</Style>
4669
<Style Selector="^:disabled">
4770
<Setter Property="Foreground" Value="{DynamicResource ForegroundLowBrush}" />

‎src/MacOS.Avalonia.Theme/Controls/CheckBox.axaml

+55-10
Original file line numberDiff line numberDiff line change
@@ -60,16 +60,31 @@
6060
HorizontalAlignment="Center"
6161
VerticalAlignment="Center"
6262
Data="{DynamicResource CheckMarkPath}"
63-
Fill="{DynamicResource AccentForegroundColor}"
6463
FlowDirection="LeftToRight"
65-
Stretch="Fill" />
64+
Stretch="Fill">
65+
<Path.Fill>
66+
<MultiBinding Converter="{StaticResource BooleanToChoiceConverter}">
67+
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Window}" Path="IsActive" />
68+
<Binding Source="{StaticResource ControlForegroundAccentHighBrush}" />
69+
<Binding Source="{StaticResource ControlForegroundAccentInactiveHighBrush}" />
70+
</MultiBinding>
71+
</Path.Fill>
72+
</Path>
6673
<Rectangle Name="indeterminateMark"
6774
Width="8"
6875
Height="2"
6976
HorizontalAlignment="Center"
7077
VerticalAlignment="Center"
71-
Fill="{DynamicResource AccentForegroundColor}"
72-
Stretch="Uniform" />
78+
79+
Stretch="Uniform">
80+
<Rectangle.Fill>
81+
<MultiBinding Converter="{StaticResource BooleanToChoiceConverter}">
82+
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Window}" Path="IsActive" />
83+
<Binding Source="{StaticResource ControlForegroundAccentHighBrush}" />
84+
<Binding Source="{StaticResource ControlForegroundAccentInactiveHighBrush}" />
85+
</MultiBinding>
86+
</Rectangle.Fill>
87+
</Rectangle>
7388
</Panel>
7489
</Border>
7590
<ContentPresenter Name="PART_ContentPresenter"
@@ -94,21 +109,51 @@
94109
<Setter Property="IsVisible" Value="False" />
95110
</Style>
96111
<Style Selector="^:checked">
97-
<Setter Property="Background" Value="{DynamicResource ControlBackgroundAccentRaisedBrush}" />
112+
<Setter Property="Background">
113+
<Setter.Value>
114+
<MultiBinding Converter="{StaticResource BooleanToChoiceConverter}">
115+
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Window}" Path="IsActive" />
116+
<Binding Source="{StaticResource ControlBackgroundAccentRaisedBrush}" />
117+
<Binding Source="{StaticResource ControlBackgroundHighBrush}" />
118+
</MultiBinding>
119+
</Setter.Value>
120+
</Setter>
98121
<Style Selector="^/template/ Border#border">
99-
<Setter Property="BorderBrush" Value="{DynamicResource ControlBorderAccentBrush}" />
100-
<Setter Property="BorderThickness" Value="{DynamicResource ControlBorderAccentThickness}" />
122+
<Setter Property="BorderBrush">
123+
<Setter.Value>
124+
<MultiBinding Converter="{StaticResource BooleanToChoiceConverter}">
125+
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Window}" Path="IsActive" />
126+
<Binding Source="{StaticResource ControlBorderAccentBrush}" />
127+
<Binding Source="{StaticResource ControlBorderBrush}" />
128+
</MultiBinding>
129+
</Setter.Value>
130+
</Setter>
101131
<Setter Property="BoxShadow" Value="0 0 Transparent" /> <!-- TODO: How do you set it to None? -->
102132
</Style>
103133
<Style Selector="^/template/ Path#CheckMark">
104134
<Setter Property="IsVisible" Value="True" />
105135
</Style>
106136
</Style>
107137
<Style Selector="^:indeterminate">
108-
<Setter Property="Background" Value="{DynamicResource ControlBackgroundAccentRaisedBrush}" />
138+
<Setter Property="Background">
139+
<Setter.Value>
140+
<MultiBinding Converter="{StaticResource BooleanToChoiceConverter}">
141+
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Window}" Path="IsActive" />
142+
<Binding Source="{StaticResource ControlBackgroundAccentRaisedBrush}" />
143+
<Binding Source="{StaticResource ControlBackgroundHighBrush}" />
144+
</MultiBinding>
145+
</Setter.Value>
146+
</Setter>
109147
<Style Selector="^/template/ Border#border">
110-
<Setter Property="BorderBrush" Value="{DynamicResource ControlBorderAccentBrush}" />
111-
<Setter Property="BorderThickness" Value="{DynamicResource ControlBorderAccentThickness}" />
148+
<Setter Property="BorderBrush">
149+
<Setter.Value>
150+
<MultiBinding Converter="{StaticResource BooleanToChoiceConverter}">
151+
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Window}" Path="IsActive" />
152+
<Binding Source="{StaticResource ControlBorderAccentBrush}" />
153+
<Binding Source="{StaticResource ControlBorderBrush}" />
154+
</MultiBinding>
155+
</Setter.Value>
156+
</Setter>
112157
<Setter Property="BoxShadow" Value="0 0 Transparent" /> <!-- TODO: How do you set it to None? -->
113158
</Style>
114159
<Style Selector="^/template/ Rectangle#indeterminateMark">

0 commit comments

Comments
 (0)