XAML 如何在WinUI-3C #中的shimmer控件中创建波浪动画？

pieyvz9o 于 2023-04-27 发布在其他

关注(0)|答案(1)|浏览(131)

在WinUI-3中，我创建了Shimmer控件结构，用于使用椭圆和矩形。

<Style x:Key="ShimmerStyle" TargetType="local:Shimmer" >
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Fill" Value="{ThemeResource ShimmerFillColor}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:Shimmer">
                    <StackPanel>
                        <Grid x:Name="Grid1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>

                            <Ellipse x:Name="Eli" Grid.Row="0" Grid.Column="0" Height="200" Width="200" Fill="{TemplateBinding Fill}" HorizontalAlignment="Left">
                            </Ellipse>
                            <Rectangle x:Name="Rect" Margin="40,30,50,100" Grid.Row="0" Grid.Column="1" Height="60" Width="800"  Fill="{TemplateBinding Fill}" Opacity="0.8" />
                            <Rectangle x:Name="Rect1" Grid.Row="0" Grid.Column="1" Margin="40,90,0,0" Height="60" Width="300" Fill="{TemplateBinding Fill}"  HorizontalAlignment="Left"/>
                        </Grid>
                        <Grid x:Name="Grid2" >
                            <ContentControl >
                                <ContentPresenter Content="{TemplateBinding Content}"/>
                            </ContentControl>
                        </Grid>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value> 
        </Setter>
    </Style>
   <Style BasedOn="{StaticResource ShimmerStyle}" TargetType="local:Shimmer"/>

在我的Shimmer类中，我已经创建了WaveColor和WaveDirection以及AnimationDuration属性。我已经实现了Fill，IsActive和Content属性。当IsActive属性为true时。在我的Shimmer控件中显示。当IsActive属性为www.example.com时，false.myShimmer控件被隐藏并且它显示了content属性。
如何在WinUI-3中为我的Shimmer控件创建波浪动画？请帮助我
我试着用VisualStateGroup在XAML端用Storyboard动画代码。但是我不能创建它。

xaml

来源：https://stackoverflow.com/questions/76054774/how-to-create-a-wave-animation-in-my-shimmer-control-in-winui-3-c

1条答案

按热度按时间

zlwx9yxi1#

如何在WinUI-3C #中的shimmer控件中创建波浪动画？
你有很多方法来实现这样的动画，第一个示例方法是使用ColorAnimation和DoubleAnimation为LinearGradientBrush GradientStop Offset和Color属性做动画

用法

<Grid x:Name="LogoGrid">
    <Grid.Resources>
        <Storyboard x:Name="LoadingStoryBoard">
            <ColorAnimation
                EnableDependentAnimation="True"
                RepeatBehavior="Forever"
                Storyboard.TargetName="LogoGrid"
                Storyboard.TargetProperty="(UIElement.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
                From="Transparent"
                To="RosyBrown"
                Duration="0:0:2" />
            <DoubleAnimation
                EnableDependentAnimation="True"
                RepeatBehavior="Forever"
                Storyboard.TargetName="LogoGrid"
                Storyboard.TargetProperty="(UIElement.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Offset)"
                From="0"
                To="1"
                Duration="0:0:2" />
            <ColorAnimation
                EnableDependentAnimation="True"
                RepeatBehavior="Forever"
                Storyboard.TargetName="LogoGrid"
                Storyboard.TargetProperty="(UIElement.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)"
                From="RosyBrown"
                To="Transparent"
                Duration="0:0:2" />
        </Storyboard>
    </Grid.Resources>
    <Grid.Background>
        <LinearGradientBrush x:Name="LogoBackgroundBrush" StartPoint="0,0" EndPoint="1,1">
            <GradientStop x:Name="Stop0" Offset="0" Color="Transparent" />
            <GradientStop x:Name="Stop1" Offset="0.5" Color="RosyBrown" />
            <GradientStop x:Name="Stop2" Offset="1" Color="RosyBrown" />
        </LinearGradientBrush>
    </Grid.Background>
</Grid>

代码隐藏

public MainPage()
 {
     this.InitializeComponent();
     Loaded += (sender, args) => LoadingStoryBoard.Begin();
 }

第二个完整的方法是Using lights in Windows UI，你可以参考official code sample来制作你自己的灯光动画。

赞(0）回复(0）举报 2023-04-27

我来回答

XAML 如何在WinUI-3C #中的shimmer控件中创建波浪动画？

1条答案

相关问题

热门标签

最新问答