WinRT/XAML Changing an ellipse's fill color upon mouse over

Question

I'm new to WinRT/XAML dev. After hours of research on the net and many trial and error attempts, I am still unable to understand how to use the VisualStateManager to change the fill color of an ellipse based on user input over the object. The following code does not work. Here is the code as it sits today:

<Ellipse Stroke="White" StrokeThickness="5" Width="90" Height="90">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ColorAnimation To="Red" Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="Fill.Color"/>
                    </Storyboard>
                </VisualState>
                <VisualStateGroup.Transitions>
                    <VisualTransition To="Normal" GeneratedDuration="00:00:01"/>
                    <VisualTransition To="MouseOver" GeneratedDuration="00:00:01"/>
                </VisualStateGroup.Transitions>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Ellipse>

UPDATE:

Thank you Nicholas W. for the nudge in the right direction. I was missing the template as well as the correct target property. The following code is working as intended:

<Button>
            <Button.Template>
                <ControlTemplate>
                    <Grid>
                        <Ellipse x:Name="myEllipse" Stroke="White" StrokeThickness="5" Width="70" Height="70" Fill="Transparent"/>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="myEllipse" To="#FF0061D4"  Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Duration="0:0:0"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>

Answer 1

There are a few problems here, firstly there is nothing causing the visual state manager to transition between states, secondly the reference to the "Ellipse" target is not resolved, and thirdly there is no brush defined on which to perform the color animation. If you were to retemplate a control which is already using visual states, the first part would be done for you, otherwise you need to set up explicit state transitions (example). To enable the reference to work, you can give the element a name, and don't nest the VisualStateGroups attached property in the element itself (or animate by name of the brush as per the MSDN example). And the last part just involves setting up a brush initially, on which you animate the Color property. Together, with the example of retemplating a Button:

    <Button>
        <Button.Template>
            <ControlTemplate>
                <Grid>
                    <Ellipse x:Name="Ellipse" Stroke="White" StrokeThickness="5" Width="90" Height="90"
                             Fill="Black"/>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="Ellipse" To="Red"  Storyboard.TargetProperty="Fill.Color"/>
                                </Storyboard>
                            </VisualState>
                            <VisualStateGroup.Transitions>
                                <VisualTransition To="Normal" GeneratedDuration="00:00:01"/>
                                <VisualTransition To="MouseOver" GeneratedDuration="00:00:01"/>
                            </VisualStateGroup.Transitions>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>