Question

我有一个带有设置弹出窗口的Windows 8.1应用程序。

我正在尝试扩展SettingsFlyout，以便修改它的顶部标题部分，使其包含TextBox而不是标题，如下所示

enter image description here

正如您在上面的UI中看到的那样，没有标题。

但是在SettingsFlyout中默认采用Title属性。我该如何覆盖它？

如果有人能指出我正确的方向，我会很高兴。在此先感谢。

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>

Windows 8.1 - 如何在SettingsFlyout中放置不同的元素（如TextBox）而不是标题字符串

1 个答案: