Need xaml ellipse to contain two fill colors that can move up or down like filling a gas tank

Question

I can do this with rectangles by using two and varying heights but not with an ellipse. Height distorts the ellipse. Ideas?

Answer 1

Last time I did something like that, I did it like this with gradient. Which was handy since a lot of the shapes were custom Path data. Hope it helps.

crappy/choppy .gif example of the result of the xaml below;

And the code, you can start with EllipseFiller.Begin()

<Grid>
        <Grid.Resources>
            <Storyboard x:Name="EllipseFiller" AutoReverse="True" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
                                           Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" 
                                           Storyboard.TargetName="ellipse">
                    <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
                                           Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" 
                                           Storyboard.TargetName="ellipse">
                    <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>


        <Ellipse x:Name="ellipse" Height="150" Width="150" Stroke="Black" StrokeThickness="1">

            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Red" Offset="1"/>
                    <GradientStop Color="Green" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

    </Grid>

PS - for future reference, you might actually show your efforts in future questions. Happy Holidays!