Search code examples
uwpwin-universal-appuwp-xaml

uwp dynamic storyboard target name


I have a Button in inside a ListView.ItemTemplate which mimicks the behavior of a dropdown button. And I want to give the button a rotation animation by using a StoryBoard.

<Storyboard x:Name="FolderPathItemArrowAnimation">
    <DoubleAnimation
        By="90"
        Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
        Duration="0:0:0.25" />
</Storyboard>

<ListView
     Background="AntiqueWhite"
     HorizontalAlignment="Stretch"
     ItemsSource="{x:Bind FolderChain, Mode=OneWay}"
     ItemContainerStyle="{StaticResource StretchListViewItemStyle}"
     Style="{StaticResource HorizontalListViewStyle}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="models:FolderTree">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Button
                            Style="{StaticResource FolderChainButtonStyle}"
                            Click="PathItemButton_Click" >
                            <Button.Content>
                                <TextBlock Text="{x:Bind Name}" />
                            </Button.Content>
                        </Button>
                        <Button
                            Name="{x:Bind Id, Converter={StaticResource FolderChainDropdownButtonNameConverter}}"
                            Grid.Column="1"
                            Width="30"
                            Click="PathItemDropDownButton_Click"
                            Style="{StaticResource FolderChainButtonStyle}"
                            Content="&#xE974;"
                            FontFamily="Segoe MDL2 Assets"
                            RenderTransformOrigin=".5,.5" >
                            <Button.RenderTransform>
                                <RotateTransform />
                            </Button.RenderTransform>
                        </Button>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Below is the code to start the animation. When running, I get an Exception says that Cannot resolve TargetName FolderChainItemDropdownButton1. How can I use StoryBoard on ListView.ItemTemplate?

    private void PathItemDropDownButton_Click(object sender, RoutedEventArgs e)
    {
        Storyboard.SetTargetName(FolderPathItemArrowAnimation, (sender as FrameworkElement).Name);
        FolderPathItemArrowAnimation.Begin();
    }

Solution

  • get an Exception says that Cannot resolve TargetName FolderChainItemDropdownButton1

    It looks SetTargetName method can not get correct element where under DataTemplate. please try to use SetTarget method to replace.

    Storyboard.SetTarget(FolderPathItemArrowAnimation, (sender as FrameworkElement));