打不开█，█请薇█信 电话：15675872669██
首先说两件事：
1、大爆炸我还记着呢，先欠着吧。。。
2、博客搬家啦，新地址：https://blog.ultrabluefire.cn/
==========下面是正文==========
前些日子看到Xaml Controls Gallery的ToggleTheme过渡非常心水，大概是这样的：
在17134 SDK里写法如下：
1 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
2 <Grid.BackgroundTransition>
3 <BrushTransition Duration="0:0:0.4" />
4 </Grid.BackgroundTransition>
5 </Grid>
这和我原本的思路完全不同。
我原本的思路是定义一个静态的笔刷资源，然后动画修改他的Color，但是这样就不能和系统的笔刷资源很好的融合了。怎么办呢？
前天半梦半醒间，突然灵光一现，感觉可以用一个附加属性作为中间层，给Background赋临时的笔刷实现过渡。
闲话不多说，开干。
首先我们需要一个画刷，这个画刷要实现以下功能：
- 拥有一个Color属性。
- 对Color属性赋值时会播放动画。
- 动画播放结束触发事件。
- 可以从外部清理事件。
这个可以使用Storyboard，CompositionAnimation手动Start或者ImplicitAnimation实现，在这里我选择了我最顺手的Composition实现。
下面贴代码：
View Code
这样这个笔刷在每次修改Color的时候就能自动触发动画了，这完成了我思路的第一步，接下来我们需要一个Background属性设置时的中间层，用来给两个颜色之间添加过渡，这个使用附加属性和Behavior都可以实现。
我开始选择了Behavior，优点是可以在VisualState的Storyboard节点中赋值，而且由于每个Behavior都是独立的属性，可以存储更多的非公共属性、状态等；但是缺点也非常明显，使用Behavior要引入"Microsoft.Xaml.Behaviors.Uwp.Managed"这个包，使用的时候也要使用至少三行代码。
而附加属性呢，优点是原生和短，缺点是不能存储过多状态，也不能在Storyboard里使用，只能用Setter控制。
不过对于我们的需求呢，只需要Background和Duration两个属性，综上所述，最终我选择了附加属性实现。
闲话不多说，继续贴代码：
View Code
调用的时候就不能直接设置Background了：
1 <Grid helper:TransitionsHelper.Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
2 <Button x:Name="ToggleTheme" Click="ToggleTheme_Click">ToggleTheme</Button>
3 </Grid>
在Style里调用方法也类似：
1 <!-- Element中 -->
2 <Grid x:Name="RootGrid" helper:TransitionsHelper.Background="{TemplateBinding Background}">
3 ...
4 </Grid>
5
6 <!-- VisualState中 -->
7 <VisualState x:Name="TestState">
8 <VisualState.Setter>
9 <Setter Target="RootGrid.(helper:TransitionsHelper.Background)" Value="{Binding RelativeSource={RelativeSource TemplatedParent},Path=SecondBackground}" />
10 </VisualState.Setter>
11 </VisualState>
这里还有个点要注意，在VisualState中，不管是Storyboard还是Setter，如果要修改模板绑定，直接写Value="{TemplateBinding XXX}"会报错，正确的写法是Value="{Binding RelativeSource={RelativeSource TemplatedParent},Path=SecondBackground}"。