如何在网格单元上为项目设置动画？

Question

因此，我拥有此控件，用户可以在其中选择不同的时间段。

就像SDK提供的较新的导航控件一样，我希望突出显示的紫色线可以动画化为用户选择的选定时段。

紫色线只是Grid cell中的矩形，当用户单击一个句点时，event handler只需更改矩形所在的cell。

我最初的解决方案是使用宽度和高度计算x的{​​{1}}和y位置。然后只需从该位置到该位置创建一个基本动画，但这似乎是一个简单动画的混乱解决方案。

Answer 1

使用动画更改矩形的(Grid.Column)值会更好。您可以使用DiscreteObjectKeyFrame类。

我只是制作了一个简单的代码示例供您参考：

<Grid>
    <Grid Height="50">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Text="All" Grid.Column="0" Tapped="TextBlock_Tapped"></TextBlock>
        <TextBlock Text="Year" Grid.Column="1" Tapped="TextBlock_Tapped"></TextBlock>
        <TextBlock Text="Month" Grid.Column="2" Tapped="TextBlock_Tapped"></TextBlock>
        <TextBlock Text="Week" Grid.Column="3" Tapped="TextBlock_Tapped"></TextBlock>
        <TextBlock Text="Day" Grid.Column="4" Tapped="TextBlock_Tapped"></TextBlock>
        <Rectangle x:Name="rect" Height="5" Fill="Purple" VerticalAlignment="Bottom"></Rectangle>
    </Grid>
</Grid>

private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
    {
        TextBlock textBlock = sender as TextBlock;
        if (textBlock!= null)
        {
            int column = Grid.GetColumn(textBlock);
            Storyboard storyboard = new Storyboard();
            ObjectAnimationUsingKeyFrames objectAnimationUsingKeyFrames = new ObjectAnimationUsingKeyFrames();
            DiscreteObjectKeyFrame discreteObjectKeyFrame = new DiscreteObjectKeyFrame();
            discreteObjectKeyFrame.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));
            discreteObjectKeyFrame.Value = column;
            objectAnimationUsingKeyFrames.KeyFrames.Add(discreteObjectKeyFrame);
            Storyboard.SetTargetProperty(objectAnimationUsingKeyFrames, "(Grid.Column)");
            Storyboard.SetTarget(objectAnimationUsingKeyFrames, rect);
            storyboard.Children.Add(objectAnimationUsingKeyFrames);
            storyboard.Begin();
        }
    }