对 WPF 控件的动态定义内容进行动画处理

Question

I need to create a UserControl with variable appearance but common behavior. Ie appearance can be different: a Square , a Polygon , or an Ellipse . But the control needs to be able to animate (fade in and out) the said Square / Polygon / Ellipse .

I can create three different controls and define a Storyboard in each, and point the Storyboard to whatever Shape I have inside my control. But I want to define the Storyboard only once to follow the DRY principle. So I created a control without content like this and want to point the storyboards to whatever content it will have:

<UserControl x:Class="wpf_test.StarControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:wpf_test"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <Storyboard x:Key="FadeInStoryboard">
            <DoubleAnimation Storyboard.TargetName="?????"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0:0:2"
                             From="0"
                             To="1"/>
        </Storyboard>
        <Storyboard x:Key="FadeOutStoryboard">
            <DoubleAnimation Storyboard.TargetName="?????"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0:0:2"
                             From="1"
                             To="0"/>
        </Storyboard>
    </UserControl.Resources>
    

</UserControl>

I can then put whatever Shape I need inside that control, eg using a Syle with Template setter, but my problem I don't know how to point my Storyboard s to that future Shape, ie what to put into the Storyboard.TargetName="?????" instead of the question marks.

Answer 1

As per @Andy's and @EldHasp's comments, the solution was to add a name on the UserControl and animate the Opacity of the UserControl itself.

<UserControl x:Class="wpf_test.StarControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:wpf_test"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300"
             x:Name="ThisStarControl">
    <UserControl.Resources>
        <Storyboard x:Key="FadeInStoryboard">
            <DoubleAnimation Storyboard.TargetName="ThisStarControl"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0:0:2"
                             From="0"
                             To="1"/>
        </Storyboard>
        <Storyboard x:Key="FadeOutStoryboard">
            <DoubleAnimation Storyboard.TargetName="ThisStarControl"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0:0:2"
                             From="1"
                             To="0"/>
        </Storyboard>
    </UserControl.Resources>
    
</UserControl>