Question

我正在尝试为我的应用程序的splitview创建一个带有后退按钮的标题。

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

我已经尝试在我的堆栈面板中放置一个appbutton，但它似乎推动了我的文本块。这是我的代码：

`

<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就像这张图片。

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

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

2 个答案: