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

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任何位置使用它,只需使用您想要的字形.在您的动画中,您只需将一个模板换成另一个模板,或者如果您想要很酷,则应用旋转.无论哪种方式,这都是傻瓜式的低技术方法.在我使用字体字符之前,我会建议这样做.

看起来像这样:

字形周围的间距是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>

这将导致这个可怕的UI:

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

你可能会问,好吧,如果我在没有旋转的情况下使用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;" />

它看起来最初是完美的,像这样:

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

除此之外:你可能认为Padding是你的另一种选择,但你会错,因为Padding它TextBlock不像其他控件一样影响内容.

在这里你可以真正看到角色首先不在中心.因此,一旦您尝试布局TextBlock,您就已经制作了非常困难的动画选项.即使您不关心UI中的动画(尽管您应该这样做),Path顶部的方法也是最明智的,因为它可以让您最大程度地控制角色的一般布局.

我希望这对于为什么符号字符方便但不理想是有道理的.

祝你好运!