How to disable commandbar buttons scaling

Question

I have Cmdbar with buttons without labels. When changing the scale in the system settings, the size of the appbar button also changes, but the icon size does not change.

before slaling

after scaling

Here is my commandbar

    <Grid>
        <CommandBar Style="{StaticResource OpenDownCommandBar}" HorizontalAlignment="Left" IsOpen="False" DefaultLabelPosition="Collapsed" Margin="0,15,0,0" IsTextScaleFactorEnabled="False">
            <AppBarButton Style="{StaticResource ImageAppBarButtonStyle}" LabelPosition="Default" >
                <AppBarButton.Content>
                    <Image>
                        <Image.Source>
                            <SvgImageSource UriSource="/Assets/icons/svg/open.svg"/>
                        </Image.Source>
                    </Image>
                </AppBarButton.Content>
            </AppBarButton>
            <AppBarButton Style="{StaticResource ImageAppBarButtonStyle}" LabelPosition="Default">
                <AppBarButton.Content>
                    <Viewbox>
                        <Image>
                            <Image.Source>
                                <SvgImageSource UriSource="/Assets/icons/svg/save.svg"/>
                            </Image.Source>
                        </Image>
                    </Viewbox>
                </AppBarButton.Content>
            </AppBarButton>
            <AppBarButton Style="{StaticResource ImageAppBarButtonStyle}" LabelPosition="Default">
                <AppBarButton.Content>
                    <Image>
                        <Image.Source>
                            <SvgImageSource UriSource="/Assets/icons/svg/chrpass.svg"/>
                        </Image.Source>
                    </Image>
                </AppBarButton.Content>
            </AppBarButton>
        </CommandBar>
    </Grid>

How to disable system scaling or make Image flexible?

Answer 1

At least, it seems that the Viewbox inside AppBarButtons have a fixed size of 16 (hard coded). Something like this should give you some direction:

private void CommandBar_Loaded(object sender, RoutedEventArgs e)
{
    if (sender is not CommandBar commandBar)
    {
        return;
    }

    foreach (Viewbox viewbox in commandBar.FindDescendants()
            .OfType<Viewbox>()
            .Where(x => x.Name == "ContentViewbox"))
    {
        viewbox.Margin = new Thickness(8);
        viewbox.Height = double.NaN;
        viewbox.Width = double.NaN;
    }
}

NOTE

• You can find the default style in generic.xaml.
• FindDescendants comes from the CommunityToolkit.WinUI.Extensions NuGet package.