Question

I want to have a circle which grows from the middle of the screen to about 500px in diameter. I'm going to have this circle act as the window for my application (so the user is going to drag it around like a normal window).

So far I can have the circle grow from height and width of 0 to 500 in an animation on start up. The window it is held in is set to transparent and SizeToContent ="WidthAndHeight". This is good because the containing window hugs the circle, but with this the circle doesn't grow from the center of the screen anymore, it starts from the center and grows towards the right and bottom.

How can I have the circle grow from the centre whilst having SizeToContent="WidthAndHeight"?

Here's my code so far:

XAML

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" 
        WindowStyle="None" 
        AllowsTransparency="True" 
        Background="Transparent"  
        WindowStartupLocation="CenterScreen"
        SizeToContent="WidthAndHeight">

    <Window.Resources>
        <Storyboard x:Key="EllipseExpand">
            <DoubleAnimation From="0" To="500" Duration="0:0:5"
                             Storyboard.TargetName="MyCircle"
                             Storyboard.TargetProperty="Width"/>
            <DoubleAnimation From="0" To="500" Duration="0:0:5"
                             Storyboard.TargetName="MyCircle"
                             Storyboard.TargetProperty="Height"/>
        </Storyboard>
    </Window.Resources>

    <Ellipse Name="MyCircle" Fill="Red" Height="0" Width="0"/>

</Window>

Code behind

Imports System.Windows.Media.Animation

Class MainWindow
    Public Sub WindowLoaded() Handles Me.Loaded
        Dim ellipseExpand As Storyboard = FindResource("EllipseExpand")

        ellipseExpand.Begin()
    End Sub
End Class
Was it helpful?

Solution

I instead used a workaround:

I housed the ellipse in a big transparent window so it can appear as though it grows from the center of the screen. However if you drag the ellipse towards the top of the screen, it gets pushed down (because windows OS always tries to fit the top of the invisible window into the screen instead of clipping it).

To overcome this issue, I used this thread: How do I move a wpf window into a negative top value?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top