Question

I am trying to use the Microsoft Kinect SDK SlideShow example as the basis for a new project where I can display 8 images in a grid which can be animated using a Storyboard. However, when I run the application, none of the images display. I realize that all of the images will be the same right now given the binding for each image, but I can’t get any of the images to display. All I get is a blank screen with the gridlines shown (for debugging). I can use gestures to flick through a panel from one set of 8 images to another, but none of the images display.

Can you help me see what I am doing wrong?

<Window x:Name="window" x:Class="Microsoft.Samples.Kinect.Slideshow.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Slide Show" Height="735" Width="800" >
<Window.Resources>
    <SolidColorBrush x:Key="MediumGreyBrush" Color="#ff6e6e6e"/>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    <Storyboard x:Key="LeftAnimate">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="previous">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="next">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="current">
            <EasingThicknessKeyFrame KeyTime="0" Value="2000,0,-2000,0"/>
            <EasingThicknessKeyFrame KeyTime="0:0:0.5" Value="0"/>
        </ThicknessAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="RightAnimate">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="previous">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="next">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="current">
            <EasingThicknessKeyFrame KeyTime="0" Value="-2000,0,2000,0"/>
            <EasingThicknessKeyFrame KeyTime="0:0:0.5" Value="0"/>
        </ThicknessAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Grid DataContext="{Binding ElementName=window}" Margin="10 0 10 0">
    <Grid.RowDefinitions>
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid>

        <Grid x:Name="next" ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <!-- Change the binding to the correct picture or video -->
            <Image Grid.Column="0" Grid.Row="0" Source="{Binding NextPicture}" Opacity="0"/>
            <Image Grid.Column="1" Grid.Row="0" Source="{Binding NextPicture}" Opacity="0"/>
            <Image Grid.Column="2" Grid.Row="0" Source="{Binding NextPicture}" Opacity="0"/>
            <Image Grid.Column="3" Grid.Row="0" Source="{Binding NextPicture}" Opacity="0"/>
            <Image Grid.Column="0" Grid.Row="1" Source="{Binding NextPicture}" Opacity="0"/>
            <Image Grid.Column="1" Grid.Row="1" Source="{Binding NextPicture}" Opacity="0"/>
            <Image Grid.Column="2" Grid.Row="1" Source="{Binding NextPicture}" Opacity="0"/>
            <Image Grid.Column="3" Grid.Row="1" Source="{Binding NextPicture}" Opacity="0"/>

        <Grid x:Name="previous" ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <!-- Change the binding to the correct picture or video -->
            <Image Grid.Column="0" Grid.Row="0" Source="{Binding PreviousPicture}" Opacity="0"/>
            <Image Grid.Column="1" Grid.Row="0" Source="{Binding PreviousPicture}" Opacity="0"/>
            <Image Grid.Column="2" Grid.Row="0" Source="{Binding PreviousPicture}" Opacity="0"/>
            <Image Grid.Column="3" Grid.Row="0" Source="{Binding PreviousPicture}" Opacity="0"/>
            <Image Grid.Column="0" Grid.Row="1" Source="{Binding PreviousPicture}" Opacity="0"/>
            <Image Grid.Column="1" Grid.Row="1" Source="{Binding PreviousPicture}" Opacity="0"/>
            <Image Grid.Column="2" Grid.Row="1" Source="{Binding PreviousPicture}" Opacity="0"/>
            <Image Grid.Column="3" Grid.Row="1" Source="{Binding PreviousPicture}" Opacity="0"/>

        <Grid x:Name="current" ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <!-- Change the binding to the correct picture or video -->
            <Image Grid.Column="0" Grid.Row="0" Source="{Binding Picture}" Opacity="0"/>
            <Image Grid.Column="1" Grid.Row="0" Source="{Binding Picture}" Opacity="0"/>
            <Image Grid.Column="2" Grid.Row="0" Source="{Binding Picture}" Opacity="0"/>
            <Image Grid.Column="3" Grid.Row="0" Source="{Binding Picture}" Opacity="0"/>
            <Image Grid.Column="0" Grid.Row="1" Source="{Binding Picture}" Opacity="0"/>
            <Image Grid.Column="1" Grid.Row="1" Source="{Binding Picture}" Opacity="0"/>
            <Image Grid.Column="2" Grid.Row="1" Source="{Binding Picture}" Opacity="0"/>
            <Image Grid.Column="3" Grid.Row="1" Source="{Binding Picture}" Opacity="0"/>

    </Grid>

</Grid>

Answer 1

After much research I discovered that the best way to animate this set of images was using a StackPanel and a regular Storyboard. It is much easier to animate the attached properties of a Stackpanel than it is for a Grid.

More information on attached properties

This page really helped me to accomplish what I wanted. The system.windows.uielement page at MSDN helped me understand which properties could be changed to manipulate the Stackpanel.

My code is now working. I hope this helps.

Here is my XAML:

<Window.Resources>
    <Storyboard x:Key="SwipeRight">
        <DoubleAnimationUsingKeyFrames 
                    BeginTime="00:00:00" 
                    Storyboard.TargetName="StackPanel1"
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
            <SplineDoubleKeyFrame KeyTime="00:00:02" Value="-800"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Key="SwipeLeft">
        <DoubleAnimationUsingKeyFrames 
                    BeginTime="00:00:00" 
                    Storyboard.TargetName="StackPanel1"
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
            <SplineDoubleKeyFrame KeyTime="00:00:02" Value="+400"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

</Window.Resources>


<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1024" />
    </Grid.ColumnDefinitions>
    <StackPanel   Name="StackPanel1" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
        <StackPanel.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
                <SkewTransform AngleX="0" AngleY="0"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform X="0" Y="0"/>
            </TransformGroup>
        </StackPanel.RenderTransform>
        <Image Margin="0,50,0,0" Source="{Binding NextPicture}"  x:Name="title" Height="150" VerticalAlignment="Top" Stretch="Uniform"></Image>