如何在WPF中旋轉Grid背景圖片？

我想在WPF中旋轉Grid背景圖像。我有用於圖像旋轉的動畫代碼。但是，當我在網格背景中實現時，圖像未被接受，因此只能接受Imagebrush。如何在WPF中旋轉Grid背景圖片？

<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>

EDIT 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>

enter image description here

來源

2013-11-23 Sagotharan

您可以旋轉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>

來源

2013-11-23 08:23:55 Clemens

謝謝你，先生。我正在將此實現到我的項目中。 – Sagotharan

如果'With'或'Height'未知，您還可以使用'ImageBrush.RelativeTransform'並將'CenterX'和'CenterY'設置爲0.5以圍繞其中心旋轉。 'Storyboard.TargetProperty'然後將更改爲'Background.RelativeTransform.Angle' –

當你想通了，Grid.Background只能採取一刷。一個解決方法是將圖像作爲孩子添加到Grid控件：

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

您需要將圖像元素保持爲網格的第一個孩子，這樣它會顯示爲網格背景，並照顧可能出現的其他問題（如子元素的ZOrder，網格行/列的數量等），但是您應該能夠獲得所需的效果。

來源

2013-11-23 05:57:21

首先我試試你說的先生，但圖像只顯示在1行。第二排它沒有顯示。我很快更新了我的代碼。 – Sagotharan

我更新了我的問題先生。看看並給出解決方案。@Andrei Pana – Sagotharan

如何在WPF中旋轉Grid背景圖片？

回答

相關問題