Question

我正在尝试创建展开/折叠按钮，其内容如下所示： http://www.geekchamp.com/icon-explorer/settings-icons/icon?code=e26b 除了面朝下或朝上（而不是左右），并占据更多的圆圈。

我可以像这样旋转按钮：

<Button Content="&#xE26B;" Style="{StaticResource AppBarButtonStyle}" RenderTransformOrigin="0.5, 0.5">
    <Button.RenderTransform>
        <RotateTransform Angle="90" />
    </Button.RenderTransform>
</Button>

但它看起来不像我找到的内容看起来像我想要的那样好。

有人知道我应该使用的内容价值吗？或者有谁知道如何查找内容值？我仔细浏览了这个网站，但没有找到它。还有其他类似的网站吗？ http://www.geekchamp.com/icon-explorer/introduction

谢谢，麦克

Answer 1

嗯，实际上，你不想使用角色地图中的角色，因为你无法完全控制它的位置;在TextBlock中，字体字符有令人讨厌的内部间距，你无法控制。如果像素完美的UI对您很重要，那么您就知道我的意思了。

让我们使用这个万无一失的解决方案！

这并不意味着它也必须变得复杂。就这样做：

<StackPanel Orientation="Horizontal">

    <StackPanel.Resources>
        <ControlTemplate x:Key="ArrowRight">
            <Path Width="50" Height="50" Data="F1M568.254,-7.43524L568.159,-7.34277 567.977,-7.52246 546.559,-28.9417 525.484,-28.9417 549.787,-4.63446 557.439,3.01532 557.619,3.19629 550.067,10.7549 525.758,35.0583 546.834,35.0583 568.254,13.6429 578.792,3.10254 568.254,-7.43524z" Stretch="Uniform" Fill="#FFFFFFFF" RenderTransformOrigin="0.5,0.5" />
        </ControlTemplate>
        <ControlTemplate x:Key="ArrowDown">
            <Path Width="50" Height="50" Data="F1M181.297,177.841L181.205,177.746 181.385,177.563 202.804,156.146 202.804,135.07 178.497,159.373 170.847,167.026 170.666,167.205 163.107,159.653 138.804,135.345 138.804,156.42 160.219,177.841 170.76,188.379 181.297,177.841z" Stretch="Uniform" Fill="#FFFFFFFF" RenderTransformOrigin="0.5,0.5" />
        </ControlTemplate>
        <ControlTemplate x:Key="ArrowLeft">
            <Path Width="50" Height="50" Data="F1M646.688,13.5518L646.783,13.4593 646.965,13.639 668.383,35.0583 689.459,35.0583 665.155,10.751 657.503,3.10126 657.323,2.92023 664.876,-4.63837 689.184,-28.9417 668.109,-28.9417 646.688,-7.52637 636.15,3.01398 646.688,13.5518z" Stretch="Uniform" Fill="#FFFFFFFF" RenderTransformOrigin="0.5,0.5" />
        </ControlTemplate>
        <ControlTemplate x:Key="ArrowUp">
            <Path Width="50" Height="50" Data="F1M753.644,-13.0589L753.736,-12.9639 753.557,-12.7816 732.137,8.63641 732.137,29.7119 756.445,5.40851 764.094,-2.24384 764.275,-2.42352 771.834,5.1286 796.137,29.4372 796.137,8.36163 774.722,-13.0589 764.181,-23.5967 753.644,-13.0589z" Stretch="Uniform" Fill="#FFFFFFFF" RenderTransformOrigin="0.5,0.5" />
        </ControlTemplate>
    </StackPanel.Resources>

    <!-- arrows -->
    <ContentControl Margin="10" Template="{StaticResource ArrowRight}" />
    <ContentControl Margin="10" Template="{StaticResource ArrowDown}" />
    <ContentControl Margin="10" Template="{StaticResource ArrowLeft}" />
    <ContentControl Margin="10" Template="{StaticResource ArrowUp}" />

</StackPanel>

将资源放在App.xaml中，您可以在应用程序的任何位置使用此功能，只需使用ContentControl您想要的字形。在您的动画中，您只需将一个模板换成另一个模板，或者如果您想要很酷，则应用旋转。无论哪种方式，这都是傻瓜式的低技术方法。在我使用字体字符之前，我会建议这样做。

