如何在WPF中旋转网格背景图像？

Question

我想在WPF中旋转网格背景图像。我有动画代码用于图像旋转。但是当我在网格背景中实现时，Image不被接受，因此Imagebrush只接受了。

  <Grid.Background>
            <ImageBrush ImageSource="../Images/1.jpg" Stretch="UniformToFill" TileMode="Tile"/>
  </Grid.Background>

我无法在WPF中实现动画代码。

<Canvas ClipToBounds="True" >
                <Image Source="/Images/1.jpg" Width="600"  >
                    <Image.RenderTransform>
                        <RotateTransform x:Name="TransRotate" />
                    </Image.RenderTransform>
                    <Image.Triggers>
                        <EventTrigger RoutedEvent="Image.Loaded">
                            <BeginStoryboard>
                                <Storyboard TargetProperty="Angle">
                                    <DoubleAnimation Storyboard.TargetName="TransRotate" Storyboard.TargetProperty="Angle" By="40" Duration="0:0:10" AutoReverse="True" RepeatBehavior="Forever" />
                                    <DoubleAnimation Storyboard.TargetName="TransRotate" Storyboard.TargetProperty="Angle" By="-40" Duration="0:0:15" AutoReverse="True" RepeatBehavior="Forever" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Image.Triggers>
                </Image>
            </Canvas>

编辑1 -

如果我将图像设置为网格中的内容，则第0行仅显示图像动画。

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Canvas ClipToBounds="True" > 
        <Image Name="logo" Source="/Images/1.jpg" Width="800"  >
            <Image.RenderTransform>
                <RotateTransform x:Name="TransRotate" />
            </Image.RenderTransform>
            <Image.Triggers>
                <EventTrigger RoutedEvent="Image.Loaded">
                    <BeginStoryboard>
                        <Storyboard TargetProperty="Angle">
                            <DoubleAnimation Storyboard.TargetName="TransRotate" Storyboard.TargetProperty="Angle" By="40" Duration="0:0:10" AutoReverse="True" RepeatBehavior="Forever" />
                            <DoubleAnimation Storyboard.TargetName="TransRotate" Storyboard.TargetProperty="Angle" By="-40" Duration="0:0:15" AutoReverse="True" RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>
        </Canvas>

        <Border Grid.Row="0" Height="180" >
            <Image Source="Images/01.jpg" Height="100" />
        </Border>

        <Border Grid.Row="1" Height="180">
            <Image Source="Images/01.jpg" Height="100" />
        </Border>

        <Border Grid.Row="2" Height="180">
            <Image Source="Images/01.jpg" Height="100" />
        </Border>
    </Grid>

Answer 1

您可以旋转ImageBrush，如下例所示。您可能还想设置RotateTransform的CenterX和CenterY属性。

<Grid>
    <Grid.Background>
        <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
                    Stretch="UniformToFill">
            <ImageBrush.Transform>
                <RotateTransform/>
            </ImageBrush.Transform>
        </ImageBrush>
    </Grid.Background>
    <Grid.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetProperty="Background.Transform.Angle"
                        By="40" Duration="0:0:10"
                        AutoReverse="True" RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
</Grid>

Answer 2

正如您所知，Grid.Background只能使用Brush。解决方案是将Image作为子项添加到Grid控件：

<Grid>
    <Image ... />
    ... grid child elements ...
<Grid>

您需要将Image元素保留为网格的第一个子元素，以便它显示为网格背景，并处理可能的其他问题（如子元素的ZOrder，网格行/列的数量等） ），但你应该能够获得你想要的效果。