How to rotate Grid background image in WPF?

Question

I want to rotate Grid background image in WPF. I have animation code for image rotation. But when I implement in grid background, Image not accepted so Imagebrush only accepted.

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

I can't implemented below animation code in 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>

EDIT 1-

If I set the images as a content in grid, row 0 only show the image animation.

<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

You could rotate an ImageBrush like in the example below. You may also want to set the CenterX and CenterY properties of the RotateTransform.

<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

As you figured out, Grid.Background can only take a Brush. A solution will be to add the Image as a child to the Grid control:

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

You will need to keep the Image element as the first child of the grid so that it will appear as grid background, and take care of possible additional problems (like ZOrder of the child elements, number of Grid row / columns, etc), but you should be able to obtain the effect you want.