2

I have a Button ControlTemplate to mimic Windows Store AppBar buttons in WPF project. It works fine. The idea is to use symbols from font Segoe UI Symbol as images. Binding is done by using two standard properties of the Button class: Content and 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>

The problem is that many expected symbols are missing in the font. It seems that they often are defined only once and the corresponding rotated symbols are expected to be generated by transformation.

An example: The ArrowUp is defined in character xE110. But there is no corresponding ArrowDown!

I know it is possible to apply a RotateTransform with Angle="180" to a TextBlock. It works when applied directly to the TextBlock. But if applied to the button it will of course turn the whole template content upside down, including the text. How can I apply the transformation from OUTSIDE my ControlTemplate if the TextBlock is hidden deep inside the control hierarchy?

My suggestion is to apply a custom property ImageAngle to the ControlTemplate that can be bound to the inner Angle property. If possible the ImageAngle should have a Default value of "0" so that I don't need to specify it for all normal symbols. Unfortunately my XAML template knowledege is not deep enough to figure this out myself.

<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>

Other suggestions to solve the problem are also welcome.

Jakob Lithner
  • 4,225
  • 6
  • 38
  • 59

0 Answers0