Ajouter l'étiquette autour de la valeur du cercle

Question

Donc, j'ai Circular Progress-Bar et je veux positionner Label autour du cercle Value.

C'est ce que j'ai essayer:

<Grid x:Name="LayoutRoot" VerticalAlignment="Center" HorizontalAlignment="Center"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="Auto"/> 
    </Grid.RowDefinitions> 
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> 
     <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> 
      <DesignInControl:CircularProgressBar HorizontalAlignment="Center" VerticalAlignment="Center" SegmentColor="#FF878889" StrokeThickness="25" Percentage="100" Radius="100"/> 
      <DesignInControl:CircularProgressBar x:Name="circle" HorizontalAlignment="Center" VerticalAlignment="Center" Percentage="0" SegmentColor="Red" StrokeThickness="25" Radius="100"/> 
     </Grid> 
    </StackPanel> 
    <Label x:Name="vlb" Content="{Binding ElementName=circle, Path=Percentage}" Margin="-50,-50,-50,-50" RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2"> 
     <Label.RenderTransform> 
     <TransformGroup> 
       <ScaleTransform/> 
       <SkewTransform/> 
       <RotateTransform Angle="3600.12"/> 
       <TranslateTransform/> 
      </TransformGroup> 
    </Label.RenderTransform>             
    </Label> 
</Grid> 

maintenant dans ma Timer tick je levai mon pourcentage Circelr de 1 à chaque seconde:

private void dispatcherTimer_Tick(object sender, EventArgs e) 
{ 
    double d = circle.Percentage += 1; 
    var radius = 100; 
    var sangle = (d * 360)/100; 
    double angleRad = (Math.PI/180.0) * (sangle - 90); 
    double x = radius * Math.Cos(angleRad); 
    double y = radius * Math.Sin(angleRad); 
    vlb.RenderTransform = new RotateTransform { Angle = sangle, CenterX = 0, CenterY = 0 }; 
} 

Et le résultat est que mon Label est maintenant droit :

Mise à jour

<Grid x:Name="LayoutRoot" VerticalAlignment="Center" HorizontalAlignment="Center"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="Auto"/> 
    </Grid.RowDefinitions> 
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> 
     <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> 
      <DesignInControl:CircularProgressBar HorizontalAlignment="Center" VerticalAlignment="Center" SegmentColor="#FF878889" StrokeThickness="25" Percentage="100" Radius="100"/> 
      <DesignInControl:CircularProgressBar x:Name="circle" HorizontalAlignment="Center" VerticalAlignment="Center" Percentage="0" SegmentColor="SeaGreen" StrokeThickness="25" Radius="100"/> 
     </Grid> 
    </StackPanel> 
    <Label x:Name="vlb_outer" Margin="-50,-50,-50,-50" RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2"> 
     <Label.RenderTransform> 
      <TransformGroup> 
       <ScaleTransform/> 
       <SkewTransform/> 
       <RotateTransform Angle="50"/> 
       <TranslateTransform/> 
      </TransformGroup> 
     </Label.RenderTransform> 
     <Label Content="{Binding ElementName=circle, Path=Percentage}" FontSize="20" x:Name="vlb_inner"> 
      <Label.RenderTransform> 
       <TransformGroup> 
        <RotateTransform Angle="-50"/> 
       </TransformGroup> 
      </Label.RenderTransform> 
     </Label> 
    </Label> 
</Grid> 

Résultat

Update 

Position de départ:

Après augmentation Value par 1:

Le Label est peu sur la taille gauche.

Answer 1

Je ne ai jamais utilisé des transformations dans WPF avant, mais depuis que j'ai un fond jeu dev, il était assez facile à manipuler pour moi:

J'ai créé un Label Enfant- qui a la liaison et sa propre TransformGroup, comme ceci:

<Label x:Name="vlb_outer" Margin="-50,-50,-50,-50" RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2"> 
    <Label.RenderTransform> 
     <TransformGroup> 
      <ScaleTransform/> 
      <SkewTransform/> 
      <RotateTransform Angle="50"/> 
      <TranslateTransform/> 
     </TransformGroup> 
    </Label.RenderTransform> 
    <Label Content="{Binding Value}" x:Name="vlb_inner"> 
     <Label.RenderTransform> 
      <TransformGroup> 
       <RotateTransform Angle="-50"/> 
      </TransformGroup> 
     </Label.RenderTransform> 
    </Label> 
</Label> 

maintenant, ce que je faisais dans le code était simple, je viens Assigne la rotationvalue à l'élément vlb_outer et le rotationvalue négatif à l'élément vlb_inner. De cette façon, il sera retourné par le même angle dans la direction opposée autour de son propre centre. J'ai tout simplifié pour moi puisque je n'ai pas votre code, mais il a semblé fonctionner. Je l'ai essayé avec un curseur de 0 à 360 et fait une liaison de la valeur au Content et à la rotation.

Espérons que ça aide.

Modifier

D'accord, parce que vous ne l'avez pas aimé l'emplacement (évidemment), je jouais avec mon calcul et croyez-moi, je déteste les valeurs codées en dur, mais dans ce cas, ils m'a beaucoup aidé .

Mon code actuel ressemble à ceci:

private void Rotate(double value) 
{ 
    double sangle = value * 360 + 42; 
    vlb_outer.RenderTransform = new RotateTransform() { Angle = sangle, CenterX = 0, CenterY = 0 }; 
    vlb_inner.RenderTransform = new RotateTransform() { Angle = -sangle, CenterX = 0, CenterY = 0 }; 
    Value = (int)(value*360); 
} 

Il obtient la valeur (de 0 à 1) et multiplie par 360 (pour la rotation) et un nombre magique qui fixe votre position de départ. Je ne pense pas que 42 soit parfait, mais quelque chose autour de ça a fonctionné pour moi.

Modifier

Ce code devrait fonctionner pour vous

private void dispatcherTimer_Tick(object sender, EventArgs e) 
{ 
    double sangle = circle.Percentage * 3.6 + 42; 
    vlb_outer.RenderTransform = new RotateTransform() { Angle = sangle, CenterX = 0, CenterY = 0 }; 
    vlb_inner.RenderTransform = new RotateTransform() { Angle = -sangle, CenterX = 0, CenterY = 0 }; 
} 

Answer 2

Je pense que vous venez foiré votre positionnement et de la marge. Je n'ai pas les commandes de votre cercle, donc je viens d'utiliser un cercle jaune statique pour déplacer l'étiquette autour d'un curseur pour la démonstration:

<Grid> 
    <Slider x:Name="angleProvider" Minimum="0" Maximum="360" VerticalAlignment="Top" HorizontalAlignment="Center" MinWidth="100" Margin="10"/> 
    <Ellipse 
     Width="50" Height="50" 
     VerticalAlignment="Center" HorizontalAlignment="Center" 
     Fill="Yellow"/> 
    <Label 
     Content="{Binding ElementName=angleProvider,Path=Value}" ContentStringFormat="{}{0:##0'°'}" 
     RenderTransformOrigin="0.5,0.5" 
     Width="80" Height="80" 
     Padding="0" 
     VerticalAlignment="Center" HorizontalAlignment="Center" 
     VerticalContentAlignment="Top" HorizontalContentAlignment="Center"> 
     <Label.RenderTransform> 
      <TransformGroup> 
       <ScaleTransform/> 
       <SkewTransform/> 
       <RotateTransform Angle="{Binding ElementName=angleProvider,Path=Value}"/> 
       <TranslateTransform/> 
      </TransformGroup> 
     </Label.RenderTransform> 
    </Label> 
</Grid> 

Donc, fondamentalement, placer le centre de votre étiquette à la même position que le Au centre des cercles, positionnez le contenu de l'étiquette centré en haut, définissez la largeur et la hauteur plus grandes que les cercles pour que le texte apparaisse à l'extérieur, faites pivoter l'étiquette autour de son centre.

Remarque: Je n'ai pas vérifié les transformations autres que RotateTransform dont vous avez réellement besoin. Je pense que tous les autres peuvent être supprimés du TransformGroup.