WPF自定義控制元件二:Border控制元件與TextBlock控制元件輪播動畫
阿新 • • 發佈:2020-11-25
需求:實現Border輪播動畫與TextBlock動畫
XAML程式碼如下:
<Window.Resources> <Storyboard x:Key="OnLoaded1" RepeatBehavior="Forever"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(Brush.RelativeTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="border"> <EasingDoubleKeyFrame KeyTime="0:0:2" Value="360"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="OnloadText" RepeatBehavior="Forever"> <DoubleAnimation From="-2" To="2" Duration="0:0:3" Storyboard.TargetProperty="(TextBlock.Foreground).(Brush.RelativeTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="border1"> </DoubleAnimation> <DoubleAnimation From="2" To="-2" BeginTime="0:0:3" Duration="0:0:3" Storyboard.TargetProperty="(TextBlock.Foreground).(Brush.RelativeTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="border1"></DoubleAnimation> </Storyboard> <LinearGradientBrush x:Key="dddd" EndPoint="0.5,1" StartPoint="0.5,0"> <LinearGradientBrush.RelativeTransform> <TransformGroup> <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/> </TransformGroup> </LinearGradientBrush.RelativeTransform> <GradientStop Color="#11374c" Offset="0.2"/> <GradientStop Color="White" Offset="4"/> </LinearGradientBrush> <LinearGradientBrush x:Key="eeee" StartPoint="0,0" EndPoint="1,0.001"> <LinearGradientBrush.RelativeTransform> <TransformGroup> <TranslateTransform X="-0.5" ></TranslateTransform> </TransformGroup> </LinearGradientBrush.RelativeTransform> <LinearGradientBrush.GradientStops> <GradientStopCollection> <GradientStop Color="White" Offset="0.0"></GradientStop> <GradientStop Color="LightBlue" Offset="0"></GradientStop> <GradientStop Color="#11374c" Offset="1"></GradientStop> </GradientStopCollection> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Window.Resources> <Window.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/> <BeginStoryboard Storyboard="{StaticResource OnloadText}"/> </EventTrigger> </Window.Triggers> <Grid Background="Black"> <TextBlock x:Name="border1" Foreground="{StaticResource eeee}" Text="Hymson" Width="130" Height="55" FontSize="42" FontFamily="宋體" FontWeight="Black" /> <Border x:Name="border" Width="200" Height="60" BorderBrush="{StaticResource dddd}" BorderThickness="2" CornerRadius="5"> </Border> </Grid>