Make UI Accessible (a11y) #4
Comments
StylesThe 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:
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):
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...
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. ContextMenuI opened Visual Studio Blend for the first time and... you can't easily create a custom 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 StringBuilder stringBuilder = new StringBuilder();
using StringWriter stringWriter = new StringWriter(stringBuilder);
XamlWriter.Save(contextMenu1.Template, stringWriter);
Debug.Write(stringBuilder.ToString());
<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 TemplateAfter 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
For the first error, <ControlTemplate x:Key="ContextMenuTemplateLight" TargetType="ContextMenu"For the second group of related errors, 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
|
StylesAs expected,
|
Custom
|
Analysing
|
Attached PropertiesAfter trying to find some way of creating a class that inherits from After playing around with attached properties for a bit, I think I have started working out how I'm going to do things. First, I created a class in CustomControls to contain an attached property. I decided to go with a
As I'd want to change a lot of colours in a lot of places, I then added a second checkbox and attempted to change them simultaneously using a timer. That didn't work, as I'd need to iterate over every object I want to change the attached property's value of. After mulling it over for a bit, I realised they were both inside a
Dark ModeBasing a trigger on a fixed colour is a rather limited exercise, but this is where everything comes together. The I already have two of the things I need to implement dark mode: an enum and some untested methods for the current mode (as well as separation of Windows mode from App mode), and I have a way of getting windows of a certain type. As the system tray
|
Visual TreeThe problem with using attached properties is that a context menu is outside of the visual tree of a window. After a bit of thinking I think I have settled on the following…
|
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.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)The text was updated successfully, but these errors were encountered: