How to make ComboBox's items layout take full width in UWP

Question

I have the following ComboBox with a custom DataTemplate for the combobox's ItemTemplate:

                    
<ComboBox SelectedIndex="{x:Bind PaletteType.GetHashCode()}"
                              x:Name="PaletteComboBox" MinWidth="200"
                              ItemsSource="{x:Bind ComboPalettes}"
                              SelectionChanged="PaletteComboBox_OnSelectionChanged">
    <ComboBox.ItemTemplate>
        <DataTemplate x:DataType="adapters:ComboPaletteAdapter">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                    <TextBlock Text="{x:Bind PaletteNameTranslatedResource}"
                                               HorizontalAlignment="Left"
                                               VerticalAlignment="Center"
                                               Margin="0,0,0,0" />
                    <StackPanel Orientation="Horizontal"
                                                HorizontalAlignment="Right"
                                                VerticalAlignment="Center" Spacing="8"
                                                Margin="0,4,0,0">
                        <Border Width="24"
                                                Height="24"
                                                Background="{x:Bind CurrentPalette.ColorRed, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}"
                                                CornerRadius="26"
                                                IsTapEnabled="False"
                                                x:Uid="SettingsPaletteColorRedTT" />
                        <Border Width="24"
                                                Height="24"
                                                Background="{x:Bind CurrentPalette.ColorOrange, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}"
                                                CornerRadius="26"
                                                IsTapEnabled="False"
                                                x:Uid="SettingsPaletteColorOrangeTT" />
                        <Border Width="24"
                                                Height="24"
                                                Background="{x:Bind CurrentPalette.ColorGreen, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}"
                                                CornerRadius="26"
                                                IsTapEnabled="False"
                                                x:Uid="SettingsPaletteColorGreenTT" />
                        <Border Width="24"
                                                Height="24"
                                                Background="{x:Bind CurrentPalette.ColorBlue, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}"
                                                CornerRadius="26"
                                                IsTapEnabled="False"
                                                x:Uid="SettingsPaletteColorBlueTT" />
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

I want to add a text to the left of the color borders, while aligning the colors to the right, but doesn't seem that HorizontalAlignment="Stretch" works.

The items space taken is always based on its content:

How can I make every item take full width of the combobox's dropdown menu?

Answer 1

How to make ComboBox's items layout take full width in UWP

The reason for the behavior you got is that you are setting the Width of the column as Auto. Please just use * instead.

Like this:

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

Then if you want to make all the color align to right, you might use Grid instead of Stackpanel

Here is the sample code that I use:

        <ComboBox x:Name="PaletteComboBox" MinWidth="200"
                          ItemsSource="{x:Bind ComboPalettes}">
        <ComboBox.ItemTemplate>
            <DataTemplate >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid Background="Yellow"   >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding }"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   Grid.Column="0"
                                   Margin="0,0,0,0" />
                        <StackPanel Orientation="Horizontal"
                                    Spacing="8"
                                    Grid.Column="1"
                                    HorizontalAlignment="Right"
                                    Margin="0,4,0,0">
                            <Border Width="24"
                                    Height="24"
                                    Background="Red"
                                    CornerRadius="26"
                                    IsTapEnabled="False"
                                    x:Uid="SettingsPaletteColorRedTT" />
                            <Border Width="24" 
                                    Height="24"
                                    Background="Gray"
                                    CornerRadius="26"
                                    IsTapEnabled="False"
                                    x:Uid="SettingsPaletteColorOrangeTT" />
                            <Border Width="24" 
                                    Height="24" 
                                    Background="Green" 
                                    CornerRadius="26"
                                    IsTapEnabled="False"
                                    x:Uid="SettingsPaletteColorGreenTT" />
                            <Border Width="24"
                                    Height="24"
                                    Background="Blue"
                                    CornerRadius="26"
                                    IsTapEnabled="False"
                                    x:Uid="SettingsPaletteColorBlueTT" />
                        </StackPanel>
                    </Grid>
                </Grid>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>

The result looks like: