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

debugcn 发表于 Dev

Sagotharan

我想在WPF中旋转Grid背景图像。我有用于图像旋转的动画代码。但是当我在网格背景中实现时，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>

在此处输入图片说明

克莱门斯

您可以像下面的示例一样旋转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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。