c# - 旋转渐变在 WPF 中脱离 Canvas

Question

我想在 WPF 中制作一个具有缓慢旋转渐变背景的倒数计时器，但我是 WPF 的新手。问题是整个边框都在旋转并且超出了 Canvas 范围。

这是我的代码:

XML:

    <Grid>
        <Border Margin="-483,-164,-690,-147" RenderTransformOrigin="0.5,0.5" >
            <Border.Background>
                <LinearGradientBrush EndPoint="1.504,1.5" StartPoint="1.504,0.03" >
                    <GradientStop Color="#fc00ff" Offset="-0.05" />
                    <GradientStop Color="#00dbde" Offset="0.7"/>

                    <LinearGradientBrush.Transform>
                        <RotateTransform CenterX="200" CenterY="200" Angle="0" />

                    </LinearGradientBrush.Transform>

                </LinearGradientBrush>

            </Border.Background>
            <Border.RenderTransform>
                <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
            </Border.RenderTransform>
            <Border.Triggers>
                <EventTrigger RoutedEvent="MouseDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="AnimatedRotateTransform" 
                                                 Storyboard.TargetProperty="Angle" 
                                                 By="10"        
                                                 To="360" 
                                                 Duration="0:2:0" 
                                                 FillBehavior="Stop" />

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
        </Border>
        <TextBlock Name="tbTime" Text="00:30:00" Margin="104,112,108,119" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Exo" FontSize="66.667" Foreground="White" UseLayoutRounding="False" >
            <TextBlock.Effect>
                <DropShadowEffect RenderingBias="Quality" BlurRadius="20" Direction="319" Opacity="0.2" ShadowDepth="0"/>
            </TextBlock.Effect>
        </TextBlock>
        <Image x:Name="image" HorizontalAlignment="Left" Height="100" Margin="192,210,0,0" VerticalAlignment="Top" Width="100">
            <Image.Effect>
                <BlurEffect RenderingBias="Quality" Radius="25"/>
            </Image.Effect>
        </Image>

    </Grid>

C# 代码隐藏:

public partial class MainWindow : Window
{
    DispatcherTimer _timer;
    TimeSpan _time;

    public MainWindow()
    {
        InitializeComponent();

        _time = TimeSpan.FromSeconds(1800);

        _timer = new DispatcherTimer(new TimeSpan(0, 0, 1), DispatcherPriority.Normal, delegate
        {
            tbTime.Text = _time.ToString("c");
            if (_time == TimeSpan.Zero) _timer.Stop();
            _time = _time.Add(TimeSpan.FromSeconds(-1));

        }, Application.Current.Dispatcher);

        _timer.Start();

    }

Answer 1

您正在旋转边框本身，因此出现了不良行为，

只旋转渐变，

代码:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="Storyboard1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="360"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Rectangle x:Name="rectangle" HorizontalAlignment="Left" Margin="106.03,83.479,0,95.401" Stroke="Black" Width="140.12">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <LinearGradientBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                            <SkewTransform CenterY="0.5" CenterX="0.5"/>
                            <RotateTransform CenterY="0.5" CenterX="0.5"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </LinearGradientBrush.RelativeTransform>
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

    </Grid>
</Window>

静止时:

旋转: