UI Scaling Feature for UX Enhancement

Accessibility feature for vision and visibility enhancement: dynamically scalable interface layout via menu option.

Figure:Original scale left, 2x scale right; size of window is constant.

View Source:

I consider inclusivity of usability an important UX feature facilitated by specific UI implementations. The ability to increase or decrease the scale of specific components or the entirety of an interface can make it easier for certain users to operate visual components, and can sometimes even preclude the need for external magnification mechanisms. An ancillary benefit is the provision of an application-localized alternative to screen resolution adjustment. This post details a simple but effective implementation in csharp WPF that enables the proportional scaling of an interface without breaking layout constraints.

The basis of this implementation involves controlling a ScaleTransform object set as the LayoutTransform on the root element of the UI. The ScaleX and ScaleY properties of the LayoutTransform can be bound to a single DependencyProperty, enabling the scale to be changed proportionally; setting additional bindings on interface controls to the same DependencyProperty enables control-based scaling. The result is a cleanly de-coupled solution that works for both MVVM and Control definitions.

<ControlTemplate TargetType="{x:Type local:ColorSelector}">
	<Grid>
		<Grid.LayoutTransform>
			<ScaleTransform ScaleX="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:ColorSelector}}, Path=ApplicationScale, Mode=OneWay}" ScaleY="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:ColorSelector}}, Path=ApplicationScale, Mode=OneWay}" />
		</Grid.LayoutTransform>
		<Grid Background="{TemplateBinding Background}" x:Name="mainInterface">
		
		...
		
		</Grid>
		
		...
		
	<Grid>
</ControlTemplate>

Source:Themes/Generic.xaml

public static readonly DependencyProperty ApplicationScaleProperty =
	DependencyProperty.Register(nameof(ApplicationScale), typeof(double), typeof(ColorSelector), new PropertyMetadata(1.0));

public double ApplicationScale
{
	get { return (double)GetValue(ApplicationScaleProperty); }
	set { SetValue(ApplicationScaleProperty, value); }
}

Source:ColorSelector.cs

Attached is an image showing the scaling mechanism at work; the scaled interface maintains its layout properties while increasing both the legibility of text and surface area of controls.