Need to dynamically size width of ListBox.ItemsPanel

hb52134214

I think all you need to set is: ListBox.HorizontalContentAlignment=Stretch If that doesn't work then a control containing the UserControl may need that value set as well.

fjparisIII

hb52134214 wrote:

ListBox.HorizontalContentAlignment=Stretch

Unfortunately, that doesn't work, and the control containing the UserControl is a Grid, which doesn't take HorizontalContentAlignment. I wonder if there's something missing in the WrapPanel XAML:

hb52134214

Dropping your code directly into a window with a few changes:

<ListBox    Name="listBox"
      BorderThickness="0"

-> HorizontalAlignment="Stretch"
-> HorizontalContentAlignment="Stretch"
-> ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectionMode="Extended">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Name="wrapPanel"
MinHeight="17"
-> HorizontalAlignment="Stretch"
Background="Blue"
IsItemsHost="True"
Orientation="Horizontal"
></WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

Does what I think you're trying to achieve. If the list box is inside a grid, a grid will default to resize with its container, but the columns may not? In the grid set the column width to '*':

If you have more than one column, do the rest have their widths set to 'auto'?

fjparisIII

Interesting that it's working for you outside of a Grid. You don't even have the ActualWidth binding in the WrapPanel. I took out my binding and added in the WrapPanel HorizontalAlignment to Stretch. It definitely needs the binding. Without that, the ListBoxItems don't even try to wrap properly.

hb52134214 wrote:

If the list box is inside a grid, a grid will default to resize with its container, but the columns may not? In the grid set the column width to '*':

The Grid itself does resize with its container (another Grid, which itself is the outer element of the Window). The Grid resizing is working fine, as is the ListBox itself in the third column of its Grid container. The problem is the ListBox.ItemsPanel is not. I need the first two columns to be hardcoded because they have to line up with columns in another grid beneath the one the UserControl is in. The third column does use *:

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

So still only a partial solution. If somehow I could get hold of the WrapPanel object, I'd be fat city, because I could just trigger on the width of the dialog. That was my original question: how do I get hold of the WrapPanel, since trying to use its Name ("wrapPanel") doesn't work, probably because it's in an ItemsPanelTemplate. The original reply suggested the ActualWidth binding, but that only half works: expanding the width of the containing window works, but not contracting it. Since I'm saving the width of the window, contracting its width and then restarting it fixes everything, but customers would roll their eyes at that work-around.

Gideon Engelberth

The ScrollContentPresenter comes from the default template of ListBox (or more accurately, the ScrollViewer that a ListBox creates). The ScrollContentPresenter is the region inside a ScrollViewer that is not used by the scroll bars. When I first replied, I was rather hasty with the copy and paste of the WrapPanel. You really do not need several of those properties set.

The Name is not useful because you won't be able to access the panel by name anyway. The IsItemsHost is ignored because it is already in the ItemsPanelTemplate. The default HorizontalAlignment is always what you end up wanting. There are several possible reasons that come to mind for why the control is not sizing back down. One is that the when you are using the UserControl elsewhere, the sizing is not bound correctly and is thus only growing. Another option is that some other control in the the grid where you use this control is not sizing back down. If you are doing manual sizing in the code-behind somewhere else in the application where this control is used, that could be preventing the control from sizing back down. (In general, you should not have explicit sizes, except on windows, or mess with sizes in the code-behind in WPF. The automatic sizing should be able to handle most cases.) Some XAML from where this control is used may show the problem. As a aside for design philosophy, does this UserControl do something special other than select horizontal wrap panel by default? If not, you would probably be better off defining a Style and applying it to any ListBox that you want to have this look and items panel. If you do leave this as a UserControl, you should take out the explicit ScrollViewer since the ListBox will create a ScrollViewer internally if needed.

hb52134214

Reviewing the posts, the list box is nested as follows:

Why do you have the list box in the scroll viewer? The list box already includes one. Is it included to enable setting the VerticalScrollBarVisibility="Auto" and HorizontalScrollBarVisibilty="Hidden"? If so, they can be set in the list box:

fjparisIII

The most important thing you wrote in your post is the following:

Gideon Engelberth wrote:

If you do leave this as a UserControl, you should take out the explicit ScrollViewer since the ListBox will create a ScrollViewer internally if needed.

Removing ScrollViewer solved all my problems! It now wraps properly on the fly whether I make the dialog wider or narrower. Thank you very much for pointing this out. I thought only TextBox and RichTextBox had built-in scrollbars. But let me comment on your other suggestion that I define a style instead of creating a UserControl. I did not embark on this decision lightly! The code behind in the UserControl is about 600 lines of C#. There is all kinds of data analysis required to style the individual ListBoxItems: different colors, different font styles, different font weights, underlining, all determined by the semantics of what the user types in. The original content of each ListBoxItem starts out as a TextBox that the user can type into. When he presses the Enter key, the code behind changes the ListBoxItem.Content to either a heavily styled TextBlock or a horizontal StackPanel with graphics and a styled TextBlock. The graphics in the StackPanel indicates to the user what will happen when he double-clicks the containing ListBoxItem. There are also several custom dependency properties and routed events that are defined in the UserControl. I don't think all this could be done just with styles. I removed the Name (residual when I was trying various incarnations of FindName that did not work), IsItemsHost, and HorizontalAlignment.

fjparisIII

hb52134214 wrote:

Why do you have the list box in the scroll viewer?

Because I was under the mistaken impression that the ListBox did not have a built-in scroll viewer. But those properties you say I can set

ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibilty="Hidden"

don't exist and are not needed anyhow. Removing the scrollviewer completely solved my problem. The XAML now looks like this:

Gideon Engelberth

That's a pretty decent reason to have a custom control. The only other approach I would suggest as a possibility is to wrap the coloring, styling, TextBox to StackPanel stuff into a UserControl of its and use that control as the ItemTemplate for a normal ListBox. Depending on how much of that 600 lines is needed to determine which TextBox is being entered in and which item to update, there could be some big savings by wrapping that into its own control.

Kasim_Husaini

Thanks This did the magic for me