UWP Segoe Icon组合

最新推荐文章于 2023-09-14 14:09:41 发布

铁樵

最新推荐文章于 2023-09-14 14:09:41 发布

阅读量366

点赞数

本文链接：https://blog.csdn.net/alai7150/article/details/121131725

版权

学习笔记专栏收录该内容

76 篇文章 1 订阅

订阅专栏

UWP和WPF中微软提供了很多Icon, 只需要选择Segoe MDL2 Assets字体，然后使用对应的代码即可。这种Icon的好处就是，它是矢量图形，可以通过FontSize设置大小，字体放大之后Icon还是非常清除，没有失真。

微软官方提示我们可以把多个Icon叠在一起组合使用，创建出我们需要的组合Icon。

using a zero-width glyph

但是在Xmal中如何组合呢？网络上找不到什么实例，我自己摸索出来，用Grid即可，而且非常方便。下面我们来在Xmal里面实现一下组合Icon，效果图如下。

对应 Xmal如下，不用多解释了，一看就懂。在Grid里面（未设置行和列的定义）的元素会自动叠在一起。

<Button FontSize="24" Margin="-15,0,0,0" FontFamily="Segoe MDL2 Assets" Content="&#xEB52;" Foreground="Red"/>
<Button FontSize="24" Margin="-15,0,0,0" FontFamily="Segoe MDL2 Assets" Content="&#xEB51;" Foreground="White"/>

<Button  Margin="-15,0,0,0">
      <Grid>
           <TextBlock FontSize="24" FontFamily="Segoe MDL2 Assets" Text="&#xEB52;" Foreground="Red"/>
           <TextBlock FontSize="24" FontFamily="Segoe MDL2 Assets" Text="&#xEB51;" Foreground="White"/>
      </Grid>
</Button>