XAML中用一字符即可展示漂亮的图型

时间：2022-04-28 16:31:23

XAML中用一字符即可展示漂亮的图型

例如：Symbol Icon: People

http://www.geekchamp.com/icon-explorer/action-icons/icon?code=e125

  图形：XAML中用一字符即可展示漂亮的图型

使用方法：<Button Content="" FontFamily="Segoe UI Symbol" FontSize="40" />

注意：字体必须是Segoe UI Symbol

如果你使用 C#/VB/C++ 和 XAML 开发应用，则可以选择使用  Symbol enumeration 而不是 Unicode ID 从 Segoe UI Symbol 字体指定字形。如果你使用 JavaScript 和 HTML 开发应用，则可以选择使用  AppBarIcon enumeration 而不是 Unicode ID 从 Segoe UI Symbol 字体指定字形。

使用方法：<Button FontSize="40" ><SymbolIcon Symbol="Play"/></Button>

Segoe UI Symbol 图标指南

http://technet.microsoft.com/zh-cn/office/jj841126

也可打开 Character Map 查看

更具体的说明可参考：Windows 8: 1,000 Metro icons you already have installed

http://blog.jerrynixon.com/2012/03/windows-8-1000-metro-icons-you-already.html

还有一些按钮图形是没有对应的字符的，比如Share，这时候就可以让Metro Studio 大显身手了。

最新的版本是Metro Studio 2.搜索share,找到图形，然后导出xaml ,就可以得到：

    <Style x:Key="PathBasedAppBarButtonStyle" BasedOn="{StaticResource AppBarButtonStyle}" TargetType="ButtonBase">

        <Setter Property="ContentTemplate">

            <Setter.Value>

                <DataTemplate>

                    <Path Width="18" Height="18"

             Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"

                       Margin="0 0 2 0" RenderTransformOrigin="0.5,0.5"

             Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"

             Data="{Binding Path=Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>

                </DataTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <Style x:Key="Share-01AppBarButtonStyle" BasedOn="{StaticResource PathBasedAppBarButtonStyle}" TargetType="ButtonBase">

        <Setter Property="AutomationProperties.Name" Value="Share-01"/>

        <Setter Property="AutomationProperties.AutomationId" Value="Share-01AppBarButton"/>

        <Setter Property="Content" Value="M41.1684,45.487038C44.33276,45.476124 47.116478,47.775484 47.619183,50.997017 48.173893,54.552612 45.741444,57.884518 42.186676,58.439186 38.631909,58.993855 35.299843,56.561596 34.745133,53.007202 34.189225,49.452806 36.621571,46.1208 40.176239,45.566132 40.509629,45.514019 40.841049,45.488167 41.1684,45.487038z M10.237135,35.558062L10.350618,35.901613C13.537862,45.15811,22.303875,51.450747,32.124443,51.476969L32.24012,51.475981 32.232979,51.574453C32.204815,52.168505 32.235886,52.774008 32.33125,53.384045 32.497891,54.451855 32.847706,55.446404 33.343685,56.340675L33.528836,56.655979 33.263104,56.66925C20.287924,57.165882,8.592234,48.699957,4.9941953,36.24795L4.991,36.236345 5.2068322,36.273844C6.0781415,36.403109 6.9829696,36.404837 7.8980048,36.262007 8.6605371,36.142996 9.3857501,35.930498 10.063782,35.638014z M6.5030173,20.89604C9.6663612,20.885077 12.450289,23.184638 12.954178,26.407125 13.508891,29.961675 11.076529,33.293532 7.521735,33.848207 3.9656423,34.402784 0.63486499,31.970687 0.078820122,28.416241 -0.47588428,24.861691 1.9564295,21.529734 5.5112136,20.975158 5.8444722,20.923035 6.1757749,20.897175 6.5030173,20.89604z M58.8219,18.574822L59.004681,19.084795C59.543209,20.648768 59.951763,22.281796 60.215809,23.973269 61.800083,34.122046 57.788403,43.852476 50.472401,50.025568L49.996003,50.417795 49.950493,50.167978C49.607575,48.524141,48.825226,47.070471,47.747254,45.912016L47.524395,45.683733 47.536305,45.673433C53.238133,40.622065 56.328049,32.862471 55.065937,24.777964 54.881249,23.594744 54.609913,22.446564 54.259404,21.338879L54.134854,20.961815 54.432953,20.907509C56.076813,20.564614,57.530503,19.782418,58.688969,18.704576z M52.585079,5.624033C55.74844,5.6138992 58.532292,7.9135618 59.036179,11.13474 59.590893,14.689362 57.158524,18.021196 53.603829,18.575868 50.047627,19.131741 46.715535,16.699662 46.16082,13.145139 45.606106,9.5893164 48.038472,6.2575331 51.59327,5.7028704 51.926533,5.6508484 52.25784,5.6250811 52.585079,5.624033z M32.156784,0.00014686584C37.614365,-0.017484665,42.811852,1.5448036,47.233734,4.3107109L47.724335,4.6257896 47.518517,4.7606697C46.206982,5.6667137,45.162045,6.9076052,44.488583,8.3395329L44.348809,8.6562643 43.997319,8.4421854C39.538208,5.7988148 34.168194,4.6310177 28.646389,5.4929276 20.363682,6.7857971 13.798057,12.32467 10.820051,19.546529L10.815107,19.558941 10.701824,19.495367C9.3059848,18.755269,7.7060798,18.377093,6.0457643,18.465707L5.6350406,18.498096 5.7456864,18.199476C9.2659248,9.0405502 17.451128,1.9652042 27.841681,0.34318161 29.291645,0.11686516 30.733063,0.0047473907 32.156784,0.00014686584z"/>

    </Style>

试一试吧！

Metro Studio 3：https://visualstudiogallery.msdn.microsoft.com/dba16eec-aa49-4f06-b2d0-caeba936010c

相关文章