2

WPF プロジェクトで Windows ストアの AppBar ボタンを模倣する Button ControlTemplate があります。それは正常に動作します。アイデアは、フォント Segoe UI Symbol のシンボルを画像として使用することです。バインディングは、Button クラスの 2 つの標準プロパティ 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! はありません。

RotateTransform を Angle="180" で TextBlock に適用できることはわかっています。TextBlock に直接適用すると機能します。ただし、ボタンに適用すると、もちろん、テキストを含むテンプレートのコンテンツ全体が上下逆になります。TextBlock がコントロール階層の奥深くに隠されている場合、ControlTemplate の外側から変換を適用するにはどうすればよいですか?

私の提案は、内部の Angle プロパティにバインドできる ControlTemplate にカスタム プロパティ ImageAngle を適用することです。可能であれば、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