Как анимировать элемент в ячейке сетки?

Question

Так что у меня есть этот элемент управления, где пользователь может выбирать разные периоды времени.

Как и более новый элемент управления навигацией, предоставляемый SDK, мне бы хотелось, чтобы выделенная фиолетовая линия оживляла выбранный период, выбранный пользователем.

Фиолетовая линия - это просто прямоугольник вGrid cell и когда пользователь щелкает один из периодов, event handler просто меняет cell, в котором находится прямоугольник.

Моим исходным решением было вычисление x и y положений grid cells с использованием их ширины и высоты.Затем просто создайте базовую анимацию от и до этой позиции, но это кажется грязным решением простой анимации.

Answer 1

Использование анимации для изменения значения (Grid.Column) прямоугольника было бы лучше.Вы можете использовать DiscreteObjectKeyFrame class.

Я просто сделал простой пример кода для вашей справки:

<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();
        }
    }