Problems centering Image inside in a SettingsCard

[mikeclayton]

I'm currently struggling with getting an Image to centre inside a SettingsCard, so I'm hoping someone can give me some pointers...

I'm kind of new to the Community Toolkit controls, and tbh I'm kind of new to WinUI / Xaml in general so I may be trying to do something daft - let me know if there's better way of doing what I'm doing.

Desired Layout

This is what I'm hoping to do... I have a SettingsExpander with a nested SettingsCard that contains an Image control. I'd like the Image to be centred horizontally within the SettingsCard:

(arrowed lines just for illustration - not part of the UI)

Actual Layout

Here's the Xaml I'm using, which is as close as I've been able to get to my desired layout.

<UserControl
    ... snip ...
    xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
    >

    <controls:SettingsGroup>

        <tkcontrols:SettingsExpander
            x:Uid="MouseUtils_MouseJump_Appearance"
            HeaderIcon="{ui:FontIcon Glyph=&#xEB3C;}"
            IsEnabled="{x:Bind ViewModel.IsMouseJumpEnabled, Mode=OneWay}"
            IsExpanded="False">
            <tkcontrols:SettingsExpander.Items>

                <tkcontrols:SettingsCard
                    HorizontalAlignment="Center">
                    <Image Source="{x:Bind Path=ViewModel.MouseJumpPreviewImage, Mode=OneWay}" />
                </tkcontrols:SettingsCard>

            </tkcontrols:SettingsExpander.Items>
        </tkcontrols:SettingsExpander>

    </controls:SettingsGroup>

</UserControl>

However, this rendered as:

Problems

The problems I have are:

• The SettingsCard seems to no longer fill the width of the SettingsExpander - there's light grey background visible either side of it.

• The Image isn't perfectly centred in the SettingsCard - I think this is because there's space reserved for the HeaderIcon, but I've not been able to work out how to remove that space (HeaderIcon="" causes an exception, and I'm not sure what other values / settings I could use to remove the HeaderIcon).

This UserControl is part of a much bigger project, so it's possible there's some global configuration settings being applied that I'm unaware of - I can give links to source if needed.

Any suggestions on what to try would be welcome...

[mikeclayton]

I managed to put a workaround together - it's not pretty but it works.

The first part was to wrap the image in a Grid and StackPanel to allow it to centre property inside the "content" area of the SettingsCard:

<UserControl
    ... snip ...
    xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
    >

    <controls:SettingsGroup>

        <tkcontrols:SettingsExpander
            x:Uid="MouseUtils_MouseJump_Appearance"
            HeaderIcon="{ui:FontIcon Glyph=&#xEB3C;}"
            IsEnabled="{x:Bind ViewModel.IsMouseJumpEnabled, Mode=OneWay}"
            IsExpanded="False">
            <tkcontrols:SettingsExpander.Items>

                <tkcontrols:SettingsCard
                    x:Name="MouseUtils_MouseJump_PreviewImage"
                    MinHeight="300"
                    MaxHeight="300"
                    Loaded="PreviewImage_Loaded">
                    <Grid
                        MinHeight="283"
                        MaxHeight="283"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch">
                        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Image Source="{x:Bind Path=ViewModel.MouseJumpPreviewImage, Mode=OneWay}" Stretch="None" />
                        </StackPanel>
                    </Grid>

            </tkcontrols:SettingsExpander.Items>
        </tkcontrols:SettingsExpander>

    </controls:SettingsGroup>

</UserControl>

The second part was to inspect the source code for the CommunityToolkit library and find the names of the private / internal controls so I could use get references to them and hide them - this expands the "content" area to fill the entire SettingsCard:

        private void PreviewImage_Loaded(object sender, RoutedEventArgs e)
        {
            bool TryFindFrameworkElement(SettingsCard settingsCard, string partName, out FrameworkElement result)
            {
                result = settingsCard.FindDescendants()
                    .OfType<FrameworkElement>()
                    .FirstOrDefault(
                        x => x.Name == partName);
                return result is not null;
            }

            /*
                apply a variation of the "Left" VisualState for SettingsCards
                to center the preview image in the true center of the card
                see https://github.com/CommunityToolkit/Windows/blob/9c7642ff35eaaa51a404f9bcd04b10c7cf851921/components/SettingsControls/src/SettingsCard/SettingsCard.xaml#L334-L347
            */

            var settingsCard = (SettingsCard)sender;

            var partNames = new List<string>
            {
                "PART_HeaderIconPresenterHolder",
                "PART_DescriptionPresenter",
                "PART_HeaderPresenter",
                "PART_ActionIconPresenter",
            };
            foreach (var partName in partNames)
            {
                if (!TryFindFrameworkElement(settingsCard, partName, out var element))
                {
                    continue;
                }

                element.Visibility = Visibility.Collapsed;
            }

            if (TryFindFrameworkElement(settingsCard, "PART_ContentPresenter", out var content))
            {
                Grid.SetRow(content, 1);
                Grid.SetColumn(content, 1);
                content.HorizontalAlignment = HorizontalAlignment.Center;
            }
        }

This results in the following, with the image properly centred in the otherwise-empty SettingsCard:

There's a danger this might break if the internals of the SettingsCard library change, but it works for the time being, and I couldn't see a way to do it using just the public interface...

[itonx]

Hey @mikeclayton ,

I ran into the same issue. I fixed it by setting SettingsCard.Description.

Details:

SettingsCard sets the Content by default when using XAML.

Looking at the ColumnDefinitions in SettingsCard, the width for the 2nd column is set to '*'. That means it occupies all the space available in the parent's container (note: the parent is a StackPanel).

Properties Header and Description are part of the 2nd column. However, Header sets HorizontalAlignment to 'Left', so it won't occupy all the space available. Fortunately, Description doesn't have any alignment defined in the template:

Testing

<toolkit:SettingsCard>
    <toolkit:SettingsCard.Description>
        <Grid MinHeight="300" Background="Black">
            <StackPanel
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Background="Gray">
                <TextBlock
                    Width="500"
                    Height="200"
                    VerticalAlignment="Center"
                    FontSize="20"
                    Foreground="Black"
                    TextAlignment="Center">
                    Content here
                </TextBlock>
            </StackPanel>
        </Grid>
    </toolkit:SettingsCard.Description>
</toolkit:SettingsCard>