Question

我正在尝试使用“Segoe MDL2资产”图标制作工具栏 Favorites/Notification Toolbar

MS建议不要使用较旧的Segoe UI Symbol字体，因为它现在是Legacy。我想要的是XAML或C＃，它将这种字体的单个字符放在另一个上面或者放在图标顶部的字符上。居中可以，但我真的想把它们相对于彼此定位。

Segoe MDL2 Assets Icons guideline提到分层/堆叠这些图标/字符曾经被支持，但没有说明现在应该如何完成。

显示VS2015之类的通知，此处的收件箱消息或带有心形，星形，圆形或方形内部数字的编号收藏列表非常有用。

我目前的解决方案是使用带有两个TextBlocks或TextBlock和Rectangle的网格。它很接近，但不完全是我想要的。有人有更好的方式堆叠或覆盖它们吗？

<ToolBarTray>
    <ToolBar x:Name="WindowsTools" OverflowMode="Never" ToolBarTray.IsLocked="True" Loaded="ToolBar_Loaded">
        <Button x:Name="Favorite_1" ToolTip="Favorite 1" FontFamily="Segoe MDL2 Assets" FontSize="20" Click="Favorite_Click" Tag="1">
            <Grid>
            <TextBlock FontSize="20" VerticalAlignment="Center" TextAlignment="Center">
                    <Run FontFamily="Segoe MDL2 Assets">&#xE006;</Run>
            </TextBlock>
            <TextBlock FontSize="20" VerticalAlignment="Center" TextAlignment="Center" Foreground="Red">
                    <Run FontSize="8" FontFamily="Segoe WP" Typography.Variants="Superscript">&#x277A;</Run>
            </TextBlock>
            </Grid>
        </Button>
        <Button x:Name="Favorite_2" ToolTip="Favorite 2" FontFamily="Segoe MDL2 Assets" FontSize="20" Click="Favorite_Click" Tag="2">
            <Grid>
            <TextBlock FontSize="20" VerticalAlignment="Center" TextAlignment="Center">
                    <Run FontFamily="Segoe MDL2 Assets">&#xE7C1;</Run>
                </TextBlock>
                <TextBlock HorizontalAlignment="Right" VerticalAlignment="Bottom" Foreground="Blue">
                    <Run FontSize="8" FontFamily="Segoe WP" Typography.Variants="Superscript">&#x2778;</Run>
                </TextBlock>
            </Grid>
        </Button>
        <Button x:Name="Notifications" ToolTip="Notifications" Click="Notification_Click" Tag="Users">
            <Grid>
                <TextBlock FontSize="20" VerticalAlignment="Center" TextAlignment="Center">
                    <Run FontFamily="Segoe MDL2 Assets">&#xE716;</Run>
                </TextBlock>
                <TextBlock HorizontalAlignment="Right" VerticalAlignment="Bottom" Foreground="Purple">
                    <Run FontSize="8" FontFamily="Segoe WP" Typography.Variants="Superscript">&#x2779;</Run>
                </TextBlock>
            </Grid>
        </Button>
        <Button x:Name="Alerts" ToolTip="Alerts" Click="Alerts_Click" Tag="Users">
            <Grid>
                <TextBlock FontSize="20" VerticalAlignment="Center" TextAlignment="Center">
                    <Run FontFamily="Segoe MDL2 Assets">&#xE715;</Run>
                </TextBlock>
                <Rectangle Width="12" Height="8" Fill="Green" HorizontalAlignment="Right" VerticalAlignment="Top"/>
                <TextBlock HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="White">
                    <Run FontSize="7" FontFamily="Courier New" FontWeight="Bold" Text=" 2 "></Run>
                </TextBlock>
            </Grid>
        </Button>
    </ToolBar>
</ToolBarTray>

Answer 1

为了澄清，您指出的文档描述了用于着色字形的字体中已存在的分层。客户端/用户通常不会定义分层，并且通常（在支持颜色字体渲染的系统下）不需要做任何特殊的操作来使用它们。

一些额外的背景：超出正常的字形数据（在'glyf'表中），字体包含调色板（'CPAL'）和分层（'COLR'）表，它们是彩色字形的有效“配方”。 'COLR'表通过引用'glyf'表中的glyphIDs和RGBA颜色通过索引引入'CPAL'表来定义图层。理解'COLR'和'CPAL'表的系统将使用配方从定义的层中构建彩色字形。在不支持使用COLR / CPAL进行颜色渲染的系统上，将显示标准的“后备”单色字形。

因此，如果您只是在应用程序，网页等中使用该字体，那么您不需要做任何特别的事情。如果您在不支持着色的系统上使用该字体，并且希望获得颜色支持，则需要解析COLR和CPAL表并使用这些表来呈现带有颜色的文本

如何使用分层的Segoe MDL2资产字体/图标创建通知计数

1 个答案: