WPF 旋转图像不需要 ClipToBounds

Question

我有一个旭日图像，我正在尝试在窗口中旋转。我让它旋转得很好，但图像是一个大正方形，因此它填充了窗口的比例。然而，当它旋转时，图像就是窗口的确切形状。我认为它会填充窗口并在窗口“外部”旋转以赋予其完整的图片效果。不确定这是否正确解释。窗口为 800 x 450，图像为 918 x 918（我计算了所需的尺寸）。这是它的样子。

我希望它在旋转时填充整个窗口，但我无法弄清楚。这是我的完整代码。虽然我没有在我发布的图片中显示 lblPlayer 标签。

<Window x:Class="currentPlayer"
    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:DartOverviewHistory"
    mc:Ignorable="d"
    Title="currentPlayer" Height="450" Width="800" WindowStyle="None" WindowState="Maximized" ResizeMode="NoResize" Background="Black" >
<Window.Resources>
  
</Window.Resources>
<Grid>     
    <Image Source="/images/finalStar.png" Width="918" Height="918" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity=".3">
        <Image.RenderTransform>
            <RotateTransform CenterX="459" CenterY="459" />
        </Image.RenderTransform>
        <Image.Style>
            <Style>
                <Style.Triggers>
                    <Trigger Property="Image.IsEnabled" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                Storyboard.TargetProperty="RenderTransform.Angle"
                                From="0"
                                To="360"
                                Duration="0:1:0"
                                RepeatBehavior="Forever" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>          
    <Viewbox x:Name="vb1" Visibility="Visible">
        <Label x:Name="lblPlayer" Content="CAROLINE" Foreground="White" FontFamily="Cascadia Code" FontWeight="Bold" Background="Transparent"/>
    </Viewbox>
   
    <Label Margin="591,308,0,0" />

</Grid>

不确定我做错了什么。感谢您在这方面给我的任何帮助。

Answer 1

图像显然被窗口布局剪切了。

您可以通过不剪裁其子元素的附加 Canvas 元素来解决这个问题：

<Grid>
    <Canvas Width="918" Height="918"
            HorizontalAlignment="Center" VerticalAlignment="Center">
        <Image Source="/images/finalStar.png"
               Width="918" Height="918" Opacity=".3">
            <Image.RenderTransform>
                <RotateTransform CenterX="459" CenterY="459"/>
            </Image.RenderTransform>
            <Image.Style>
                ...
            </Image.Style>
        </Image>
    </Canvas>
    ...
</Grid>