Есть ли способ использовать раскадровку с элементами ListView / GridView?

Question

Вот мой вопрос:

1. В моем приложении UWP есть GridView. Каждый элемент в GridView содержит кнопку. Нравится следующее:

<GridView ItemsSource="{x:Bind ExampleItems, Mode=OneWay}" x:Name="mDataGridView">
    <GridView.ItemTemplate>
        <DataTemplate x:Name="DataTemplate" x:DataType="local:ItemTemplate">
            <StackPanel Height="100" Width="100" Background="OrangeRed" x:Name="rootPanel">
                <Grid Width="155" Height="210" Background="Red" x:Name="myGrid"/>
                <Button x:Name="mOpenDetailButton" Click="mOpenDetailButton_Click" Margin="0, 30, 20,0"/>
            </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

У меня также есть предопределенная анимация в раскадровке, такая как:

<Storyboard x:Name="OpenStoryboard">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="grid" x:Name="mOpenAnimation" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.095"/>
        <EasingDoubleKeyFrame KeyTime="00:00:00.1" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="CloseStoryboard">
    <DoubleAnimation Storyboard.TargetName="grid" Duration="00:00:00.1" x:Name="mCloseAnimation" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" To="0.095"/>
</Storyboard>

ОК, возникает вопрос, возможно ли использовать анимации, определенные в раскадровке, с элементами GridView? ? Что я хочу, это: когда пользователь нажимает кнопку mOpenDetailButton, запускается OpenStoryboard, и значение сетки ScaleY изменяется вместе с ней.

Любая помощь будет принята, спасибо.

Answer 1

Вы можете поместить раскадровку в StackPanel внутри DataTemplate и определить RenderTransform в myGrid в качестве целевого объекта StackPanel. В этом случае это упрощает спецификацию целевого объекта и более удобно использовать Storyboard в коде и воспроизводить его. Например:

.xaml:

<GridView ItemsSource="{x:Bind ExampleItems, Mode=OneWay}" x:Name="mDataGridView">
    <GridView.ItemTemplate>
        <DataTemplate x:Name="DataTemplate" x:DataType="local:ItemTemplate">
            <StackPanel Height="100" Width="100" Background="OrangeRed" x:Name="rootPanel">
                <StackPanel.Resources>
                    <Storyboard x:Name="OpenStoryboard">
                        <DoubleAnimationUsingKeyFrames 
                            Duration="0:0:0.2"
                            Storyboard.TargetProperty="ScaleY"
                            Storyboard.TargetName="transform" >
                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.095"/>
                            <EasingDoubleKeyFrame KeyTime="00:00:00.1" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </StackPanel.Resources>
                <Grid Width="100" Height="50" Background="Red" x:Name="myGrid">
                    <Grid.RenderTransform>
                        <CompositeTransform
                            x:Name="transform"
                            ScaleX="1" ScaleY="0" />
                    </Grid.RenderTransform>
                </Grid>

                <Button x:Name="mOpenDetailButton" Content="Mybutton" Click="mOpenDetailButton_Click" Margin="20"/>
            </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

.cs:

Сначала выберите родительскую панель (StackPanel) с помощью кнопки, затем получите анимацию раскадровки и начните играть. ит.

private void mOpenDetailButton_Click(object sender, RoutedEventArgs e)
{
    UIElement mybutton = sender as UIElement;
    StackPanel stackPanel = FindParent<StackPanel>(mybutton);
    object storyvalue = null;
    stackPanel?.Resources.TryGetValue("OpenStoryboard", out storyvalue);
    Storyboard storyboard = value as Storyboard;
    storyboard?.Begin();
}

public static T FindParent<T>(DependencyObject element)
            where T : DependencyObject
{
    while (element != null)
    {
        DependencyObject parent = VisualTreeHelper.GetParent(element);
        T candidate = parent as T;
        if (candidate != null)
        {
            return candidate;
        }
        element = parent;
    }
    return default(T);
}