Изменить выравнивание текста внутри AutoSuggestBox (UWP Xaml)

Question

это может быть глупый вопрос ..

У меня есть AutoSuggestBox внутри StackPanel с другими объектами там:

<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Stretch">
        <ComboBox x:Name="BoardComboBox" PlaceholderText="Board" VerticalAlignment="Stretch"/>

        <AutoSuggestBox x:Name="SearchBox" QueryIcon="Find" PlaceholderText="Search reg   ." VerticalAlignment="Stretch">      
        </AutoSuggestBox>

        <Button>
            <StackPanel>
                <TextBlock Text="Load"/>
                <SymbolIcon Symbol="Document"/>
            </StackPanel>
        </Button>
            .....
 <StackPanel>

Проблема в том, что текст внутри AutoSuggestBox находится сверху, а не по центру.

Я пытался решить другие вопросы, в которых используется стиль, но когда я использую стиль (независимо от того, какое свойство я поместил внутри), он удаляетЗначок «найти», который я вставил в AutoSuggestBox

<AutoSuggestBox x:Name="SearchBox" QueryIcon="Find" PlaceholderText="Search reg   ." VerticalAlignment="Stretch" MinWidth="300">
        <AutoSuggestBox.TextBoxStyle>
            <Style TargetType="TextBox">
                <Setter Property="FontSize" Value="30"/>
            </Style>
        </AutoSuggestBox.TextBoxStyle>
</AutoSuggestBox>

Когда я удаляю свойство «Strech», оно выглядит еще хуже:

Я хочу, чтобы текст внутри AutoSuggestBox находился по центру, при этом AutoSuggestBox располагался вертикально в StackPanel и сохранял значок «Найти».Есть идеи?спасибо

Answer 1

Чтобы достичь цели, вам нужно настроить ControlTemplate TextBox в стиле AutoSuggestBox.

Вы можете следовать Использовать инструменты для простой работы с темами , чтобы найти AutoSuggestBoxTextBoxStyle по умолчанию. Затем вы обнаружите, что существует ContentControl, названный «PlaceholderTextContentPresenter». Он используется для отображения текста «Search Reg». Вам нужно установить VerticalAlignment="Center", чтобы текст располагался по центру по вертикали.

