Создать пользовательский контроль с раскадкой XAML

Question

Я создал пользовательский элемент управления в проекте Windows 10 Universal App, который содержит раскадровку. Кодекс раскадровке выглядит так:

<Storyboard x:Key="StatisticUpdateAnnimation"> 
     <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(RingSlice.EndAngle)" Storyboard.TargetName="ringSlice"> 
     <EasingDoubleKeyFrame KeyTime="0" Value="45"/> 
     <EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="{Binding Angle}"> 
      <EasingDoubleKeyFrame.EasingFunction> 
       <CubicEase EasingMode="EaseIn"/> 
      </EasingDoubleKeyFrame.EasingFunction> 
     </EasingDoubleKeyFrame> 
    </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 

Как вы можете увидеть x:Key = "StatisticUpdateAnnimation, раскадровка должна быть вызвана только вручную в C# код, так что я не знаю, как играть в эту раскадровку после того как я создал Управление пользовательским пользователя в файле MainPage, как это: `

local:ProgressRing x:Name="Progress" Margin="7" VerticalAlignment="Top" HorizontalAlignment="Center" Tapped="ProgressRing_Tapped"/> 

стиль, как это

<Style TargetType="local:RingPresenter" > 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="local:RingPresenter"> 
       <Grid> 
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Mode=TwoWay, ElementName=Representor, Path=EndAngle}" FontFamily="Vladimir Script" FontSize="48"></TextBlock> 
        <helper:RingSlice InnerRadius="100" Radius="150" StartAngle="0" EndAngle="{TemplateBinding Angle}" Fill="DarkCyan" x:Name="ringSlice"> 
        </helper:RingSlice> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

как могу ли я получить доступ к моей раскадровке?

Answer 1

Поскольку я не знаю, что является вашим ProgressRing.HelperClasser, здесь я написал образец, чтобы показать один метод, используя Storyboard внутри CustomControl. Как мы знаем, CustomControl является контроль шаблон внутри ResourceDictionary, мы можем, например, использовать Storyboard внутри ControlTemplate как это:

Generic.xaml

<Style TargetType="local:ProgressRing"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="local:ProgressRing"> 
       <Grid x:Name="RootGrid"> 
        <Grid.Resources> 
         <Storyboard x:Key="std"> 
          <ColorAnimation Storyboard.TargetName="brush" Storyboard.TargetProperty="Color" 
              Duration="0:0:2" From="LightBlue" To="Red" AutoReverse="True" /> 
         </Storyboard> 
        </Grid.Resources> 
        <Ellipse Width="100" Height="100"> 
         <Ellipse.Fill> 
          <SolidColorBrush x:Name="brush" /> 
         </Ellipse.Fill> 
        </Ellipse> 
        <TextBlock Text="111" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

И в файле CS этого пользовательского контроля:

public ProgressRing() 
{ 
    this.DefaultStyleKey = typeof(ProgressRing); 
    this.Loaded += ProgressRing_Loaded; 
} 

private void ProgressRing_Loaded(object sender, RoutedEventArgs e) 
{ 
    StoryboardPlay(); 
} 

public void StoryboardPlay() 
{ 
    var rootGrid = this.GetTemplateChild("RootGrid") as Grid; 
    var std = rootGrid.Resources["std"] as Storyboard; 
    std.Begin(); 
} 

Я играл в эту Storyboard здесь, когда он будет загружен. Здесь полезен Control.GetTemplateChild method, он помогает найти именованный элемент в созданном визуальном дереве ControlTemplate. Затем вы можете получить ресурс внутри этого элемента.

Теперь, если вы используете этот пользовательский элемент управления, как это:

<local:ProgressRing x:Name="Progress" Margin="7" VerticalAlignment="Top" HorizontalAlignment="Center" Tapped="ProgressRing_Tapped" /> 
<Button VerticalAlignment="Bottom" Content="Click to play storyboard" Click="Button_Click" /> 

Теперь вы можете получить раскадровка играть так, как это:

private void Button_Click(object sender, RoutedEventArgs e) 
{ 
    Progress.StoryboardPlay(); 
}