0

I have a ListBox containing a DataTemplate, where I want to use a Dockpanel to let the last Child fill up the available space (Last Child in my case is the Textblock, which will be rendered in the center).

To do this, I have the following code (with additional DataTemplate on the ComboBox removed, since it isn't needed in the context of my question):

<ListBox x:Name="IsoLimitsList" ItemsSource="{Binding ISOLimits}" SelectedValue="{Binding SelectedISOLimit}" Margin="10, 0" BorderThickness="0" 
            Padding="0"  HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <DockPanel LastChildFill="True" Width="{Binding Path=ActualWidth, ElementName=IsoLimitsList}">
                <CheckBox IsChecked="{Binding IsActive}" DockPanel.Dock="Left" VerticalAlignment="Center"/>    
                <ComboBox ItemsSource="{Binding Path=DataContext.AllOxyColors, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" 
                            Width="150" DockPanel.Dock="Right" SelectedValue="{Binding Color, UpdateSourceTrigger=PropertyChanged}" SelectedValuePath="Value" VerticalAlignment="Center" HorizontalAlignment="Stretch"/>
                <TextBlock Text="{Binding Name}" Margin="5, 2" VerticalAlignment="Center" HorizontalAlignment="Stretch" />
            </DockPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

This works perfectly fine, except that the Dockpanel is just a few pixels too big, resulting in a Scrollbar within the Listbox:

enter image description here

Question is: Where does the extra width come from? Can I remove the extra width without having to write another dataconverter?

What I have tried so far:

  • Removed changed Padding/Margin values of all the elements, but they all work as expected.
  • Give the ListBox a fixed Width instead letting it stretch within its parent. Doesn't solve the issue.
Roland Deschain
  • 2,211
  • 19
  • 50
  • 1
    DockPanel will stretch on its own. Rather the ListBoxItem to Stretch using ItemContainerStyle. Avoid binding elements to parent dimensions. Rather make use of the natural sizing behavior of the panels. – BionicCode Jul 10 '21 at 14:27
  • Yep. Lose the actualwidth binding. Stretch the listboxitem content like https://stackoverflow.com/questions/838828/how-to-get-a-listbox-itemtemplate-to-stretch-horizontally-the-full-width-of-the – Andy Jul 10 '21 at 15:00
  • Also. I've never been much of a fan of dockpanel. I prefer grid and columns. Make the columns fixed width or share max width and * for the last one the combo. – Andy Jul 10 '21 at 15:02
  • Hey thanks for the suggestions, I'll give stretching the listbox via the itemcontainerstyle a try! :) The whole thing is a bit difficult, since this is just a part of a bigger GUI, where all sections are resizeable.. – Roland Deschain Jul 10 '21 at 15:56
  • So I changed to using a `Grid` and set `HorizontalAlignment" of a style targeting `ListboxItem` to `Stretch` using `ListBox.ItemContainerStyle` as you suggested. Works like a charm, thanks a bunch! If you want to add it as answer to the question, I'll gladly mark it :) – Roland Deschain Jul 11 '21 at 10:27

0 Answers0