看起来像这样：

enter image description here

字形周围的间距是100％完美的，您可以将它们操作到您的应用程序。

带点回家

当你开始旋转它们时，看看角色方法看起来有多糟糕（例如，如果你想在视觉状态转换中使用一个很酷的动画）。

使用此代码：

<StackPanel.Resources>
    <Style TargetType="TextBlock">
        <Setter Property="Margin" Value="20" />
        <Setter Property="FontSize" Value="50" />
        <Setter Property="FontFamily" Value="Segoe UI Symbol" />
        <Setter Property="RenderTransformOrigin" Value=".5,.5" />
    </Style>
</StackPanel.Resources>

<TextBlock Text="&#xE26B;">
    <TextBlock.RenderTransform>
        <RotateTransform Angle="0" />
    </TextBlock.RenderTransform>
</TextBlock>
<TextBlock Text="&#xE26B;">
    <TextBlock.RenderTransform>
        <RotateTransform Angle="90" />
    </TextBlock.RenderTransform>
</TextBlock>
<TextBlock Text="&#xE26B;">
    <TextBlock.RenderTransform>
        <RotateTransform Angle="180" />
    </TextBlock.RenderTransform>
</TextBlock>
<TextBlock Text="&#xE26B;">
    <TextBlock.RenderTransform>
        <RotateTransform Angle="270" />
    </TextBlock.RenderTransform>
</TextBlock>

这会导致这个糟糕的用户界面：

enter image description here

看看对齐方式是如何拧紧的，因为它们没有正确居中？

你可能会问，好吧，如果我在没有轮换的情况下使用4个字符会怎么样。当然，这意味着您需要使用角色映射来查找字符。没有大碍。

除此之外：你在问题中使用的狭窄字符没有全部四个方向，所以你必须使用我在这里使用的更胖的字符。

使用此：

<StackPanel.Resources>
    <Style TargetType="TextBlock">
        <Setter Property="Margin" Value="20" />
        <Setter Property="FontSize" Value="50" />
        <Setter Property="FontFamily" Value="Segoe UI Symbol" />
    </Style>
</StackPanel.Resources>

<TextBlock Text="&#xE0E2;" />
<TextBlock Text="&#xE0E3;" />
<TextBlock Text="&#xE0E4;" />
<TextBlock Text="&#xE0E5;" />

它看起来最完美，就像这样：

enter image description here

尽管它们看起来非常完美，但事实是它们不是正方形。你可能会问，如果我给他们一个相同的高度和宽度怎么办？这是一个正方形，对吗？是。但看看它如何将控制结果中的结果定位：

enter image description here

除此之外：您可能会认为Padding是另一种选择，但您错了，因为Padding不像其他控件那样影响TextBlock内容。

在这里你可以真正看到角色首先不在中心。因此，一旦您尝试布局TextBlock，就会使动画成为一个非常困难的选项。即使您不关心UI中的动画（尽管您应该这样做），顶部的Path方法也是最明智的，因为它可以让您最大程度地控制角色的总体布局。

我希望这有意义，为什么符号字符很方便但不理想。

祝你好运！

Answer 2

Windows附带了一个名为Character Map的小程序。您可以使用它来查找字符代码。

Answer 3

你可能很容易在Blend中跟踪图标，但实际上可能不值得付出努力。你使用RotateTransform做什么应该没问题，除非你有一个特定的问题（除了4行XAML或其他对齐问题）。

Answer 4

<Button  Content="&#8744;"  Style="{StaticResource AppBarButtonStyle}" Foreground="White" />

或

<Button  Content="&#709;"  Style="{StaticResource AppBarButtonStyle}" Foreground="White" />

这些网站很有帮助： http://www.ebyte.it/library/educards/html/HTMLEntitiesAndGlyphs.html http://unicode-table.com/en/#spacing-modifier-letters

我不认为我会知道要找什么，如果Filip没有提到Glyph这个词。感谢您的回复。

这个箭头朝下的内容价值是多少？

4 个答案: