Resize inner control width when vertical scrollbar shows up

Question

I have:

<DockPanel>
  <!-- Left Panel -->
  <LocalViews:MyView1 DockPanel.Dock="Left" Width="250" />

and in MyView1

<DockPanel>
 <Button ...

 <ListBox>
   <ItemsControl.ItemTemplate>
    <DataTemplate>
      <GroupBox>
        <!-- stuff here -->
        ...
    </DataTemplate>

I don't know if that's relevant, but I have completely overridden the default ListItem style, because I want it to look like an ItemTemplate, but with support of SelectedItem:

<Style TargetType="ListBox" x:Key="XXX" BasedOn="{StaticResource {x:Type ListBox}}">
    <Style.Resources>
        <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Style.Resources>
</Style>

Vertical scrollbar doesn't show by default (good) and when I resize the window and decrease the available height, it shows up (also good). Problem is, the vertical scrollbar causes a horizontal scrollbar. I don't want that.

What's driving me crazy is that in the Designer (VS) it looks fine:

I have seen solutions where an additional space is left on the side of the inner control, to allow for the scrollbar to appear and another solution where the scrollbar is visible at all times so it doesn't 'jump out'. I don't like either.

My question is - what style do I apply to the listbox item template so that when the vertical scrollbar shows up, the item will resize its width to fit the now shrinked available horizontal space?

What's the rest of the ItemsControl look like, are you scrolling with an external ScrollViewer? — Joe

Joe Joe · Accepted Answer · 2017-01-13T22:10:51

How are you sizing your window(Or parent container)? Without any more information to go on, there's only a small case where both scroll bars appear like you describe - where the width of container hosting the scroll viewer is between the minimum width of your content, and the minimum width of the content plus the width of the scroll bar itself.

Normally, the vertical scroll bar appears no problem when the height decreases below the minimum height. Similarly with the horizontal and width. It's only when these two coincide where they "trigger" each other. Here's all three cases, see how it's only a 10by10 (ish) pixel size where the triggering occurs? This is pretty unlikely:

The only reason I can see this being a problem is if it's the default state. The chances of the user happening to have their window size at the correct point for this to be a regular occurance is pretty minimal. If it does happen, say at 'key' resolutions and your content is fixed - change the width of the internals by a few pixels until it doesn't.

The only other time this would occur regularly is if you are sizing your window based on the content, say with SizeToContent="WidthAndHeight" (or SizeToContent="Width"). This tells your window to size itself to the minimum possible width. The problem is, this is always in the case where adding a scroll bar will cause this behavior.

You could start your window maximized, or at a sensible resolution that's fixed. Or create some sensible logic/behavior to adjust the starting window size a little bigger than SizeToContent="WidthAndHeight" provides.

Edit

I see you set the width of the parent container as an absolute 250. Try setting this to 270 (The default width of a scrollbar on windows 10 is 17px).

Are you setting the content of the ListBox manually to 250 width somewhere as well? If the contents and the container are both 250, when the scrollbar appears there's nothing else for it to do but horizontal scroll.

As this doesn't happen with an identical structure on my end:

The natural conclusion is it's the content of the group box. Try commenting this out to confirm. Something isn't playing well with it's layout!

Resize inner control width when vertical scrollbar shows up

2 Answers