См. Мой пример кода для справки:

 <AutoSuggestBox x:Name="SearchBox" QueryIcon="Find" PlaceholderText="Search reg." VerticalAlignment="Stretch">
            <AutoSuggestBox.TextBoxStyle>
                <Style TargetType="TextBox">
                    ....
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TextBox">
                                <Grid>
                                    <Grid.Resources>
                                        <Style x:Name="DeleteButtonStyle" TargetType="Button">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="Button">
                                                        <Grid x:Name="ButtonLayoutGrid"
                                            BorderBrush="{ThemeResource TextControlButtonBorderBrush}"
                                            BorderThickness="{TemplateBinding BorderThickness}"
                                            Background="{ThemeResource TextControlButtonBackground}">

                                                            <VisualStateManager.VisualStateGroups>
                                                                <VisualStateGroup x:Name="CommonStates">
                                                                    <VisualState x:Name="Normal" />

                                                                    <VisualState x:Name="PointerOver">
                                                                        <Storyboard>
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
                                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPointerOver}" />
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
                                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPointerOver}" />
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
                                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPointerOver}" />
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                        </Storyboard>
                                                                    </VisualState>

                                                                    <VisualState x:Name="Pressed">
                                                                        <Storyboard>
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
                                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}" />
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
                                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPressed}" />
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
                                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}" />
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                        </Storyboard>
                                                                    </VisualState>

                                                                    <VisualState x:Name="Disabled">
                                                                        <Storyboard>
                                                                            <DoubleAnimation Storyboard.TargetName="ButtonLayoutGrid"
                                                                Storyboard.TargetProperty="Opacity"
                                                                To="0"
                                                                Duration="0" />
                                                                        </Storyboard>
                                                                    </VisualState>
                                                                </VisualStateGroup>
                                                            </VisualStateManager.VisualStateGroups>
                                                            <TextBlock x:Name="GlyphElement"
                                                Foreground="{ThemeResource TextControlButtonForeground}"
                                                VerticalAlignment="Center"
                                                HorizontalAlignment="Center"
                                                FontStyle="Normal"
                                                FontSize="{ThemeResource AutoSuggestBoxIconFontSize}"
                                                Text="&#xE10A;"
                                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                AutomationProperties.AccessibilityView="Raw" />
                                                        </Grid>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                        <Style x:Name="QueryButtonStyle" TargetType="Button">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="Button">
                                                        <ContentPresenter x:Name="ContentPresenter"
                                            Background="{ThemeResource TextControlButtonBackground}"
                                            BackgroundSizing="{TemplateBinding BackgroundSizing}"
                                            BorderBrush="{ThemeResource TextControlButtonBorderBrush}"
                                            BorderThickness="{TemplateBinding BorderThickness}"
                                            Content="{TemplateBinding Content}"
                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                            ContentTransitions="{TemplateBinding ContentTransitions}"
                                            FontSize="{ThemeResource AutoSuggestBoxIconFontSize}"
                                            Padding="{TemplateBinding Padding}"
                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                            AutomationProperties.AccessibilityView="Raw">

                                                            <VisualStateManager.VisualStateGroups>
                                                                <VisualStateGroup x:Name="CommonStates">
                                                                    <VisualState x:Name="Normal" />

                                                                    <VisualState x:Name="PointerOver">
                                                                        <Storyboard>
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPointerOver}" />
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPointerOver}" />
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPointerOver}" />
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                        </Storyboard>
                                                                    </VisualState>

                                                                    <VisualState x:Name="Pressed">
                                                                        <Storyboard>
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}" />
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPressed}" />
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}" />
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                        </Storyboard>
                                                                    </VisualState>

                                                                    <VisualState x:Name="Disabled">
                                                                        <Storyboard>
                                                                            <DoubleAnimation Storyboard.TargetName="ContentPresenter"
                                                                Storyboard.TargetProperty="Opacity"
                                                                To="0"
                                                                Duration="0" />
                                                                        </Storyboard>
                                                                    </VisualState>
                                                                </VisualStateGroup>
                                                            </VisualStateManager.VisualStateGroups>
                                                        </ContentPresenter>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Grid.Resources>

                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">

                                            <VisualState x:Name="Disabled">

                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundDisabled}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushDisabled}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundDisabled}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Normal" />

                                            <VisualState x:Name="PointerOver">

                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Focused">

                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundFocused}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocused}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushFocused}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="RequestedTheme">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Light" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="QueryButton" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForeground}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="ButtonStates">
                                            <VisualState x:Name="ButtonVisible">

                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="Visibility">
                                                        <DiscreteObjectKeyFrame KeyTime="0">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Visible</Visibility>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="ButtonCollapsed" />
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>

                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>

                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Border x:Name="BorderElement"
                        Grid.Row="1"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Grid.ColumnSpan="3"
                        Grid.RowSpan="1" />
                                    <ContentPresenter x:Name="HeaderContentPresenter"
                        x:DeferLoadStrategy="Lazy"
                        Visibility="Collapsed"
                        Grid.Row="0"
                        Foreground="{ThemeResource TextControlHeaderForeground}"
                        Margin="{ThemeResource AutoSuggestBoxTopHeaderMargin}"
                        Grid.ColumnSpan="3"
                        Content="{TemplateBinding Header}"
                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                        FontWeight="Normal"
                        TextWrapping="Wrap" />
                                    <ScrollViewer x:Name="ContentElement"
                        Grid.Row="1"
                        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                        IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                        IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                        IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                        Margin="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}"
                        IsTabStop="False"
                        AutomationProperties.AccessibilityView="Raw"
                        ZoomMode="Disabled" />
                                    <ContentControl x:Name="PlaceholderTextContentPresenter"
                        Grid.Row="1"
                        Foreground="{ThemeResource TextControlPlaceholderForeground}"
                        Margin="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}"
                        IsTabStop="False"
                        Grid.ColumnSpan="3"
                        Content="{TemplateBinding PlaceholderText}"
                        IsHitTestVisible="False" VerticalAlignment="Center" />
                                    <Button x:Name="DeleteButton"
                        Grid.Row="1"
                        Style="{StaticResource DeleteButtonStyle}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        IsTabStop="False"
                        Grid.Column="1"
                        Visibility="Collapsed"
                        FontSize="{TemplateBinding FontSize}"
                        MinWidth="34"
                        AutomationProperties.AccessibilityView="Raw"
                        VerticalAlignment="Stretch" />
                                    <Button x:Name="QueryButton"
                        Grid.Row="1"
                        Style="{StaticResource QueryButtonStyle}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        IsTabStop="False"
                        Grid.Column="2"
                        FontSize="{TemplateBinding FontSize}"
                        MinWidth="34"
                        Width="{TemplateBinding Height}"
                        VerticalAlignment="Stretch"
                        AutomationProperties.AccessibilityView="Raw" />
                                    <ContentPresenter x:Name="DescriptionPresenter"
                        Grid.Row="2"
                        Grid.ColumnSpan="3"
                        Content="{TemplateBinding Description}"
                        x:Load="False"
                        Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}"
                        AutomationProperties.AccessibilityView="Raw" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </AutoSuggestBox.TextBoxStyle>
        </AutoSuggestBox>