带后退按钮的文本块

Question

我正在尝试为我的应用程序的拆分视图创建一个具有后退按钮的页眉。

这就是我想要实现的目标：

我试过在我的堆栈面板中放置一个应用程序按钮，但它似乎将我的文本块向下推。这是我的代码：

`

<StackPanel Background="{StaticResource CitiKioskBackgroundBrush}" Height="100">
    <AppBarButton Icon="Back" Margin=" 30 40 0 0"/>
    <TextBlock Style="{StaticResource TitleTextBlockStyle}" 
               Foreground="White" FontSize="30px" 
               HorizontalAlignment="Center" 
               VerticalAlignment="Bottom" 
               Margin=" 0 40 0 0"  >
        CitiKiosk Settings
    </TextBlock>
</StackPanel>

`

Answer 1

最简单的方法是使用 Label ，请看下面的代码。

        <AppBarButton Icon="Back" Margin=" 30 40 0 0" Label=" CitiKiosk Settings">

但是看到的不是你想要的

为了使 AppBarButton 像这个图像一样，您应该更改它的样式。

下面的代码是样式，你可以写成Page.Resources

    <Style TargetType="AppBarButton">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="AppBarButton">
                    <Grid x:Name="Root"
                          MinWidth="{TemplateBinding MinWidth}"
                          MaxWidth="{TemplateBinding MaxWidth}"
                          Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ApplicationViewStates">
                                <VisualState x:Name="FullSize"/>
                                <VisualState x:Name="Compact">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Overflow">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="OverflowWithToggleButtons">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>


                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="InputModeStates">
                                <VisualState x:Name="InputModeDefault" />
                                <VisualState x:Name="TouchInputMode" >
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <StackPanel x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeCompactHeight}" Orientation="Horizontal">
                            <ContentPresenter x:Name="Content"
                                              Height="20"
                                              Margin="0,0,0,4"
                                              Content="{TemplateBinding Icon}"
                                              Foreground="{TemplateBinding Foreground}"
                                              HorizontalAlignment="Stretch"
                                              AutomationProperties.AccessibilityView="Raw"/>
                            <TextBlock x:Name="TextLabel"
                                       Text="{TemplateBinding Label}"
                                       Foreground="{TemplateBinding Foreground}"
                                       FontSize="30"
                                       FontFamily="{TemplateBinding FontFamily}"
                                       TextAlignment="Center"
                                       TextWrapping="Wrap"
                                       Margin="10,0,0,6"
                                       VerticalAlignment="Center"/>
                        </StackPanel>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

然后就可以用这个样式写AppBarButton了

    <AppBarButton Width="300" Icon="Back" Margin="30 0 0 0" Label="CitiKiosk Settings" />

UI就是这张图。

我想你可以更改图标和背景。如果你想改变前景，你应该只在 AppBarButton 中设置前景。

Answer 2

看来你只需要在你的StackPanel中添加一个Orientation="Horizontal" 属性即可。

即：

<StackPanel Background="{StaticResource CitiKioskBackgroundBrush}"
            Height="100" Orientation="Horizontal">
    <AppBarButton Icon="Back" Margin=" 30 40 0 0"/>
    <TextBlock Style="{StaticResource TitleTextBlockStyle}" 
               Foreground="White" FontSize="30px" 
               HorizontalAlignment="Center" 
               VerticalAlignment="Bottom" 
               Margin=" 0 40 0 0"  >
        CitiKiosk Settings
    </TextBlock>
</StackPanel>

带后退按钮的文本块

TextBlock with back button

c#

header

back-button

uwp