使用Storyboard XAML创建自定义控件

时间:2016-06-04 15:14:31

标签: c# xaml windows-10-universal

我在Windows 10 Universal App项目中创建了一个自定义控件,该项目包含一个Storyboard。故事板的代码如下所示:

<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#代码中以手动触发,因此我在创建自定义用户控件后不知道如何播放此故事板主页文件如下:`

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>

如何访问我的故事板?

1 个答案:

答案 0 :(得分:1)

由于我不知道您的$cert_length = unpack('N', chr(0).substr($raw, 12, 3))[1]; $cert_as_asn1 = substr($raw, 0, $cert_length); 是什么,所以我在这里写了一个示例,以便在ProgressRing.HelperClasser内使用Storyboard显示一个方法。我们知道,CustomControlCustomControl内部的模板控件,我们可以在ResourceDictionary内使用Storyboard,如下所示:

Generic.xaml

ControlTemplate

在此自定义控件的cs文件中:

<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>

一旦加载,我就在这里玩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(); } 。这里Control.GetTemplateChild method很有用,它有助于在实例化的Storyboard可视树中找到命名元素。然后你可以在这个元素中获取资源。

现在,如果你使用这样的自定义控件:

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" />