我正在使用 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
) 关联的动画声明/定义。但我发现(在这里)有预定义的动画:PointerDownThemeAnimation
和PointerUpThemeAnimation
。但是后来我花了很长时间才弄清楚如何将它们应用于控件。您可能认为本网站上特别提到的关于那些指针主题动画(关于 C#)的示例应该有所帮助,但它会导致HTML/Javascript 动画示例。但我在这里、这里和这里找到了解决方案。
所以我需要Storyboard
控件资源中的 s,一个名称,以便控件可以成为目标,并在代码隐藏中使用事件处理程序。
应用在我的 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
只不过是 a StackPanel
+ StoryBoard
s 的 a,并且定位到 x:Name 会起作用,也许我可以将事件处理程序放在 LayoutAwarePage 代码隐藏中,以便所有其他人都继承它。
我开始寻找如何做到这一点,并找到了如何创建自定义控件的示例:XAML 用户和自定义控件示例。
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
s 添加到 Border 或 ControlTemplate,将事件处理程序添加到自行创建的 Generic.xaml.cs 代码隐藏。没有任何效果。
然后我找到了这个,但不确定如何以及为什么将事件处理程序放入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 上找到了这个:如何在 XBAP 中将 XAML 故事板动画添加到完整的 WPF 自定义控件中?
这似乎是一个有趣的解决方案,但我不明白。这里还有一些自定义控件的 VisualState 内容的描述,但我不知道如何将其应用于我的需求:快速入门:控件模板
现在在这一点上我花了相当多的时间,我只是在想,对于这个简单的东西——一个简单的,甚至是自定义控件的预定义动画——必须有一个简单的解决方案。我希望我只是忽略了一些东西,它并没有那么复杂。
总结一下问题:
Standard130ItemTemplate
定义和“附加”到模板的动画在哪里?- 是否有一个我可以“继承”的控件以我想要的方式运行(只是三个事件的上/下动画)?
- 有没有一种方法可以使用 XAML + 代码创建我可以继承的那种控件?
- 有没有办法只用 XAML 做到这一点?这比前一种方式更可取吗?
- 有没有一个简单的例子或教程?
- 是否有任何我可以下载和使用的自定义控件集合?我找不到任何东西。