Skip to content

HorizontalContentAlignment of ListBox in AutoSuggestBox #3939

Closed

Description

@corvinsz

Bug explanation

Currently consumers can't alter the HorizontalContentAlignment of the ListBox in the AutoSuggestBox:

Image

Should be self-explanatory, but here is the (non-minimal) repro:

<materialDesign:AutoSuggestBox Margin="{StaticResource DefaultSpacing}"
                               HorizontalAlignment="Stretch"
                               materialDesign:HintAssist.Hint="Username or E-Mail"
                               materialDesign:TextFieldAssist.HasLeadingIcon="True"
                               materialDesign:TextFieldAssist.LeadingIcon="User"
                               DropDownBackground="{DynamicResource MaterialDesign.Brush.ToolBar.Background}"
                               DropDownElevation="Dp24"
                               DropDownMaxHeight="500"
                               Suggestions="{Binding EmailSuggestions}"
                               Text="{Binding Email, UpdateSourceTrigger=PropertyChanged}">
  <materialDesign:AutoSuggestBox.InputBindings>
    <KeyBinding Key="Enter" Command="{Binding LoginCommand}" />
  </materialDesign:AutoSuggestBox.InputBindings>
  <materialDesign:AutoSuggestBox.ItemTemplate>
    <DataTemplate>
      <Grid HorizontalAlignment="Stretch" utils:GridAssist.Columns="*, auto" Background="Fuchsia">
        <TextBlock Grid.Column="0" Text="{Binding .}" VerticalAlignment="Center" />
        <Button Grid.Column="1"
                Padding="2,0,0,0"
                Command="{Binding DataContext.RemoveSuggestion, RelativeSource={RelativeSource AncestorType=UserControl}}"
                Focusable="False"
                Style="{StaticResource MaterialDesignToolButton}">
          <materialDesign:PackIcon Width="16"
                                   Height="16"
                                   Margin="0"
                                   Kind="CloseCircle" />
        </Button>
      </Grid>
    </DataTemplate>
  </materialDesign:AutoSuggestBox.ItemTemplate>
</materialDesign:AutoSuggestBox>

Version

5.3.0-ci1132

Activity

  1. madenaras commented on Oct 6, 2025

    @madenaras

    Just use

    <materialDesign:AutoSuggestBox.ItemContainerStyle>
         <Style TargetType="ListBoxItem" BasedOn="{StaticResource MaterialDesignListBoxItem}">
               <Setter Property="HorizontalAlignment" Value="Stretch" />
        </Style>
    </materialDesign:AutoSuggestBox.ItemContainerStyle>
    
  2. corvinsz commented on Oct 6, 2025

    @corvinsz
    MemberAuthor

    Just use

    <materialDesign:AutoSuggestBox.ItemContainerStyle>
         <Style TargetType="ListBoxItem" BasedOn="{StaticResource MaterialDesignListBoxItem}">
               <Setter Property="HorizontalAlignment" Value="Stretch" />
        </Style>
    </materialDesign:AutoSuggestBox.ItemContainerStyle>
    

    While this works, it's in my opinion just a workaround.
    If you for example look at how it's done in other controls, the ComboBox for example stretches it's content horizontally and vertically by default. (I know it doesn't use a ListBox internally, but my point is the visual appearance, not the implementation detail)

    I currently don't see a reason to not implement the same behavior in the AutoSuggestBox?

  3. added this to the 5.3.1 milestone on Oct 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions