XAML pour rotation, image ronde, avec centre transparent

Question

Je recherche xaml pouvant représenter une icône de chargement, comme le fait Vista.

Description visuelle:

• Rond (environ 1/3 de pouce de largeur)
• couleur bleue plus claire
• centre transparent
• bouton de gel à la recherche (bords arrondis avec une petite ombre)
• spinner blanc autour du bord, pour donner le mouvement

light (er) bleu ciel / gel pack à la recherche

J'ai trouvé des rectangles en rotation, et nous pouvons créer du XAML qui donne l'illusion de tourner, mais nous ne dessinons que 12 parties d'une horloge et animons chacune individuellement.

Answer 1

Voici un spinner super simple que j'ai créé dans SL que vous pouvez convertir en 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>

Answer 2

Doit-il absolument être full-XAML? Les PNG transparents fonctionnent parfaitement pour ce type d’effets. Il suffit d’empiler les PNG dans une grille et d’animer certains d’entre eux à l’aide de RotateTransform et DoubleAnimation.

Si votre application n'a pas besoin de trop zoomer, ce sera le moyen le plus simple de faire l'affaire.

Salutations, Laurent

Answer 3

@Joeln, merci, j'ai pu convertir ceci en WPF et obtenir ce dont j'avais besoin, merci.

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