C# WPF实现动画渐入暗黑明亮主题切换效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了C# WPF实现动画渐入暗黑明亮主题切换效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

C# WPF实现动画渐入暗黑明亮主题切换效果

效果图如下

C# WPF实现动画渐入暗黑明亮主题切换效果,WPF开发心得,c#,wpf,开发语言
最近在Bilibili的桌面端看到一个黑白主题切换的效果感觉，挺有意思。于是我使用WPF尝试实现该效果。
主要的切换效果，基本实现不过还存在一些小瑕疵，比如字体等笔刷不能跟随动画进入进行切换。因为Bilibili的客户端是用electron写的，前端使用的html,css确实太强了，这咱只能佩服。

实现思路

在文末已付上代码的地址

UI使用三段式的布局，那么第一列和第三列可以使用白色或黑色来进行主题底色的实现。而第二列则使用一个带透明度的灰色进行覆盖底色
切换主题时，需要两部分操作，一是切换底色，二是切换文本等前景色的资源字典。因此我准备了三个资源字典进行主题切换。Main用于存储不变的笔刷资源，Light和Dark分别保存在明亮和暗黑两种状态下显示不同的资源。
切换底色，如果使用切换字典的方式，则无法实现动态效果，于是，我在底图层下使用一个圆形的绘图，并在切换动作时进行简单的缩放动画即可(此处，我使用DataTrigger与切换按钮的状态进行绑定，在状态改变时触发动画效果)

   <Ellipse Grid.ColumnSpan="3" Fill="#202020" RenderTransformOrigin="0.5,0.5" Margin="30" 
                 HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="1" Height="1">
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="BackEllipseScale"/>
                </TransformGroup>
            </Ellipse.RenderTransform>

            <Ellipse.Style>
                <Style TargetType="Ellipse">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=ThemeToggle,Path=IsChecked}" Value="True">
                            <Setter Property="Visibility" Value="Visible"/>
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.5" To="3500" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX">
                                            <DoubleAnimation.EasingFunction>
                                                <CubicEase EasingMode="EaseOut"/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <DoubleAnimation Duration="0:0:0.5" To="3500" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY">
                                            <DoubleAnimation.EasingFunction>
                                                <CubicEase EasingMode="EaseOut"/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX">
                                            <DoubleAnimation.EasingFunction>
                                                <CubicEase EasingMode="EaseOut"/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY">
                                            <DoubleAnimation.EasingFunction>
                                                <CubicEase EasingMode="EaseOut"/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Ellipse.Style>
        </Ellipse>

切换前景色，这个就比较简单了，使用基础的更改资源字典即可。（当前使用的资源都需要是 DynamicResource）

     private void ThemeToggle_Checked(object sender, RoutedEventArgs e)
        {
            SwitchTheme(true);
        }

        private void ThemeToggle_Unchecked(object sender, RoutedEventArgs e)
        {
            SwitchTheme(false);
        }
public void SwitchTheme(bool isDark)
        {
            var res = Application.Current.Resources.MergedDictionaries;
            ResourceDictionary dictionary = new ResourceDictionary();
            dictionary.Source = new Uri(isDark ? "./Dark.xaml" : "./Light.xaml", UriKind.Relative);
            res[1] = dictionary;
        }