C# 参数化ResourceDictionary-这可能吗？

我想创建一个由许多旋转对象组成的控件，如下所示（节选）：

通过只利用资源，这样的事情可能发生吗

---

或者我需要创建一个自定义控件（通过代码隐藏属性运行）来实现这一点吗？

在下文中，我将介绍使用数据模板或用户控件解决问题的两种方法

项目控制和数据模板 您可以创建一个小型实用程序类型，以公开要自定义的属性

public class CirclingEllipseProperties
{
   public double Top { get; set; }

   public TimeSpan BeginTime { get; set; }
}

为绑定这些属性的椭圆项目创建数据模板

<DataTemplate x:Key="CirclingEllipseTemplate" DataType="{x:Type local:CirclingEllipseProperties}">
   <Canvas Width="100" Height="100">
      <Ellipse Canvas.Left="46"
               Canvas.Top="{Binding Top}"
               Width="8"
               Height="8"
               Fill="White" />
      <Canvas.RenderTransform>
         <RotateTransform x:Name="r0" Angle="0" CenterX="50" CenterY="50" />
      </Canvas.RenderTransform>
      <Canvas.Triggers>
         <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation BeginTime="{Binding BeginTime}"
                                   Storyboard.TargetName="r0"
                                   Storyboard.TargetProperty="Angle"
                                   To="360"
                                   Duration="0:0:1.5" />
               </Storyboard>
            </BeginStoryboard>
         </EventTrigger>
      </Canvas.Triggers>
   </Canvas>
</DataTemplate>

当然，如果您想重用

ItemsControl

，也可以为其创建样式

<Style x:Key="CirclingEllipseItemsControlStyle" TargetType="{x:Type ItemsControl}">
   <Setter Property="Width" Value="100" />
   <Setter Property="Height" Value="100" />
   <Setter Property="ItemTemplate" Value="{StaticResource CirclingEllipseTemplate}" />
   <Setter Property="ItemsPanel">
      <Setter.Value>
         <ItemsPanelTemplate>
            <Canvas />
         </ItemsPanelTemplate>
      </Setter.Value>
   </Setter>
</Style>

将

CirringellipseUserControl

的实例添加到您的

Canvas

中，或者像上面的方法一样为其创建一个

DataTemplate

，以便能够动态绑定项

<Canvas Width="100" Height="100">
   <local:CirclingEllipseUserControl BeginTime="0:0:0" Top="0" />
   <local:CirclingEllipseUserControl BeginTime="0:0:0.05" Top="10" />
   <local:CirclingEllipseUserControl BeginTime="0:0:0.1" Top="20" />
</Canvas>

---

答案很好，非常有创意！非常感谢您全面且内容丰富的回答！

<ItemsControl Width="100"
              Height="100"
              ItemTemplate="{StaticResource CirclingEllipseTemplate}">
   <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
         <Canvas />
      </ItemsPanelTemplate>
   </ItemsControl.ItemsPanel>
   <ItemsControl.ItemsSource>
      <x:Array Type="{x:Type local:CirclingEllipseProperties}">
         <local:CirclingEllipseProperties BeginTime="0:0:0" Top="0" />
         <local:CirclingEllipseProperties BeginTime="0:0:0.05" Top="10" />
         <local:CirclingEllipseProperties BeginTime="0:0:0.1" Top="20" />
      </x:Array>
   </ItemsControl.ItemsSource>
</ItemsControl>

<Style x:Key="CirclingEllipseItemsControlStyle" TargetType="{x:Type ItemsControl}">
   <Setter Property="Width" Value="100" />
   <Setter Property="Height" Value="100" />
   <Setter Property="ItemTemplate" Value="{StaticResource CirclingEllipseTemplate}" />
   <Setter Property="ItemsPanel">
      <Setter.Value>
         <ItemsPanelTemplate>
            <Canvas />
         </ItemsPanelTemplate>
      </Setter.Value>
   </Setter>
</Style>

<ItemsControl Style="{StaticResource CirclingEllipseItemsControlStyle}">
   <ItemsControl.ItemsSource>
      <!-- ...items source as above. -->
   </ItemsControl.ItemsSource>
</ItemsControl>

<UserControl x:Class="YourApp.CirclingEllipseUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:YourApp"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             Width="100"
             Height="100"
             mc:Ignorable="d">
   <Canvas>
      <Ellipse Canvas.Left="46"
               Canvas.Top="{Binding Top, RelativeSource={RelativeSource AncestorType={x:Type local:CirclingEllipseUserControl}}}"
               Width="8"
               Height="8"
               Fill="White" />
      <Canvas.RenderTransform>
         <RotateTransform x:Name="r0" Angle="0" CenterX="50" CenterY="50" />
      </Canvas.RenderTransform>
      <Canvas.Triggers>
         <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation BeginTime="{Binding BeginTime, RelativeSource={RelativeSource AncestorType={x:Type local:CirclingEllipseUserControl}}}"
                                   Storyboard.TargetName="r0"
                                   Storyboard.TargetProperty="Angle"
                                   To="360"
                                   Duration="0:0:1.5" />
               </Storyboard>
            </BeginStoryboard>
         </EventTrigger>
      </Canvas.Triggers>
   </Canvas>
</UserControl>

public partial class CirclingEllipseUserControl : UserControl
{
   public static readonly DependencyProperty BeginTimeProperty = DependencyProperty.Register(
      "BeginTime", typeof(TimeSpan), typeof(CirclingEllipseUserControl), new PropertyMetadata(TimeSpan.Zero));


   public static readonly DependencyProperty TopProperty = DependencyProperty.Register(
      "Top", typeof(double), typeof(CirclingEllipseUserControl), new PropertyMetadata(0.0));

   public double Top
   {
      get => (double)GetValue(TopProperty);
      set => SetValue(TopProperty, value);
   }

   public TimeSpan BeginTime
   {
      get => (TimeSpan)GetValue(BeginTimeProperty);
      set => SetValue(BeginTimeProperty, value);
   }

   public CirclingEllipseUserControl()
   {
      InitializeComponent();
   }
}

<Canvas Width="100" Height="100">
   <local:CirclingEllipseUserControl BeginTime="0:0:0" Top="0" />
   <local:CirclingEllipseUserControl BeginTime="0:0:0.05" Top="10" />
   <local:CirclingEllipseUserControl BeginTime="0:0:0.1" Top="20" />
</Canvas>