的Windows 8.1 - 如何把不同的元素（如文本框），而不是在SettingsFlyout

Question

標題字符串我有一個Windows 8.1應用程序與設置彈出按鈕。

我試圖延長SettingsFlyout，從而改變它的頂部標題部分包括一個文本框，而不是標題如下圖所示

正如你可以在上面的UI看，沒有標題。

但看起來像標題屬性默認情況下在SettingsFlyout中採取。 我如何覆蓋這個？

，我會很高興，如果有人能在正確的方向指向我。 在此先感謝。

Answer 1

你可以改變彈出按鈕的樣式/模板，但你不應該這樣做。如果你真的需要 - 這是我用Blend提取的默認設置。

<Style x:Key="SettingsFlyoutStyle1" TargetType="SettingsFlyout"> 
     <Setter Property="RequestedTheme" Value="Light"/> 
     <Setter Property="HeaderBackground" Value="{ThemeResource SettingsFlyoutHeaderBackgroundThemeBrush}"/> 
     <Setter Property="HeaderForeground" Value="{ThemeResource SettingsFlyoutHeaderForegroundThemeBrush}"/> 
     <Setter Property="Background" Value="{ThemeResource SettingsFlyoutBackgroundThemeBrush}"/> 
     <Setter Property="BorderThickness" Value="1,0,0,0"/> 
     <Setter Property="Padding" Value="39,33,40,33"/> 
     <Setter Property="HorizontalContentAlignment" Value="Left"/> 
     <Setter Property="VerticalContentAlignment" Value="Top"/> 
     <Setter Property="IsTabStop" Value="False"/> 
     <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/> 
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/> 
     <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> 
     <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/> 
     <Setter Property="Width" Value="346"/> 
     <Setter Property="MinWidth" Value="320"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="SettingsFlyout"> 
        <Border BorderBrush="{Binding TemplateSettings.BorderBrush, RelativeSource={RelativeSource Mode=TemplatedParent}}" BorderThickness="{Binding TemplateSettings.BorderThickness, RelativeSource={RelativeSource Mode=TemplatedParent}}" Background="{TemplateBinding Background}"> 
         <Border.Resources> 
          <Style x:Key="BackButtonStyle" TargetType="Button"> 
           <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}"/> 
           <Setter Property="FontSize" Value="39"/> 
           <Setter Property="Template"> 
            <Setter.Value> 
             <ControlTemplate TargetType="Button"> 
              <Grid x:Name="RootGrid"> 
               <VisualStateManager.VisualStateGroups> 
                <VisualStateGroup x:Name="CommonStates"> 
                 <VisualState x:Name="Normal"/> 
                 <VisualState x:Name="PointerOver"> 
                  <Storyboard> 
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Background"> 
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsFlyoutBackButtonPointerOverBackgroundThemeBrush}"/> 
                   </ObjectAnimationUsingKeyFrames> 
                  </Storyboard> 
                 </VisualState> 
                 <VisualState x:Name="Pressed"> 
                  <Storyboard> 
                   <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PressedBackground"/> 
                   <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PressedGlyph"/> 
                  </Storyboard> 
                 </VisualState> 
                 <VisualState x:Name="Disabled"> 
                  <Storyboard> 
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="RootGrid"> 
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
                   </ObjectAnimationUsingKeyFrames> 
                  </Storyboard> 
                 </VisualState> 
                </VisualStateGroup> 
                <VisualStateGroup x:Name="FocusStates"> 
                 <VisualState x:Name="Focused"> 
                  <Storyboard> 
                   <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/> 
                   <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/> 
                  </Storyboard> 
                 </VisualState> 
                 <VisualState x:Name="Unfocused"/> 
                 <VisualState x:Name="PointerFocused"/> 
                </VisualStateGroup> 
                <VisualStateGroup x:Name="SettingsEdgeLocationStates"> 
                 <VisualState x:Name="Right"/> 
                 <VisualState x:Name="Left"> 
                  <Storyboard> 
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Storyboard.TargetName="NormalGlyph"> 
                    <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE0AB;"/> 
                   </ObjectAnimationUsingKeyFrames> 
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Storyboard.TargetName="PressedGlyph"> 
                    <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE0AB;"/> 
                   </ObjectAnimationUsingKeyFrames> 
                  </Storyboard> 
                 </VisualState> 
                </VisualStateGroup> 
               </VisualStateManager.VisualStateGroups> 
               <Grid Background="Transparent" Margin="-12,-16,-10,-10"> 
                <Ellipse x:Name="Background" Fill="Transparent" HorizontalAlignment="Left" Height="30" Margin="12,0,0,0" Stroke="{TemplateBinding Foreground}" StrokeThickness="2" Width="30"/> 
                <TextBlock x:Name="NormalGlyph" AutomationProperties.AccessibilityView="Raw" Foreground="{TemplateBinding Foreground}" FontWeight="SemiLight" Margin="10,0,0,0" Text="&#xE0A6;"/> 
                <Ellipse x:Name="PressedBackground" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="30" Margin="12,0,0,0" Opacity="0" StrokeThickness="0" Width="30"/> 
                <TextBlock x:Name="PressedGlyph" AutomationProperties.AccessibilityView="Raw" Foreground="{TemplateBinding Background}" FontWeight="SemiLight" Margin="10,0,0,0" Opacity="0" Text="&#xE0A6;"/> 
               </Grid> 
               <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Margin="-3,-6,-3,0" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/> 
               <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Margin="-3,-6,-3,0" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/> 
              </Grid> 
             </ControlTemplate> 
            </Setter.Value> 
           </Setter> 
          </Style> 
         </Border.Resources> 
         <Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="80"/> 
           <RowDefinition Height="*"/> 
           <RowDefinition Height="Auto"/> 
          </Grid.RowDefinitions> 
          <Grid x:Name="Header" Background="{Binding TemplateSettings.HeaderBackground, RelativeSource={RelativeSource Mode=TemplatedParent}}"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="Auto"/> 
            <ColumnDefinition Width="*"/> 
            <ColumnDefinition Width="Auto"/> 
           </Grid.ColumnDefinitions> 
           <Button x:Name="BackButton" Background="{Binding TemplateSettings.HeaderBackground, RelativeSource={RelativeSource Mode=TemplatedParent}}" Foreground="{Binding TemplateSettings.HeaderForeground, RelativeSource={RelativeSource Mode=TemplatedParent}}" Height="30" Margin="39,0,0,12" Style="{StaticResource BackButtonStyle}" VerticalAlignment="Bottom" Width="30"/> 
           <TextBlock Grid.Column="1" Foreground="{Binding TemplateSettings.HeaderForeground, RelativeSource={RelativeSource Mode=TemplatedParent}}" FontWeight="SemiLight" FontSize="{ThemeResource SettingsFlyoutHeaderThemeFontSize}" FontFamily="{ThemeResource SettingsFlyoutHeaderThemeFontFamily}" Margin="10,0,0,13" Text="{TemplateBinding Title}" TextTrimming="CharacterEllipsis" VerticalAlignment="Bottom"/> 
           <Image Grid.Column="2" Height="30" Margin="0,0,40,15" Source="{Binding TemplateSettings.IconSource, RelativeSource={RelativeSource Mode=TemplatedParent}}" VerticalAlignment="Bottom" Width="30"/> 
          </Grid> 
          <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"> 
           <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{Binding TemplateSettings.ContentTransitions, RelativeSource={RelativeSource Mode=TemplatedParent}}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
          </ScrollViewer> 
          <Rectangle x:Name="InputPanePlaceholder" Grid.Row="2"/> 
         </Grid> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>