如何在WPF TreeViewItem.Header中叠加Segoe MDL2 Assets图标？

你当前通过StackPanel横向排列单个图标与标题，要实现ED0C图标叠加在ED0D图标上，有以下几种直接可行的实现方式：

方法一：使用Grid容器叠加TextBlock #

Grid是最简便的实现方式，其子元素默认重叠排列在同一区域，只需将两个TextBlock放入同一Grid，分别设置对应图标字符，还可通过Margin调整叠加位置：

<TreeViewItem.Header>
  <StackPanel Orientation="Horizontal">
    <!-- 用Grid承载两个叠加图标 -->
    <Grid Width="16" Height="16">
      <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xED0D;" Foreground="Blue" Background="cyan" />
      <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xED0C;" Foreground="Red" Margin="2,2,0,0" />
    </Grid>
    <TextBlock Name="title" Margin="4,0,0,0" />
  </StackPanel>
</TreeViewItem.Header>

方法二：使用Canvas容器精确控制位置 #

如果需要更精细地调整两个图标的相对位置，可使用Canvas，通过Canvas.Left和Canvas.Top属性精准定位：

<TreeViewItem.Header>
  <StackPanel Orientation="Horizontal">
    <Canvas Width="16" Height="16">
      <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xED0D;" Foreground="Blue" Background="cyan" />
      <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xED0C;" Foreground="Red" Canvas.Left="3" Canvas.Top="3" />
    </Canvas>
    <TextBlock Name="title" Margin="4,0,0,0" />
  </StackPanel>
</TreeViewItem.Header>

方法三：使用DrawingImage组合图标（矢量级自定义） #

如果需要对图标进行缩放、旋转等更多自定义操作，可通过DrawingImage将两个Glyph组合成单个图像资源，再用Image控件显示：

<TreeViewItem.Header>
  <StackPanel Orientation="Horizontal">
    <Image Width="16" Height="16">
      <Image.Source>
        <DrawingImage>
          <DrawingImage.Drawing>
            <DrawingGroup>
              <!-- 底层图标ED0D -->
              <GlyphRunDrawing ForegroundBrush="Blue">
                <GlyphRunDrawing.GlyphRun>
                  <GlyphRun
                    GlyphTypeface="{x:Static Fonts.SegoeMDL2Assets}"
                    Characters="&#xED0D;"
                    FontRenderingEmSize="16"
                    GlyphIndices="0"
                    BaselineOrigin="0,12" />
                </GlyphRunDrawing.GlyphRun>
              </GlyphRunDrawing>
              <!-- 上层图标ED0C -->
              <GlyphRunDrawing ForegroundBrush="Red">
                <GlyphRunDrawing.GlyphRun>
                  <GlyphRun
                    GlyphTypeface="{x:Static Fonts.SegoeMDL2Assets}"
                    Characters="&#xED0C;"
                    FontRenderingEmSize="12"
                    GlyphIndices="0"
                    BaselineOrigin="2,10" />
                </GlyphRunDrawing.GlyphRun>
              </GlyphRunDrawing>
            </DrawingGroup>
          </DrawingImage.Drawing>
        </DrawingImage>
      </Image.Source>
    </Image>
    <TextBlock Name="title" Margin="4,0,0,0" />
  </StackPanel>
</TreeViewItem.Header>

注：使用GlyphRun需提前定义静态的Segoe MDL2 Assets字体引用，或直接通过FontFamily属性指定。

内容的提问来源于stack exchange，提问作者Blessed Geek