Learncado
Learncado

Learncado brings together a vast collection of questions and answers. Expand your knowledge, learn new skills, and find solutions to your queries effortlessly. Enhance your learning experience and save valuable time by exploring our website today.

Resources

  • Questions
  • Question By Tags

Help and support

  • Contact
  • About

  • Geniecourse
  • Jetsodeals
  • Rentcado
  • Dealcado
© 2021-2023 Learncado All Rights Reserved.

WPF Rotating Image Want Not ClipToBounds

Published at November 20th, 2023
See Orignial Question

The Problem

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.

wpfxaml

Top Answers From StackOverflow

  • 0

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

    Answered, November 20th, 2023

  • 0

    Minus margin will do the trick as well.

    <Grid>
        <Image Source="/images/finalStar.png"
               Width="918" Height="918" Margin="-59 -234"
               HorizontalAlignment="Center" VerticalAlignment="Center"
               Opacity=".3"
               RenderTransformOrigin="0.5 0.5">
            <Image.RenderTransform>
                <RotateTransform/>
            </Image.RenderTransform>
            <Image.Style>
                ...
            </Image.Style>
        </Image>
    </Grid>
    emoacht

    Answered, November 20th, 2023

Hot Topic

  • 25881

    How do I undo the most recent local commits in Git?

  • 11618

    How can I remove a specific item from an array in JavaScript?

  • 20343

    How do I delete a Git branch locally and remotely?

  • 7387

    How can I find all files containing a specific text (string) on Linux?

  • 7330

    How to find all files containing specific text (string) on Linux?

  • 7611

    How do I revert a Git repository to a previous commit?

  • 2671

    How do I create an HTML button that acts like a link?

  • 8481

    How do I check out a remote Git branch?

Related Topic

  • 1

    Get Monitor dpi scale

  • 0

    Set ListView / WrapPanel Item Height Dynamically For Each Row

  • 0

    Navigating back to tabbed page from content page using shell in MAUI app

  • 0

    WebView in VerticalStackLayout does not size correctly - dotnet Maui

  • 0

    How to change the size of some elements of WPF DatePicker

  • 0

    WPF - modify RadFilePathPicker properties when used as a RadPropertyGrid Editor Attribute

  • 0

    WPF event if page is navigated to

  • 11

    Button IsEnabled binding not working properly

Trending TagsView all

pythonjavascriptc#javac++androidreactjshtml