microsoft/microsoft-ui-xaml

CheckBox & RadioButton labels become off-center when text scaling >= ~150%.

Open

#1,520 opened on Oct 31, 2019

View on GitHub
 (30 comments) (2 reactions) (0 assignees)C# (5,815 stars) (659 forks)batch import
area-UIDesignbuggood first issuehelp wantedteam-Controls

Description

Describe the bug The built-in text labels for both the CheckBox and RadioButton controls gradually gets more and more off center as the system's text scaling % increases.

Steps to reproduce the bug

  1. Set text scaling to 150% or higher
  2. Open the XAML Controls Gallery
  3. View any of the CheckBox or RadioButton controls

Expected behavior The text labels should remain aligned.

Screenshots Annotation 2019-10-31 100209

Version Info

XAML Controls Gallery version 1.2.10.0

Windows 10 version Saw the problem?
Insider Build (xxxxx)
May 2019 Update (18362) Yes
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)
Device form factor Saw the problem?
Desktop Yes/No?
Mobile
Xbox
Surface Hub
IoT

Additional context

Contributor guide

Tech stack
csharp
Domain
frontendaccessibility
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
WinUI/C#XAMLUI layout concepts
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the default control templates for CheckBox and RadioButton in the WinUI repository, specifically the Grid layout that positions the ContentPresenter. Check how system text scaling (DPI) affects alignment by reviewing layout calculations or hardcoded offsets. The fix likely involves adjusting the template to respect text scaling. The issue comments may provide hints about previous attempts.