UWP开发：如何在主页下方添加带自定义图标的Command Bar

嘿，刚入门UWP开发的话，给主页底部加个带自定义图标的CommandBar其实不难，我给你一步步拆解，跟着做就能搞定～

1. 准备自定义图标资源 #

首先得把你的自定义图标处理好：

• 推荐用透明背景的PNG或SVG格式，PNG的话最好准备多套尺寸（比如16x16、24x24、32x32），适配不同DPI的设备；
• 把图标放到项目的Assets文件夹里（右键项目→添加→现有项，选中图标）；
• 选中图标文件，在属性面板里设置生成操作为「内容」，复制到输出目录为「如果较新则复制」。

2. 在XAML中添加CommandBar #

打开你的主页XAML文件（比如MainPage.xaml），把CommandBar放在页面底部。这里假设你的页面布局用Grid，给Grid加一行专门放CommandBar：

<Grid>
    <!-- 主页主体内容区域 -->
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/> <!-- 主体内容占满剩余空间 -->
        <RowDefinition Height="Auto"/> <!-- CommandBar自适应高度 -->
    </Grid.RowDefinitions>

    <!-- 这里放你的主页其他控件，比如TextBlock、ListView之类的 -->

    <!-- 底部的CommandBar -->
    <CommandBar Grid.Row="1" VerticalAlignment="Bottom">
        <!-- 带自定义图标的主按钮 -->
        <AppBarButton Label="我的功能">
            <AppBarButton.Icon>
                <!-- 用BitmapIcon加载PNG图标 -->
                <BitmapIcon UriSource="ms-appx:///Assets/MyCustomIcon.png"/>
            </AppBarButton.Icon>
        </AppBarButton>

        <!-- 可以继续添加更多内置图标或自定义图标按钮 -->
        <AppBarButton Icon="Add" Label="添加"/>
        <AppBarButton Icon="Delete" Label="删除"/>

        <!-- 右侧的次要命令按钮（点击三点会展开） -->
        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Settings" Label="设置"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Grid>

3. 用SVG图标替代PNG（可选） #

如果你的图标是SVG格式，直接提取SVG的路径数据，用PathIcon更清晰：

<AppBarButton Label="SVG自定义图标">
    <AppBarButton.Icon>
        <PathIcon Data="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
    </AppBarButton.Icon>
</AppBarButton>

（把Data属性的值换成你自己SVG的路径数据就行）

4. 自定义图标样式（可选） #

要是想调整图标的大小、颜色，直接在图标控件里加属性就行：

<BitmapIcon UriSource="ms-appx:///Assets/MyCustomIcon.png" 
            Width="24" Height="24" 
            Foreground="#FF0078D7"/> <!-- 自定义图标颜色 -->

• 图标背景一定要透明，不然显示出来会有黑色方块；
• 多尺寸图标可以用资源限定符命名，比如Assets/1x/MyCustomIcon.png、Assets/2x/MyCustomIcon.png，系统会自动根据设备DPI选对应的图标；
• 要是CommandBar的样式不符合你的需求，还可以自定义CommandBar的模板，调整背景、按钮间距这些。

要是还有细节搞不定，随时留言问我哈～

内容的提问来源于stack exchange，提问作者mnu-nasir