Search code examples
wpfxaml

WPF Rotating Image Want Not ClipToBounds

I have a sunburst image I am trying to rotate in a window. I have it rotating just fine, but the image is a big square so it fills the proportion of the window. However, when it rotates, the image is the exact shape of the window. I thought it would fill the window and rotate 'outside' of the window to give it a full picture effect. Not sure if that is explaining it correctly. The window is 800 x 450 and the image is 918 x 918 (I did the math for the size I needed). Here is what it looks like.

enter image description here

I want it to fill the whole window as it rotates and I can't figure that out. Here is my full code. Although I am not showing the lblPlayer label in the image I have posted.

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

Not sure what I am doing wrong. Thank you for any help you can give me on this.

Solution

  • The image is apparently clipped by the Window layout.

    You may get around that by an additional Canvas element which does not clip its children:

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