TextBlock avec le bouton de retour

Question

J'essaye de créer un en-tête qui a un bouton de retour pour splitview de mon application.

C'est ce que je suis en train de réaliser:

J'ai essayé de mettre un appbutton dans mon panneau de pile, mais il semble pousser mon textblock vers le bas. Voici mon code:

`

<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

La façon facile de le faire est d'utiliser des étiquettes, s'il vous plaît voir le code ci-dessous.

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

Mais on ne voit pas ce que vous voulez.

Pour faire la AppBarButton comme cette image, que vous devez changer de style.

Le code ci-dessous est le style et vous pouvez l'écrire dans 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> 

Ensuite, vous pouvez écrire le AppBarButton avec le style.

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

L'interface utilisateur est comme cette image.

Je pense que vous pouvez changer l'icône et l'arrière-plan. Et si vous souhaitez modifier le premier plan que vous devez définir uniquement le premier plan dans AppBarButton.

Answer 2

Il semble que vous ayez seulement besoin d'ajouter une propriété Orientation="Horizontal" dans votre StackPanel.

C'est:

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