XAML for Rotating, Round Image, with Transparent Center

StackOverflow https://stackoverflow.com/questions/800423

  •  03-07-2019
  •  | 
  •  

Question

I'm looking for xaml that can represent a loading icon, like vista does.

Visual Description:

  • Round ( about 1/3 inch in width )
  • lighter blue color
  • transparent center
  • gel button looking (rounded edges wtih a little shadow)
  • white spinner around the edge, to give the movement

light(er) sky blue / gel pack looking

I've found spinning rectangles, and we can create XAML that gives the illusion of spinning, but we're just drawing 12 parts of a clock, and animating each one individually.

Was it helpful?

Solution

Here is a super simple spinner I created in SL that you could convert to WPF.

<UserControl x:Class="Spinner.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <UserControl.Resources>
        <Storyboard x:Name="Animiation" RepeatBehavior="Forever">
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0"  Duration="0:0:.25" Storyboard.TargetName="e1" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.125"  Duration="0:0:.25" Storyboard.TargetName="e2" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.25"  Duration="0:0:.25" Storyboard.TargetName="e3" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.375"  Duration="0:0:.25" Storyboard.TargetName="e4" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.5"  Duration="0:0:.25" Storyboard.TargetName="e5" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.625"  Duration="0:0:.25" Storyboard.TargetName="e6" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.75"  Duration="0:0:.25" Storyboard.TargetName="e7" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.825"  Duration="0:0:.25" Storyboard.TargetName="e8" Storyboard.TargetProperty="Opacity"/>
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid Width="100" Height="100" x:Name="gridSpinner">
            <Ellipse x:Name="e1" Margin="40,80,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Ellipse x:Name="e2" Margin="12,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Ellipse x:Name="e3" Margin="0,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Ellipse x:Name="e4" Margin="12,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Ellipse x:Name="e5" Margin="40,0,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Ellipse x:Name="e6" Margin="68,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Ellipse x:Name="e7" Margin="80,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Ellipse x:Name="e8" Margin="68,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
      </Grid>
    </Grid>
</UserControl>

OTHER TIPS

Does it absolutely have to be full-XAML? For this kind of effects, transparent PNGs work just great. Simply stack the PNGs up in a Grid and animate some of them using RotateTransform and DoubleAnimation.

If your application does not have to zoom much, that will be the easiest way to do the trick.

Greetings, Laurent

@Joeln, Thank you I was able to convert this to WPF, and get what I needed, thank you.

<Page   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
    <BeginStoryboard Name="beginThis">
        <Storyboard x:Name="Animiation" RepeatBehavior="Forever">
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0"  Duration="0:0:.25" Storyboard.TargetName="e1" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.125"  Duration="0:0:.25" Storyboard.TargetName="e2" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.25"  Duration="0:0:.25" Storyboard.TargetName="e3" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.375"  Duration="0:0:.25" Storyboard.TargetName="e4" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.5"  Duration="0:0:.25" Storyboard.TargetName="e5" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.625"  Duration="0:0:.25" Storyboard.TargetName="e6" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.75"  Duration="0:0:.25" Storyboard.TargetName="e7" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.825"  Duration="0:0:.25" Storyboard.TargetName="e8" Storyboard.TargetProperty="Opacity"/>
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>
</Page.Triggers>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid Width="100" Height="100" x:Name="gridSpinner">
            <Ellipse x:Name="e1" Margin="40,80,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Ellipse x:Name="e2" Margin="12,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Ellipse x:Name="e3" Margin="0,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Ellipse x:Name="e4" Margin="12,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Ellipse x:Name="e5" Margin="40,0,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Ellipse x:Name="e6" Margin="68,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Ellipse x:Name="e7" Margin="80,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Ellipse x:Name="e8" Margin="68,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
      </Grid>
    </Grid>

</Page>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top