Change alignment of text inside AutoSuggestBox (UWP Xaml)

Question

this might be silly question..

I have AutoSuggestBox inside StackPanel with other objects there:

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

The problem is that the text inside AutoSuggestBox is on top and not center.

I have tried solution from other questions which use Style, but when I use Style (No matter what property I put inside) it is deleting the "find" icon I put in the 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>

When I remove the "Strech" property, it looks even worse:

I want that text inside AutoSuggestBox will be in center, with AutoSuggestBox streched vertically in the StackPanel, and keep the "Find" icon. Any ideas? thanks

Answer 1

To achieve your target, you need to customize the TextBox's ControlTemplate in AutoSuggestBox's style.

You could follow Use tools to work with themes easily to find the default AutoSuggestBoxTextBoxStyle. Then, you will find that there's a ContentControl named as 'PlaceholderTextContentPresenter'. It's used to show the 'Search Reg' text. You need to set VerticalAlignment="Center" for it to make the text be in vertical center.

See my code sample for reference:

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