0

ストーリーボードを使用してアニメーション化できるグリッドに 8 つの画像を表示できる新しいプロジェクトの基礎として、Microsoft Kinect SDK SlideShow の例を使用しようとしています。ただし、アプリケーションを実行すると、画像が表示されません。各画像のバインディングを考えると、すべての画像が同じになることはわかっていますが、表示する画像を取得できません。私が得るのは、(デバッグ用に) グリッド線が表示された空白の画面だけです。ジェスチャを使用して、あるセットの 8 つの画像から別のセットにパネルをフリックできますが、どの画像も表示されません。

私が間違っていることを理解するのを手伝ってもらえますか?

<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>

4

1 に答える 1

0

多くの調査の結果、この一連の画像をアニメーション化する最良の方法は、StackPanel と通常の Storyboard を使用することであることがわかりました。Grid よりも、Stackpanel の添付プロパティをアニメーション化する方がはるかに簡単です。

添付プロパティの詳細

このページは、私が望んでいたことを達成するのに本当に役立ちました。MSDN の system.windows.uielement ページは、Stackpanel を操作するために変更できるプロパティを理解するのに役立ちました。

私のコードは現在動作しています。これが役立つことを願っています。

ここに私の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>
于 2012-06-29T15:33:22.523 に答える