Question

我想在WPF中使用缓慢旋转的渐变背景制作一个倒计时器，但我对WPF都是新手。问题是整个边框旋转，它离开画布。

这是我的代码：

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>

休息时间：

旋转：

Answer 2

问题是你正在旋转边框而不是画笔。

只需移动x：name =＆＃34; AnimatedRotateTransform＆＃34;到＆＃34; LinearGradientBrush.Transform＆＃34;而不是＆＃34; Border.RenderTransform＆＃34;。

你还应该删除网格上的边距（否则你没有看到渐变的整个范围），并且可能添加一个repeatbehavior =＆＃34; Forever＆＃34;，以保持旋转超过一轮（经过360度旋转后。）

我也改变了旋转的速度，这样你就可以看到它持续了一轮以上。

XAML：

<Grid>
    <Border 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 x:Name="AnimatedRotateTransform" CenterX="200" CenterY="200" Angle="0" />

                </LinearGradientBrush.Transform>

            </LinearGradientBrush>

        </Border.Background>
        <Border.RenderTransform>
            <RotateTransform Angle="0" />
        </Border.RenderTransform>
        <Border.Triggers>
            <EventTrigger RoutedEvent="MouseDown">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="AnimatedRotateTransform" 
                                             Storyboard.TargetProperty="Angle" 
                                             By="10"        
                                             To="360" 
                                             Duration="0:0:2" 
                                             RepeatBehavior="Forever"
                                             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>

旋转渐变在WPF中脱离画布

2 个答案: