XAML - 用于简单自定义控件的简单动画
我正在使用C＃开发Windows应用商店应用程序并遇到了一些我无法想象它很困难的事情，但我无法知道如何做到这一点。
在MainPage.xaml我创建了一个用户控件：StackPanel，水平方向，里面只有Image和TextBlock。像这样：
<!-- language: lang-xml -->
<StackPanel Width="300" Height="100" Orientation="Horizontal" Margin="0,0,0,20" Tapped="LoremIpsum_Tapped">
<Image Source="/Assets/pic.jpg" Margin="20"/>
<TextBlock FontFamily="Segoe UI" FontSize="30" VerticalAlignment="Center">
Lorem Ipsum
</TextBlock>
</StackPanel>
看起来像这样：
我将它用作自定义类型的按钮以进入某个子页面。现在的问题是，没有动画。我希望拥有ListItem在SplitView中具有的典型动画：按下时收缩，当释放时或指针退出控件的虚拟边框时恢复正常。我找不到与那些ListItems相关联的动画声明/定义（Common。StandardStyles.xaml Standard130ItemTemplate）。但我发现（here）有预定义的动画：PointerDownThemeAnimation和PointerUpThemeAnimation。但是后来我花了很长时间才找到如何将它们应用到控件中。您可能认为this site specifically about those pointer theme animations（关于C＃）中提到的示例应该有所帮助，但它会导致sample for HTML/Javascript animations。但我找到了解决方案here，here和here。
所以我需要在控制资源中使用Storyboard，这是一个名称，因此可以将控件作为目标，并在代码隐藏中使用事件处理程序。
应用于我的XAML就变成了这个：
<!-- language: lang-xml -->
<StackPanel x:Name="LoremIpsum" Width="300" Height="100" Orientation="Horizontal" Margin="0,0,0,20" Tapped="LoremIpsum_Tapped" PointerPressed="LoremIpsum_AnimDown" PointerReleased="LoremIpsum_AnimUp" PointerExited="LoremIpsum_AnimUp">
<Image Source="/Assets/pic.jpg" Margin="20"/>
<TextBlock FontFamily="Segoe UI" FontSize="30" VerticalAlignment="Center">
Lorem Ipsum
</TextBlock>
<StackPanel.Resources>
<Storyboard x:Name="pointerDownStoryboard">
<PointerDownThemeAnimation TargetName="LoremIpsum" />
</Storyboard>
<Storyboard x:Name="pointerUpStoryboard">
<PointerUpThemeAnimation TargetName="LoremIpsum" />
</Storyboard>
</StackPanel.Resources>
</StackPanel>
在代码隐藏中加上其他事件处理程序：
<!-- language: lang-cs -->
private void Latest_AnimDown(object sender, PointerRoutedEventArgs e)
{
pointerDownStoryboard.Begin();
}
private void Latest_AnimUp(object sender, PointerRoutedEventArgs e)
{
pointerUpStoryboard.Begin();
}
这很有用。但是......由于我有很多这样的用户控件，我当然不希望为每个控件添加所有这些。如前所述，Standard130ItemTemplate没有帮助。所以我想到了自定义控件。我希望我可以定义一个MyStackPanel除了StackPanel + StoryBoard之外的其他内容，并且定位到x：Name会起作用，也许我可以放置事件处理程序在LayoutAwarePage代码隐藏中，所有其他人都继承它。
我开始寻找如何做到这一点，并找到了如何创建自定义控件的示例：XAML user and custom controls sample。
Generic.xml中有自定义控件：
<!-- language: lang-xml -->
xmlns:local="using:UserAndCustomControls">
<Style TargetType="local:BasicCustomControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:BasicCustomControl">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
一个代码文件，但不是代码隐藏的代码：
<!-- language: lang-cs -->
namespace UserAndCustomControls
{
public sealed class BasicCustomControl : Control
{
public BasicCustomControl()
{
this.DefaultStyleKey = typeof(BasicCustomControl);
}
}
}
但样本中没有任何关于动画的内容。所以我玩了一下这个例子，尝试将StoryBoard添加到Border或ControlTemplate，将事件处理程序添加到自己创建的Generic.xaml.cs代码隐藏中。没有任何效果。
然后我找到this，但不确定如何以及为什么将事件处理程序放入BasicCustomControl类。无论如何我试过了：
在Generic.xaml：
<!-- language: lang-xml -->
xmlns:local="using:UserAndCustomControls">
<Style TargetType="local:BasicCustomControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:BasicCustomControl">
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Border.Resources>
<Storyboard x:Name="pointerDownStoryboard">
<PointerDownThemeAnimation TargetName="Border" />
</Storyboard>
<Storyboard x:Name="pointerUpStoryboard">
<PointerUpThemeAnimation TargetName="Border" />
</Storyboard>
</Border.Resources>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
在BasicCustomControl.cs：
<!-- language: lang-cs -->
protected override void OnPointerPressed(PointerRoutedEventArgs e)
{
((Storyboard)this.Resources["PointerDownThemeAnimation"]).Begin(this);
}
那不起作用。 Begin()方法不接受参数，如果没有参数，则构建成功，但单击控件时出现System.Runtime.InteropServices.COMException。
然后我在SO上发现了这个：How to add XAML storyboard animation to a full blown WPF Custom Control in an XBAP?
这似乎是一个有趣的解决方案，但我不明白。以下是自定义控件的VisualState内容的一些描述，但我不知道如何将其应用于我的需求：Quickstart: control templates
现在我已经花了相当多的时间在这上面，我只是想为这个简单的事情 - 一个简单的，甚至是预定义的自定义控件动画 - ，必须有一个简单的解决方案。我希望我只是忽略了一些事情并不是那么复杂。
总结问题：
-
Standard130ItemTemplate的动画在哪里定义并“附加”到模板？ - 是否有一个我可以“继承”的控件可以按照我想要的方式运行（只有三个事件的上/下动画）？
- 有没有办法创建那种我可以继承的控件 - 使用XAML + Code？
- 有没有办法用XAML做到这一点？这比前一种方式更可取吗？
- 是否有一个简单的示例或教程？
- 我可以下载和使用任何自定义控件集合吗？我找不到任何。
1 个答案:
答案 0 :(得分：0)
创建自定义样式。在此示例中，我将Image Source绑定到content字段。所以我只需要将我的路径放在该字段中的图像中（例如“Assets / Image.png”）。如果像第一次添加这样的自定义动画更容易理解，那就太好了。
<Style x:Key="ImageButtonStyle" TargetType="ButtonBase">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<Grid x:Name="RootGrid" Background="Transparent">
<Image x:Name="ImageLabel" Source="{TemplateBinding Content}"/>
<Rectangle
x:Name="FocusVisualWhite"
IsHitTestVisible="False"
Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="1.5"/>
<Rectangle
x:Name="FocusVisualBlack"
IsHitTestVisible="False"
Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="0.5"/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation TargetName="ImageLabel" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="FocusVisualWhite"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
<DoubleAnimation
Storyboard.TargetName="FocusVisualBlack"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetName="OutlineGlyph" Storyboard.TargetProperty="Opacity"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundCheckedGlyph" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？