Wrap first, then scroll

I've read several posts regarding this topic, but haven't quite figured this out yet. I'd like the black squares in this WrapPanel to wrap first, then show the ScrollBar if it's still necessary. I have a working example where the Vertical ScrollBar only shows when necessary, but not the horizontal one.

Code Snippet

<Windowx:Class="WrapTesting.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WrapTesting"Height="300"Width="300"

>

<ScrollViewerVerticalScrollBarVisibility="Disabled"HorizontalScrollBarVisibility="Auto"HorizontalAlignment="Stretch"VerticalAlignment="Stretch">

<WrapPanelHeight="Auto" >

<RectangleFill="Black"Margin="10,10,0,0"Width="70"Height="70" />

<RectangleFill="Black"Margin="10,10,0,0"Width="70"Height="70" />

<RectangleFill="Black"Margin="10,10,0,0"Width="70"Height="70" />

<RectangleFill="Black"Margin="10,10,0,0"Width="70"Height="70" />

<RectangleFill="Black"Margin="10,10,0,0"Width="70"Height="70" />

<RectangleFill="Black"Margin="10,10,0,0"Width="70"Height="70" />

</WrapPanel>

</ScrollViewer>

</Window>

[3899 byte] By [bes7252] at [2008-1-5]
# 1
I'm not sure exactly what your requirements are here, so I'll suggest the easiest thing first:

If you set WrapPanel's Orientation to Vertical it will do what you want it to, but the ordering of the items might not be what you want (top to bottom, left to right instead of left to right, top to bottom).

If that works for your requirements, great, otherwise describe what you need and we can figure something out. Probably using a customized Panel.

MattEland at 2007-10-3 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 2

Unfortuantely Top-Bottom,Left-Right won't work in this case. I need Left-Right, Top-Bottom.

Brian

bes7252 at 2007-10-3 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 3

Simple enough Give your Window (or whatever the toplevel host for your WrapPanel will be) a name. Then bind the width of your wrappanel to the width of your window.

Code Snippet

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WrapTesting" Height="300" Width="300"

x:Name="Top"

>


<ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<WrapPanel Height="Auto" Width="{Binding ElementName=Top, Path=Width}" >
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />
<Rectangle Fill="Black" Margin="10,10,0,0" Width="70" Height="70" />

</WrapPanel>
</ScrollViewer>

</Window>

That will get the effect you want.

ivolved_Mike_Brown at 2007-10-3 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 4
Well, that works, but I'm not sure it matches his initial requirements. It sounded like he wanted something that scrolled left to right. I'm not quite sure how that would work with a horizontal wrap panel.

If vertical scrolling is fine then Mike's answer is spot on.

MattEland at 2007-10-3 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 5

Oh if he want's horizontal scrolling all he has to do is reverse it...set the Width to auto and bind the Height to the container's height (or to a hardcode limit)....

oh wait...that won't work because it will scroll before it wraps. It looks like that would take some custom coding...to accomplish.

ivolved_Mike_Brown at 2007-10-3 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...

Visual Studio Orcas

Site Classified