How to Programaticly Slide an object from right to left into a Grid

Using Silverlight, XAML and C#, how do I programaticly slide an Object/UserControl from right to left into my view.

The problem I have is the VideoPlayer is still on screen from the begining. I set the start grid point to be Grid Column 9 but it still displays even though I only have 8 grid cols.

Im using a grid that has an 8 x 8 equal grid layout like so;

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" ></ColumnDefinition>
            <ColumnDefinition Width="*" ></ColumnDefinition>
            <ColumnDefinition Width="*" ></ColumnDefinition>
            <ColumnDefinition Width="*" ></ColumnDefinition>
            <ColumnDefinition Width="*" ></ColumnDefinition>
            <ColumnDefinition Width="*" ></ColumnDefinition>
            <ColumnDefinition Width="*" ></ColumnDefinition>
            <ColumnDefinition Width="*" ></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition x:Name="Row0" Height="*"></RowDefinition>
            <RowDefinition x:Name="Row1" Height="*"></RowDefinition>
            <RowDefinition x:Name="Row2" Height="*"></RowDefinition>
            <RowDefinition x:Name="Row3" Height="*"></RowDefinition>
            <RowDefinition x:Name="Row4" Height="*"></RowDefinition>
            <RowDefinition x:Name="Row5" Height="*"></RowDefinition>
            <RowDefinition x:Name="Row6" Height="*"></RowDefinition>
            <RowDefinition x:Name="Row7" Height="*"></RowDefinition>
        </Grid.RowDefinitions>

I have set the VideoPlayer to start at Grid.Col 9 but it is still showing of Col 8

The Current XAML of the player is

        <Controls:VideoPlayer x:Name="videoPlayer"
            Grid.Row="1" 
            Grid.RowSpan="6"
            Grid.Column="9" <-- I wanted it off the grid but it still shows on col 8
            Grid.ColumnSpan="3" Margin="15"                    
               />

I currently have

 <Storyboard x:Name="slideInVideo">
               <DoubleAnimation Storyboard.TargetName="videoPlayer"
                      Storyboard.TargetProperty="Grid.Column"
                        From="8" To="5" Duration="00:00:10"/>

        </Storyboard>

Answers


There are number of problems with your approach.

  • First of all AFAIK you cant set an element to position in column 9 when you don't have 9 columns.
  • Do note that Grid.Row and Grid.Column properties points to index which is zero based.
  • Last but not least; Target should be Storyboard.TargetProperty="(Grid.Column)" note the parenthesis, it is required for animating attached properties.

You could use the built-in behaviors that are available within the expression interactivity and interactions namespaces

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"

More info here ... http://msdn.microsoft.com/en-us/library/ff724013(v=expression.40).aspx

Things like the FluidMoveBehavior and the ExtendedVisualStateManager.TransitionEffect can help you give the appearance of elements moving in from the side of the screen when they're loaded (or on other state changes).


Need Your Help

Web Application Time Zone Issue

c# asp.net timezone

We have a ASP.Net 2.0 web application up and running with the server in the Midwest (Eastern Standard Time). At this moment all of our customers are in the same time zone as the server. We are brin...

Line-height affecting spacing above first line and after last line

css

I've a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also