watfordjc
commented
4 years ago Styles
The first control I have decided to style appears to also be the hardest to get a template for: the tray icon context menu.
The reasons are rather simple:
- It is one container control that has a rather small number of children,
- It is all alone in the window that doesn't visually exist, and,
- It is the context menu for a system tray icon.
That last reason is rather important, in terms of Handle OS settings for high contrast (or another TODO item that might mention dark/light mode). In Windows 10, the default user preference setting for Windows colours is Dark.
Dark (Mode)
Under Personalisation in Windows 10, under Colours, there is the Choose your colour dropdown menu.
At the time of this comment, the following Custom setting is the default (because default app mode is a recent customisation option):
- Choose your default Windows mode
- Dark
- Choose your default app mode
- Light
So, all is good? Other than removing custom colours when High Contrast is enabled, dark mode is just something that can be added later. The windows use the Windows default colours of Light Mode, and if Microsoft were to change the default you would hope they would make it a lot easier to change the default colours in WPF apps. A system-wide dark mode theme would be the obvious option.
Not quite. Point 3 above. What exactly does Windows mean by "default Windows mode"?
Hitting F1 did nothing, let's try Get help and see what Microsoft's robot assistant says...
Personalize your PC by enabling the dark theme
You can change the appearance of your apps (like Mail and Calendar) and Windows interface (which includes the taskbar, Start menu, Action Center, touch keyboard, and more) instantly from light mode to dark mode – great for low-light conditions like working at night or for saving battery power. When you switch your apps or Windows interface to dark mode, they appear with a black background. When in light mode, the background appears white or gray.
To return Windows 10 to default settings:
- Open Settings, then select Personalization. Select Colors, and under "Choose your color", select Custom from the dropdown options. Set "Choose your default Windows mode" to Dark, and "Choose your default app mode" to Light.
Note: The dark theme was added in Windows 10 version 1607. If you don't see these options in Settings, make sure you've installed the latest Windows Updates.
Default Windows mode includes the taskbar. If you look at the context menus for the clock, sound, battery, and network, they are all in dark mode when using the default settings. If I'm going to be looking at styles, it would make sense to start by looking at the one part of my app that doesn't follow the default Personalisation Colour settings.
ContextMenu
I opened Visual Studio Blend for the first time and... you can't easily create a custom ContextMenu control because, well, it disappears from the Live Visual Tree as soon as you try to click it.
This StackOverflow answer was really helpful here as it gave some code that would allow extracting any template:
var str = new StringBuilder();
using (var writer = new StringWriter(str))
XamlWriter.Save(ContextMenu.Template, writer);
Debug.Write(str);Or the version I ended up having due to me not (yet?) seeing the point of var, my tab-complete choices, and the fact I'm using C# 8 (simplified using statements):
StringBuilder stringBuilder = new StringBuilder();
using StringWriter stringWriter = new StringWriter(stringBuilder);
XamlWriter.Save(contextMenu1.Template, stringWriter);
Debug.Write(stringBuilder.ToString());contextMenu1 contained the following, as I wasn't sure if I needed an instance of ContextMenu in order to generate a template that includes a ScrollViewer - something I'd seen mentioned elsewhere whilst searching for a template.
<Grid>
<Button Content="Click Me!">
<Button.ContextMenu>
<ContextMenu x:Name="contextMenu1">
<MenuItem Header="Test" />
<MenuItem Header="Test2">
<MenuItem Header="Test4" />
<MenuItem Header="Test5" IsChecked="True" />
</MenuItem>
</ContextMenu>
</Button.ContextMenu>
</Button>
</Grid>ContextMenu Standard Template
After a bit of copying and pasting in order to turn that single line from the Output window into something readable, and some newline insertions to reduce horizontal scroll and de-tabbing to remove superfluous indenting for a Github code block, I had this:
<ControlTemplate TargetType="ContextMenu"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:s="clr-namespace:System;assembly=System.Private.CoreLib"
xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<mwt:SystemDropShadowChrome Color="#00FFFFFF" Name="Shdw" SnapsToDevicePixels="True">
<Border BorderThickness="{TemplateBinding Border.BorderThickness}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
Name="ContextMenuBorder">
<ScrollViewer Style="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=FrameworkElement, ResourceId=MenuScrollViewer}}"
Name="ContextMenuScrollViewer"
Margin="1,0,1,0"
Grid.ColumnSpan="2">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas Width="0" Height="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Rectangle Fill="{x:Null}" Name="OpaqueRect" Width="Auto" Height="Auto" />
</Canvas>
<Rectangle RadiusX="2" RadiusY="2"
Fill="#FFF1F1F1" Width="28" Margin="1,2,1,2" HorizontalAlignment="Left" />
<Rectangle Fill="#FFE2E3E3" Width="1" Margin="29,2,0,2" HorizontalAlignment="Left" />
<Rectangle Fill="#FFFFFFFF" Width="1" Margin="30,2,0,2" HorizontalAlignment="Left" />
<ItemsPresenter Name="ItemsPresenter" Margin="{TemplateBinding Control.Padding}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</Grid>
</ScrollViewer>
</Border>
</mwt:SystemDropShadowChrome>
<ControlTemplate.Triggers>
<Trigger Property="ContextMenuService.HasDropShadow">
<Setter Property="FrameworkElement.Margin" TargetName="Shdw">
<Setter.Value>
<Thickness>0,0,5,5</Thickness>
</Setter.Value>
</Setter>
<Setter Property="mwt:SystemDropShadowChrome.Color" TargetName="Shdw">
<Setter.Value>
<Color>#71000000</Color>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="ScrollViewer.CanContentScroll" SourceName="ContextMenuScrollViewer">
<Setter Property="Canvas.Top" TargetName="OpaqueRect">
<Setter.Value>
<Binding Path="VerticalOffset" ElementName="ContextMenuScrollViewer" />
</Setter.Value>
</Setter>
<Setter Property="Canvas.Left" TargetName="OpaqueRect">
<Setter.Value>
<Binding Path="HorizontalOffset" ElementName="ContextMenuScrollViewer" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>That has a few errors when pasted into a ResourceDictionary in my program though:
-
Each dictionary entry must have an associated key.
-
Assembly
System.Private.CoreLibwas not found. Verify that you are not missing an assembly reference. Also, verify that your project and all referenced assemblies have been built.-
The name "Boolean" does not exist in the namespace "clr-namespace:System;assembly=System.Private.CoreLib".
-
The type 's:Boolean' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built.
-
For the first error, <ControlTemplate TargetType="ContextMenu" becomes:
<ControlTemplate x:Key="ContextMenuTemplateLight" TargetType="ContextMenu"For the second group of related errors, xmlns:s="clr-namespace:System;assembly=System.Private.CoreLib" becomes:
xmlns:s="clr-namespace:System;assembly=System.Runtime"Finally, all the XML namespaces get merged into the XML document root:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:uk.JohnCook.dotnet.StreamController.Properties"
xmlns:s="clr-namespace:System;assembly=System.Runtime"
xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2">I believe the base ControlTemplate for ContextMenu is now complete, and just needs some customisation.
ContextMenu is just the outer layer of what needs templating. The ContextMenu in question contains MenuItem (with sub-menus) and Separator children, and the /Themes/Aero2.NormalColor.xaml theme suggests styling MenuItem could be complex.
Feature Branch
Feature branch has been merged into master.
Progress
<DataGrid />?ContextMenuthat replaces hard-coded colours with ones derived from the menu's foreground colour.Menu(currently unused) andMenuItemand commit 24ea5b2 made changes to theMenuItemtemplate. Commit 9aade0e moved the colours forMenuandMenuItem, and commit 357ede9 reverted commit 0868f15.GetStyledResourceDictionarymethod so windows can get a collection ofResourceDictionarysuitable for the system Windows/App mode that applies to them.GetStyledResourceDictionaryon startup and apply the relevant light/dark theme to the system tray icon's context menu.StyleofStyledWindowexactly the same as that ofWindowand removed theTemplate/ControlTemplate. Commit 7647a36 migrated all windows fromWindowinheritance toStyledWindowinheritance for future styling work.WindowUtilityLibrary.AccentColor, and commit f0b18e1 replaced that with the better named methodWindowUtilityLibrary.WindowAccentColorthat takes into account there shouldn't be accents in High Contrast mode.[x] Moved: Creating an accessibility options tab/page in the preferences window has been moved to issue #27.
Background
Accessibility. Don't need more background than that.
This needs fixing and continuous reassessment.
Accessibility in Windows 10
Tools
Accessibility Insights for Windows
UIA (User Interface Automation)
WinAppDriver (Windows Application Driver)
AccEvent (Accessible Event Watcher)Inspect Tool (UI Inspect)UIA Verify (UI Automation Verify)