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

It s not pretty. But it works. I don t know any other way to access visual СomboBox items.

<ComboBox Name="ComboPalettesComboBox"
          ItemsSource="{Binding ComboPalettes}">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Grid Loaded="ItemGrid_OnLoaded">
                    <DockPanel>
                        <TextBlock Text="{Binding}"/>
                        <StackPanel Orientation="Horizontal"
                                    HorizontalAlignment="Right">
                            <StackPanel.Resources>
                                <Style TargetType="Border">
                                    <Setter Property="Width" Value="24"/>
                                    <Setter Property="Height" Value="24"/>
                                    <Setter Property="CornerRadius" Value="26"/>
                                </Style>
                            </StackPanel.Resources>
                            <Border Background="Red"/>
                            <Border Background="Orange"/>
                            <Border Background="Green"/>
                            <Border Background="Blue"/>
                        </StackPanel>
                    </DockPanel>
                </Grid>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>

private readonly List<Grid> _gridList = new List<Grid>();
    private bool _gridListIsFull;
    private double _maxGridWidth;

    public MainWindow()
    {
        InitializeComponent();

        Loaded += (sender, args) =>
        {
            Popup popup = ComboPalettesComboBox.Template.FindName("PART_Popup", ComboPalettesComboBox) as Popup;

            popup.Opened += (o, args2) =>
            {
                foreach (Grid grid in _gridList)
                {
                    grid.Width = _maxGridWidth;
                }

                _gridListIsFull = true;
            };
        };
    }

    private void ItemGrid_OnLoaded(object sender, RoutedEventArgs e)
    {
        if (_gridListIsFull)
        {
            _gridList.Clear();
            _gridListIsFull = false;
            _maxGridWidth = 0;
        }

        Grid grid = (Grid)sender;

        if (grid.ActualWidth > _maxGridWidth)
        {
            _maxGridWidth = grid.ActualWidth;
        }

        _gridList.Add(grid);
    }

Answer 2

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:

友情链接