Discussion :

[sofienems]

bonjour ,
je compte faire un composant silverlight qui illustre l'avancement d'un processus ( genre progrssBar ) .
j'ai 4 étapes à suivre , et j'aime que le composant sera de ce type :
avez vous une piste pour que je commence ?

[Nathanael Marchand]

Tu peux t'inspirer de ca:
http://dashboarding.codeplex.com/

[micka132]

Un truc simple pourrait être d'avoir 4 images dans le control en Visibility.Collapsed ( ImageE1, ImageE2...) puis en fonction de l'avancement mettre l'image à Visibibilty.Visible ( pourquoi pas jouer sur l'opacité aussi).
Apres pour gérer l'avancement lui même ca manque d'information, mais toujours tres simplement ca pourrait être un SetEtape(Numero de l'etape).

[Skyounet]

Pour moi ca ressemble a un fil d’Ariane.

C'est franchement simple a faire. Tu peux te baser sur un ItemsControl avec un ItemTemplate un peu styler. Ensuite tu rajoutes tes elements dedans et ton visuel s'affiche.

Tu peux t'inspirer de ce font Telerik
http://demos.telerik.com/silverlight/

Quand tu navigues dans les controles tu peux voir un controle similaire a celui de ton image tout en haut.
Tu peux essayer de voir avec Reflector comment c'est fait si tu n'arrives pas a le refaire.

[sofienems]

merci à vous tous je me suis arrivé à resoudre ça . voici le code XAML :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
  <Grid x:Name="LayoutRoot" Background="White" >
        <Grid.RowDefinitions>
 
            <RowDefinition Height="50" />
 
        </Grid.RowDefinitions>
 
        <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" Grid.Row="0">
            <Canvas x:Name="step_1" Width="150" Height="50" Canvas.Left="0" Canvas.Top="0">
                <Path x:Name="Path_Step_1" Width="150" Height="50" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" StrokeThickness="0" StrokeLineJoin="Round" Stroke="#FF230FD2" Fill="#FFB2B4A8" Data="F1 M 129,65L 0.999997,65L 0.999997,0.999985L 129,0.999985L 145,33L 129,65 Z "/>
                <sdk:Label Canvas.Left="0" Canvas.Top="10"  Height="29" Name="label_Step_1" Width="135" Content="Step 1" HorizontalContentAlignment="Center"  VerticalContentAlignment="Center" FontStretch="SemiCondensed" FontWeight="ExtraBold" FontStyle="Italic" FontFamily="Verdana" Foreground="White" FontSize="20" />
 
            </Canvas>
            <Canvas x:Name="step_2" Width="150" Height="50" Canvas.Left="0" Canvas.Top="0" >
                <Path x:Name="Path_Step_2" Width="150" Height="50" Canvas.Left="-15" Canvas.Top="0" Stretch="Fill" StrokeThickness="0" StrokeLineJoin="Round" Stroke="#FF230FD2" Fill="#FFB2B4A8" Data="F1 M 1.52588e-005,0.999996L 128,0.999996L 144,33L 128,65L 1.52588e-005,65L 16,33L -1.52588e-005,1.00002"/>
                <sdk:Label Canvas.Left="2" Canvas.Top="10" Height="29" Name="label_Step_2" Width="120" Content="Step 2" HorizontalContentAlignment="Center" FontStretch="SemiCondensed" FontWeight="ExtraBold" FontStyle="Italic" FontFamily="Verdana" Foreground="White" FontSize="20" />
 
            </Canvas>
 
 
            <Canvas x:Name="step_3" Width="150" Height="50" Canvas.Left="0" Canvas.Top="0">
                <Path x:Name="Path_Step_3" Width="150" Height="50" Canvas.Left="-30" Canvas.Top="0" Stretch="Fill" StrokeThickness="0" StrokeLineJoin="Round" Stroke="#FF230FD2" Fill="#FFB2B4A8" Data="F1 M 1.52588e-005,0.999996L 128,0.999996L 144,33L 128,65L 1.52588e-005,65L 16,33L -1.52588e-005,1.00002"/>
                <sdk:Label Canvas.Left="-13" Canvas.Top="10" Height="29" Name="label_Step_3" Width="120" Content="Step 3" HorizontalContentAlignment="Center" FontStretch="SemiCondensed" FontWeight="ExtraBold" FontStyle="Italic" FontFamily="Verdana" Foreground="White" FontSize="20" />
 
            </Canvas>
 
 
            <Canvas x:Name="step_4" Width="150" Height="50" Canvas.Left="0" Canvas.Top="0">
 
                <Path x:Name="Path_Step_4" Width="150" Height="50" Canvas.Left="-45" Canvas.Top="0" Stretch="Fill" StrokeThickness="0" StrokeLineJoin="Round" Stroke="#FF230FD2" Fill="Magenta" Data="F1 M 1.52588e-005,0.999996L 128,0.999996L 144,33L 128,65L 1.52588e-005,65L 16,33L -1.52588e-005,1.00002"/>
                <sdk:Label Canvas.Left="-29" Canvas.Top="10" Height="29" Name="label_Step_4" Width="120" Content="Step 4" HorizontalContentAlignment="Center" FontStretch="SemiCondensed" FontWeight="ExtraBold" FontStyle="Italic" FontFamily="Verdana" Foreground="White" FontSize="20" />
            </Canvas>
        </StackPanel>
 
    </Grid>