(note – reposting from CommunityToolkit github repo which doesn’t seem very active – see https://github.com/CommunityToolkit/Windows/discussions/459 for original)

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=}"
            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:

• When using HorizontalAlignment="Center" in the SettingsCard, it 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 I’m contributing to, 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 to fix this, or an alternative approach to achieve the same thing would be welcome…