How to stretch checkbox item the full width of the combobox

Question

I have a multiply combobox with checkbox items

<ComboBox  x:Name="cmb" IsEditable="True"  IsReadOnly="True" DropDownClosed="cmb_DropDownClosed">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
            <CheckBox Content="{Binding NmColumn }"  HorizontalAlignment="Stretch"
                      IsChecked="{Binding Path=bChecked, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 
                      Tag="{Binding IdColumn}"
                      />
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

When I click on checkbox all is well. But if the checkbox width less than the width of combobox, when I click to the right of the checkbox, the combobox closes. how to override this behavior?

Nones

Answer 1

Set HorizontalContentAlignment to Stretch in ComboBox.ItemContainerStyle:

<ComboBox  x:Name="cmb" IsEditable="True"  IsReadOnly="True" DropDownClosed="cmb_DropDownClosed">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <CheckBox Content="{Binding NmColumn }"  HorizontalAlignment="Stretch"
                  IsChecked="{Binding Path=bChecked, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 
                  Tag="{Binding IdColumn}"
                  />
                </StackPanel>
            </DataTemplate> 
        </ComboBox.ItemTemplate>
        <ComboBox.ItemContainerStyle>
            <Style TargetType="{x:Type ComboBoxItem}">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ComboBox.ItemContainerStyle>
    </ComboBox>

Lusterware

I just understand that Orientation="Horizontal" was a typo from copy pasting your code. It should be Vertical. sorry – Lusterware

At the border of the ComboBoxItem, there is still a chance to miss. – Keloid

I have tested, and this works for CheckBox items inside a ListBox just as well. Just use ListBox.ItemContainerStyle instead of ComboBox.ItemContainerStyle. Thanks! – Sentiment

Answer 2

The answer by Ramin is partially good. You aslo have to remove the <StackPanel Orientation="Horizontal"> from your data template.It's him that is restricting your checkbox from expanding on all ComboboxItem width.

<ComboBox  x:Name="cmb" IsEditable="True"  IsReadOnly="True" DropDownClosed="cmb_DropDownClosed">
    <ComboBox.ItemTemplate>
        <DataTemplate>

                <CheckBox Content="{Binding NmColumn }"  HorizontalAlignment="Stretch"
              IsChecked="{Binding Path=bChecked, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 
              Tag="{Binding IdColumn}"
              />

        </DataTemplate> 
    </ComboBox.ItemTemplate>
    <ComboBox.ItemContainerStyle>
        <Style TargetType="{x:Type ComboBoxItem}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>

Castara

Answer 3

All Answers did not work for me. What did the Trick was setting

HorizontalContentAlignment="Stretch"

for the CheckBox:

<ComboBox x:Name="combobox"
    Background="White"
    Padding="2"
    Text="{Binding ElementName=DockPanelTemplateComboCheck, Path=ComboTextFilter}"
    IsEditable="True"
    IsReadOnly="True"
    HorizontalAlignment="Stretch"
    ItemsSource="{Binding ...}"
    IsDropDownOpen="{Binding Path=DropOpen, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}, UpdateSourceTrigger=PropertyChanged}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <CheckBox IsChecked="{Binding IsChecked}" Content="{Binding Eintrag}" HorizontalContentAlignment="Stretch" Checked="CheckBox_Checked_Unchecked" Unchecked="CheckBox_Checked_Unchecked"/>
        </DataTemplate>
    </ComboBox.ItemTemplate>
    <ComboBox.ItemContainerStyle>
        <Style TargetType="{x:Type ComboBoxItem}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>

CodeBehind:

    private string combotextfilter = "<No Selection>";

    public string ComboTextFilter
    {
        get { return combotextfilter; }
        set
        {
            if (value != null && value.IndexOf("ComboModel") != -1) return;
            combotextfilter = value;
            NotifyPropertyChanged(nameof(ComboTextFilter));
        }
    }

    private void CheckBox_Checked_Unchecked(object sender, RoutedEventArgs e)
    {
        switch (((ObservableCollection<ComboModel>)combobox.ItemsSource).Count(x => x.IsChecked))
        {
            case 0:
                ComboTextFilter = "<No Selection>";
                break;
            case 1:
                ComboTextFilter = ((ObservableCollection<ComboModel>)combobox.ItemsSource).Where(x => x.IsChecked).First().Eintrag;
                break;
            default:
                ComboTextFilter = ((ObservableCollection<ComboModel>)combobox.ItemsSource).Where(x => x.IsChecked).Select(x => x.Eintrag).Aggregate((i, j) => i + " | " + j);
                //ComboTextFilter = "<Multiple Selected>";
                break;
        }

        NotifyPropertyChanged(nameof(C_Foreground));
    }

    public bool DropOpen
    {
        get { return dropopen; }
        set { dropopen = value; NotifyPropertyChanged(nameof(ComboTextFilter)); }
    }
    private bool dropopen = false;

Note: This ComboBox also changes the text of the ComboBox depending on the elements selected.

Matthias