Question

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

<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隐藏在控件层次结构的深处，如何从OUTSIDE我的ControlTemplate应用转换？

我的建议是将自定义属性ImageAngle应用于ControlTemplate，该属性可以绑定到内部Angle属性。如果可能，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>

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

将自定义属性添加到XAML ControlTemplate？

0 个答案: