WPF ListBox Animation from one Column to another

Hi to all,

I have a WPF, .Net 3.5, Visual Studio 2008, VB.Net application that I am developing on Windows Vista. The application is very basic. I am displaying all my stores departments in a listbox (see code below). I want to animate the listbox to "move" from a column span of 2 to have no column span. Doing it in blend does not give the "Animation look" that I want. It just shows the listbox covering the whole gridview in one second and the next it displays the listbox just covering one column. It does not animate the Transition.

I want to animate the transition of what I am trying to do, but don't know how to do this in order to make the listbox appear to re-size while the animation is in progress.

Any help in this regard would be appreciated.

Thanks
<Grid x:Name="contentGrid" Margin="0,76,0,0">
        	<Grid.RowDefinitions>
        		<RowDefinition Height="197.333"/>
        		<RowDefinition/>
        	</Grid.RowDefinitions>
        	<Grid.ColumnDefinitions>
        		<ColumnDefinition Width="292.836"/>
        		<ColumnDefinition/>
        		<ColumnDefinition Width="339.031"/>
        	</Grid.ColumnDefinitions>
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFC8C8C8" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>

<ListBox x:Name="DepListview" Background="{x:Null}" BorderBrush="{x:Null}" 
                      Foreground="{x:Null}" ItemTemplate="{DynamicResource DepartmentListview}" 
                      ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                      Grid.Column="1" RenderTransformOrigin="0.5,0.5" Margin="0" Grid.RowSpan="2" Grid.ColumnSpan="2" />
</Grid>

Open in new window

ALawrence007Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mikebirtCommented:
Hi,

i guess a story board animation of the listbox's Grid.ColumnSpan property from 1 to 2 goes directly - as it's an integer, you can't really span 1.1 columns. Maybe a different apporach would be to animate the width of that column? Or, set that column to Auto width and animate (with a story board on the width property), the size of your list box directly?

HTH

Mike

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ALawrence007Author Commented:
Thanks Mike. I ended up creating a rectangle in that column, got the actual width and then animated my listbox to shrink to that width. Your answer helped my in that direction.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft Development

From novice to tech pro — start learning today.