wpf 辉光卡片

看到有人用 Avalonia 实现,这里使用 wpf 实现

xaml

    <Grid>

        <Grid Width="150" Height="250">

            <Grid.Resources>
                <GradientStopCollection x:Key="GradientStopCollection">
                    <GradientStop Offset="0" Color="#5ddcff" />
                    <GradientStop Offset="0.43" Color="#3c67e3" />
                    <GradientStop Offset="1" Color="#4e00c2" />
                </GradientStopCollection>
            </Grid.Resources>

            <TextBlock
                Margin="0,0,0,-25" HorizontalAlignment="Center" VerticalAlignment="Bottom"
                FontSize="8" Foreground="AliceBlue" Opacity=".1" Text="质量是制造出来的" />

            <!--  背景  -->
            <Border
                BorderThickness="5" CornerRadius="8" RenderTransformOrigin=".5 .5">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX=".95" ScaleY=".95" />
                        <TranslateTransform Y="30" />
                    </TransformGroup>
                </Border.RenderTransform>
                <Border.Effect>
                    <BlurEffect Radius="130" />
                </Border.Effect>
                <Border.Background>
                    <LinearGradientBrush>
                        <!--  背景的辉光 + BlurEffect 效果  -->
                        <GradientBrush.GradientStops>
                            <StaticResource ResourceKey="GradientStopCollection" />
                        </GradientBrush.GradientStops>
                        <LinearGradientBrush.RelativeTransform>
                            <RotateTransform x:Name="BackgroundRotateTransform" Angle="0" CenterX=".5" CenterY=".5" />
                        </LinearGradientBrush.RelativeTransform>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>

            <!--  卡片  -->
            <Border
                Background="#191c29" BorderThickness="5" CornerRadius="8" Opacity=".95"
                RenderTransformOrigin=".5 .5">
                <Border.BorderBrush>
                    <LinearGradientBrush>
                        <!--  边框的辉光  -->
                        <GradientBrush.GradientStops>
                            <StaticResource ResourceKey="GradientStopCollection" />
                        </GradientBrush.GradientStops>
                        <LinearGradientBrush.RelativeTransform>
                            <RotateTransform x:Name="CardRotateTransform" Angle="0" CenterX=".5" CenterY=".5" />
                        </LinearGradientBrush.RelativeTransform>
                    </LinearGradientBrush>
                </Border.BorderBrush>
            </Border>

            <Grid.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                RepeatBehavior="Forever"
                                Storyboard.TargetName="CardRotateTransform" Storyboard.TargetProperty="Angle" From="0" To="360"
                                Duration="0:0:2.5" />
                            <DoubleAnimation
                                Storyboard.TargetName="BackgroundRotateTransform" Storyboard.TargetProperty="Angle" From="0" To="360"
                                Duration="0:0:2.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Grid.Triggers>

        </Grid>

    </Grid>

https://www.bilibili.com/video/BV18rXDYaE45

上一篇
下一篇