Re: A problem with playing Storyboard

03-20-2009 2:49 AM |

Hi  BrightStar，

Can you please describe your expect in detail? Don't you want the image display when the page load?

brightstar:

The photo musn't be here, and the button must be aligned at center as you can see it in 1st screen.

You can define tow rows  in Grid, and  place the image in the first row and the button in the second row and set their HorizontalAlignment is center to align them at center.

like below:

<UserControl x:Class="testcase1.image"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <UserControl.Resources>
        <Storyboard x:Name="Storyboard1">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-167"/>
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="52"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Clip>
            <RectangleGeometry Rect="0,0,300,400"></RectangleGeometry>
        </Grid.Clip>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
            <Image  Source="100_0747.JPG" Visibility="Collapsed" RenderTransformOrigin="0.5,0.5" x:Name="image1" Grid.Row="0" Grid.Column="0">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
            
        </Image>
        <Button x:Name="btn" Content="click me" Click="btn_Click" Width="100" Height="35" Grid.Row="1" HorizontalAlignment="Center"  Grid.Column="0" ></Button>
    </Grid>
</UserControl>

 

private void btn_Click(object sender, RoutedEventArgs e)
        {
            this.image1.Visibility = Visibility.Visible;
            this.Storyboard1.Begin();
           
        }

If you misunderstand you, please let us know.