Adjust a scrollviewer's width dynamically

Question

I'm in the process of creating a UI, that's central component is a scrollviewer holding a stackpanel with a variable number of items. If there is not enough space on the screen, buttons on the left and right appear to allow clicking through the stackpanel using the scrollviewer. Note that the items are all of the same size.

<Grid.ColumnDefinitions>
   <ColumnDefinition x:Name="LeftButton" Width="Auto"/>
   <ColumnDefinition x:Name="Content" Width="*"/>
   <ColumnDefinition x:Name="RightButton" Width="Auto"/>
</Grid.ColumnDefinitions>

This is working fine. However, I'm now required to display only full / complete items. So if there are more items in the stackpanel, than I can display on the screen I don't want to partial items on the right or left appear. I just want my scrollbutton to appear, indicating that there are more items available. So, if a child is added to the stackpanel, the scrollviewer holding the stackpanel should see if there is enough space on the screen to display all items. If not it should reduce its width, so that the next (partially visible) item is hidden instead.

My question is: what's the best way to determine whether all items in the stackpanel can be displayed on the screen. And if not, how can I achieve hiding partial items probably displayed?

I have played around with the width of the Scrollviewer itself, relying on the SizeChanged event, but I'm not sure if this is the wisest method to achieve this behavior. Is it better to determine the MaxWidth of the scrollviewer on initialisation, set it accordingly and let it grow?

Thanks in advance, curiosity

Answer 1

I think that since this is such a customized scroll viewer, then you don't need to use the default scrollviewer at all, but instead use your own control based on stackpanel that will show the items. You could even implement an animation so that when pressing the left or right buttons, it would scroll in a nice way.