如何禁用CommandBar按钮的系统缩放或让Image自适应？

一、禁用系统DPI缩放对CommandBar的影响 #

1. 应用级固定DPI感知 #

修改Package.appxmanifest文件，在<uap:VisualElements>节点中设置固定的DPI感知模式，让应用不随系统缩放自动调整：

<uap:VisualElements
    DisplayName="你的应用名称"
    Square150x150Logo="Assets\Square150x150Logo.png"
    Square44x44Logo="Assets\Square44x44Logo.png"
    Description="你的应用描述"
    Background="#FFFFFF"
    DpiAware="true"
    >

注：DpiAware="true"表示应用基于系统DPI渲染；若要强制应用以100% DPI运行，可设置为DpiAware="false"，但高DPI屏幕下可能出现界面模糊。

2. 控件级别抵消缩放 #

通过代码计算系统DPI缩放比例，给CommandBar添加反向缩放变换，保持控件原始大小：

XAML代码修改：

<CommandBar Style="{StaticResource OpenDownCommandBar}" HorizontalAlignment="Left" IsOpen="False" DefaultLabelPosition="Collapsed" Margin="0,15,0,0" IsTextScaleFactorEnabled="False">
    <CommandBar.RenderTransform>
        <ScaleTransform ScaleX="{x:Bind GetDpiScaleInverse(), Mode=OneWay}" ScaleY="{x:Bind GetDpiScaleInverse(), Mode=OneWay}"/>
    </CommandBar.RenderTransform>
    <!-- 你的AppBarButton内容 -->
</CommandBar>

后台代码（MainPage.xaml.cs）：

private double GetDpiScaleInverse()
{
    var displayInfo = DisplayInformation.GetForCurrentView();
    return 1.0 / displayInfo.RawPixelsPerViewPixel;
}

二、让图标Image灵活适配按钮大小 #

1. 设置Image的Stretch属性 #

给所有Image控件添加Stretch="Uniform"，图标会自动按比例缩放以填满按钮的Content区域：

<AppBarButton.Content>
    <Image Stretch="Uniform">
        <Image.Source>
            <SvgImageSource UriSource="/Assets/icons/svg/open.svg"/>
        </Image.Source>
    </Image>
</AppBarButton.Content>

2. 优化Viewbox的使用 #

对于已用Viewbox包裹的图标，给Viewbox设置Stretch="Fill"，确保它填满按钮的Content区域：

<AppBarButton.Content>
    <Viewbox Stretch="Fill">
        <Image>
            <Image.Source>
                <SvgImageSource UriSource="/Assets/icons/svg/save.svg"/>
            </Image.Source>
        </Image>
    </Viewbox>
</AppBarButton.Content>

3. 调整AppBarButton样式（可选） #

检查ImageAppBarButtonStyle是否限制了Content区域的固定尺寸，若有则改为自适应：

<Style x:Key="ImageAppBarButtonStyle" TargetType="AppBarButton">
    <Setter Property="Width" Value="Auto"/>
    <Setter Property="Height" Value="Auto"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AppBarButton">
                <Grid Width="Auto" Height="Auto">
                    <!-- 其他模板内容 -->
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

内容的提问来源于stack exchange，提问作者Biryukov Georgy