ScrollBar "priority"

Question

I have an app where the main windows contains four different tabs. In the content area for one of the tabs I have a grid with two columns, where the left column contains a list of items and the right column has a detailed view for the selected item. When necessary, both columns are scrollable.

I'd like to add a minwidth and minheight to the grid container on this tab so that the two column layout is not overly distorted. However, I don't want to restrict MainWindow as the user may want to make the window quite small when viewing the other tabs.

If I wrap the tab content area with a ScrollViewer, the internal columns will never show scrollbars. Is it possible to have the internal scrollbars "take priority", and only have the scrollbars on the external ScrollViewer show up when the width/height drops below the minwidth/minheight of the grid?

Joe White Joe White · Accepted Answer · 2017-02-19T01:02:16

If I wrap the tab content area with a ScrollViewer, the internal columns will never show scrollbars.

Well, if you set the outer ScrollViewer to be vertically scrollable, sure, that would be true. So don't do that.

Just set the outer ScrollViewer to only scroll horizontally:

HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"

And set the inner ScrollViewers to only scroll vertically:

HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"

Here's a quick demo that I proved out in Kaxaml. If you make it narrower than 500 pixels, it'll gain a horizontal scrollbar; but the two inner columns still each have their own vertical scrollbar, and can scroll independently of each other.

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
  <UniformGrid Rows="1" Columns="2" MinWidth="500">
    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
      <Button Height="650">Column 1</Button>
    </ScrollViewer>
    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
      <Button Height="1500">Column 2</Button>
    </ScrollViewer>
  </UniformGrid>
</ScrollViewer>

ScrollBar "priority"

1 Answers