Ugly resizing behavior for SettingsCard Header

[Jay-o-Way]

Describe the bug

• SettingsCardWrapThreshold might never be reached because the minimum width of the window
• there is no minimum width for PART_HeaderPresenter
• HeaderPanel uses <ColumnDefinition Width="*" /> while the other columns use Auto.
• PART_ContentPresenter has no TextWrapping property, the header and description do

Therefore the header will always give way to the content, even if you set wrapping on a textblock in the content. This combination can lead to very ugly resizing behavior.

Steps to reproduce

Use a SettingsCard with a Content with a very long piece of text that doesn't wrap (like a file path). You can set the property directly or with a TextBlock, it doesn't matter. Then resize the window, so that the width decreases. Watch the Header.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="SettingsCard_no_wrapping.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SettingsCard_no_wrapping"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    Title="SettingsCard no wrapping">

    <Window.SystemBackdrop>
        <MicaBackdrop />
    </Window.SystemBackdrop>

    <Grid>
        <!-- SettingsExpander is optional -->
                <controls:SettingsCard Header="Path" Content="C:\Users\Username\Documents\SomeVeryLongFolderNameThatDoesNotWrap\AnotherVeryLongFolderNameThatDoesNotWrap\FinalFolder" />
    </Grid>
</Window>

Expected behavior

Header can shrink, but not be hidden.

Screenshots

Code Platform

• UWP
• WinAppSDK / WinUI 3
• Web Assembly (WASM)
• Android
• iOS
• MacOS
• Linux / GTK

Windows Build Number

• Windows 10 1809 (Build 17763)
• Windows 10 1903 (Build 18362)
• Windows 10 1909 (Build 18363)
• Windows 10 2004 (Build 19041)
• Windows 10 20H2 (Build 19042)
• Windows 10 21H1 (Build 19043)
• Windows 10 21H2 (Build 19044)
• Windows 10 22H2 (Build 19045)
• Windows 11 21H2 (Build 22000)
• Other (specify)

Other Windows Build number

24H2

App minimum and target SDK version

• Windows 10, version 1809 (Build 17763)
• Windows 10, version 1903 (Build 18362)
• Windows 10, version 1909 (Build 18363)
• Windows 10, version 2004 (Build 19041)
• Windows 10, version 2104 (Build 20348)
• Windows 11, version 22H2 (Build 22000)
• Other (specify)

Device form factor

Desktop

Additional context

• Most basic: set a minimum width on the header/column?
• (and/or) Add TextWrapping to PART_ContentPresenter ? But then ColumnWidth * will still always give way to Auto. So it wouldn't fix it.
• Something else?

Help us help you

Yes, but only if others can assist.

[niels9001]

@Jay-o-Way Looking at the GIFs, wouldn't you set TextWrapping to Wrap on the textblocks that are in 'Content'? I think this would only realistically occur when a (long) textblock is used as Content, right?

And do you have repro XAML you can post in the OP?

[Jay-o-Way]

Tried that. Doesn't work. The grid (columnwidth * versus Auto) takes precedence.

[Jay-o-Way]

the textblocks

Why would I use a textblock when I can set text directly, via the property?

[niels9001]

Do you have XAML to repro?

[Jay-o-Way]

Do you have XAML to repro?

@niels9001 Added to main comment 🔝

[niels9001]

Thanks! Does

<controls:SettingsCard Header="Path">
   <TextBlock TextWrapping="Wrap" Text="C:\Users\Username\Documents\SomeVeryLongFolderNameThatDoesNotWrap\AnotherVeryLongFolderNameThatDoesNotWrap\FinalFolder" />
</controls:SettingsCard>

work?

Probably not (without setting a MaxWidth on the TextBlock).

So, I think the ask is how we can ensure that Text(Blocks) wrap correctly when set as Content?

[Jay-o-Way]

Dear @niels9001 as I already mentioned in the top comment, setting a Wrap on the text block is useless because of the Grid in the SettingsCard code: <ColumnDefinition Width="*" /> will ALWAYS give way to Auto.
And again, why focus on textblocks, when text can (also) be set directly as the property?

[niels9001]

Because, I'm 90% sure that what ContentPresenter does is check if the Content is a UIElement, and if so, it'll leave it at that. If it's a string, it will convert it to TextBlock.

That means that

<SettingsCard Content="This is text"/>

will get converterted to:

<SettingsCard>
  <TextBlock Text="This is text"/>
</SettingsCard>

The issue that we are seeing here is that TextWrapping does not work because, unlike most UI elements, a TextBlock will stretch itself and the column width is set to stretch too.

I wonder if we should just add a MaxWidth to the resource overrides, and define something like a SettingsCardMaxTextContentWidth resource that can be overriden through light-weight styling. This would give all the flexibility for a developer, while still having TextWrapping turned on by default if we set that in the ContentPresenter in the template. It is best practices to wrap text anyways after an x amount of characters anyways (there is some guideline somewhere), so it would provide better usability too.

Not sure if it'll work though. @michael-hawker @Arlodotexe other ideas?

[niels9001]

Suffering from the same issue too when it's wrapped in a StackPanel. So yeah, I think the answer for that particular case is to set a MaxWidth on the panel too.

I'm hesitant to touch too much of the core column logic, as we layouting is working great for all other use cases thus far.

[Jay-o-Way]

Because, I'm 90% sure that what ContentPresenter does is check if the Content is a UIElement, and if so, it'll leave it at that. If it's a string, it will convert it to TextBlock.

Got it. https://learn.microsoft.com/dotnet/api/system.windows.controls.contentpresenter?view=windowsdesktop-9.0#remarks shows this.

I wonder if we should just add a MaxWidth

I don't think this is the way to go. A max width would at first apply to all types of content, meaning you'll cut off everything?

...there is some guideline somewhere

Yeah it says approx 60 characters, but that's mostly for paragraphs of text, not this use case.

I'm hesitant to touch too much of the core column logic, as we layouting is working great for all other use cases thus far.

Can you please try and

1. change TextWrapping from Wrap to WrapWholeWords in PART_HeaderPresenter ?
2. add TextWrapping property to PART_ContentPresenter

   Windows/components/SettingsControls/src/SettingsCard/SettingsCard.xaml

   Lines 441 to 446 in 5bc705f

   	<ContentPresenter x:Name="PART_ContentPresenter"
   	Grid.Column="2"
   	HorizontalAlignment="Right"
   	VerticalAlignment="Center"
   	HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
   	Content="{TemplateBinding Content}" />

3. add a MinWidth on second column, the one with *

   Windows/components/SettingsControls/src/SettingsCard/SettingsCard.xaml

   Lines 198 to 204 in 5bc705f

   	<Grid.ColumnDefinitions>
   	<ColumnDefinition Width="Auto"
   	MinWidth="{ThemeResource SettingsCardLeftIndention}" />
   	<ColumnDefinition Width="*" />
   	<ColumnDefinition Width="Auto" />
   	<ColumnDefinition Width="Auto" />
   	</Grid.ColumnDefinitions>

[niels9001]

Hmm, I tried your suggestions + my ideas and none seem to work 😕.

I think the workaround for now are acceptable:

• Set a MaxWidth/TextWrapping on the TextBlock that is set as the Content
• Increase the SettingsCardWrapThreshold for that particular card using lightweight styling.

We can leave this issue open for future tracking