2

我有一个 Button ControlTemplate 来模仿 WPF 项目中的 Windows Store AppBar 按钮。它工作正常。这个想法是使用字体 Segoe UI Symbol 中的符号作为图像。绑定是通过使用 Button 类的两个标准属性来完成的：Content 和 Tag。

<Style x:Key="AppBarButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="grdRoot" Width="70" Background="Black">
                    <StackPanel VerticalAlignment="Top" Margin="0">
                        <Grid Width="40" Height="40" HorizontalAlignment="Center">
                            <Ellipse x:Name="borderCircle" Stroke="White" Fill="Black" StrokeThickness="2" />
                            <TextBlock x:Name="txtSymbol" Text="{TemplateBinding Tag}" Foreground="White" TextAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe UI Symbol" FontSize="20" />
                        </Grid>
                        <TextBlock x:Name="txtContent" Text="{TemplateBinding Content}" Foreground="White" Margin="0,4,0,0" FontSize="10" TextAlignment="Center" TextTrimming="WordEllipsis"/>
                    </StackPanel>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="borderCircle" Storyboard.TargetProperty="(Fill).(Color)" To="Gray" Duration="0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="borderCircle" Storyboard.TargetProperty="(Fill).(Color)" To="White" Duration="0" />
                                    <ColorAnimation Storyboard.TargetName="txtSymbol" Storyboard.TargetProperty="(Foreground).(Color)" To="Black" Duration="0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="borderCircle" Storyboard.TargetProperty="(Stroke).(Color)" To="Gray" Duration="0" />
                                    <ColorAnimation Storyboard.TargetName="txtSymbol" Storyboard.TargetProperty="(Foreground).(Color)" To="Gray" Duration="0" />
                                    <ColorAnimation Storyboard.TargetName="txtContent" Storyboard.TargetProperty="(Foreground).(Color)" To="Gray" Duration="0" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

问题是字体中缺少许多预期的符号。似乎它们通常只定义一次，并且期望通过转换生成相应的旋转符号。

一个例子：ArrowUp 在字符 xE110 中定义。但是没有对应的ArrowDown！

我知道可以将 Angle="180" 的 RotateTransform 应用于 TextBlock。它在直接应用于 TextBlock 时起作用。但如果应用于按钮，它当然会将整个模板内容颠倒过来，包括文本。如果 TextBlock 隐藏在控件层次结构的深处，如何从我的 ControlTemplate 外部应用转换？

我的建议是将自定义属性 ImageAngle 应用于可以绑定到内部 Angle 属性的 ControlTemplate。如果可能的话，ImageAngle 的默认值应该是“0”，这样我就不需要为所有普通符号指定它。不幸的是，我的 XAML 模板知识还不够深，无法自己弄清楚。

<TextBlock x:Name="txtSymbol" Text="{TemplateBinding Tag}" Foreground="White" TextAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe UI Symbol" FontSize="20" RenderTransformOrigin="0.5,0.5" >
    <TextBlock.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="{TemplateBinding ImageAngle}"/>
            <TranslateTransform/>
        </TransformGroup>
    </TextBlock.RenderTransform>
</TextBlock>

也欢迎其他解决问题的建议。

4

0 回答 0