VisualStateManager sur une ChildWindow

**Z4ng3tsu** · 15/06/2010, 16h45

Bonjour à tous !

Voilà je suis en train de voir les différentes possibilités de Blend et je me heurte à un problème.
Sous Visual Studio j'ai crée une ChildWindow tout ce qu'il y a de plus simple et j'ai viré la fermeture de la ChildWindow sur clique du bouton OK ou Cancel.
J'ouvre ensuite mon projet sous Blend 4 RC et je me dis "tiens j'aimerai bien mettre un effet de rotation sur le bouton OK lors de son clic. Je clique sur le bouton OK, je vais dans l'onglet States et je rajoute un StateGroup. Je rajoute ensuite un State que je nomme "Loaded". Pour ce State je donne une valeur de 180° de rotation sur axe Y à mon bouton OK après 1 seconde. Lorsque je clique sur lecture ça fonctionne nickel.
Ensuite je retourne sous Visual Studio, et dans la méthode appelé par le clic du bouton OK je mets:

Code :

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

VisualStateManager.GoToState(this, "Loaded", true);

Et malheureusement rien ne se passe. Or cette méthode fonctionne très bien pour une page Silverlight classique. Mais alors où est le problème ? Quelqu'un aurait-il ou elle la réponse ?

Merci d'avance pour toutes vos réponses en tout cas !!!

**Samuel Blanchard** · 15/06/2010, 17h00

Bonjour,

Ou est stocké ton VisualState ? Il me semble que si c'est dans LayoutRoot il faut que ton GoToState pointe vers LayoutRoot et non this.

**Z4ng3tsu** · 15/06/2010, 17h03

Voilà le code généré par Blend (ce sera plus rapide que de te filer une réponse qui sert à rien je pense...) :

Code :

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
<sdk:ChildWindow	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"	xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"	x:Class="CardGameTest.ChildWindow1"
	Title="ChildWindow1"
	Width="400" Height="300">
	<Grid x:Name="LayoutRoot">
		<Grid.RowDefinitions>
			<RowDefinition />
			<RowDefinition Height="Auto" />
		</Grid.RowDefinitions>
 
		<VisualStateManager.CustomVisualStateManager>
			<ei:ExtendedVisualStateManager/>
		</VisualStateManager.CustomVisualStateManager>
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="VisualStateGroup">
				<VisualState x:Name="Loaded">
					<Storyboard>
						<DoubleAnimation Duration="0:0:1" To="180" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="OKButton" d:IsOptimized="True"/>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>
 
		<Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" Margin="0,0,79,0" HorizontalAlignment="Right" Grid.Row="1" >
			<Button.Projection>
				<PlaneProjection/>
			</Button.Projection>
		</Button>
		<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Grid.Row="1" />
	</Grid>
</sdk:ChildWindow>

**Samuel Blanchard** · 15/06/2010, 17h05

Il est bien dans LayoutRoot donc je pense que ceci devrait marcher :

Code :

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

1
2
VisualStateManager.GoToState(this.LayoutRoot, "Loaded", true);

**Z4ng3tsu** · 15/06/2010, 17h09

Je viens de tester ta ligne. Le debugger m'envoie bouler en disant que this.LayoutRoot est un Controls.LayoutRoot alors qu'il attend un Controls.Control. Y'a un moyen de caster un LayoutRoot en Control ?

**Samuel Blanchard** · 15/06/2010, 17h25

ARRRG ! oui c'est vrai Grid est un Panel et pas un Control.Tu peux toujours utiliser un ContentControl :

Code :

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

1
2
3
4
5
6
7
8
9
 
<Grid x:Name="LayoutRoot">
   <ContentControl x:Name="MonContentControl">
 
      <VisualStateManager...>
      </VisualStateManager...>
 
   </ContentControl>
</Grid>

puis :

Code :

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

1
2
 
VisualStateManager.GoToState(this.MonContentControl, "Loaded", true);

Pas très élégant mais ça devrait marcher.

**Z4ng3tsu** · 15/06/2010, 17h31

Incroyable mais non ça ne marche pas !
Je commencerai presque à croire que c'est un bug non pas de moi mais Blend ou autre.
Peut etre un indice que j'ai trouvé :
Pour faire une rotation de la ChildWindow entière, il faut : clique droit sur ChildWindow (dans Objects and Timeline) puis Template puis Edit a copy. Et c'est seulement en éditant cette copie que la rotation de la ChildWindow entière fonctionne.
Peut-être qu'il faut réadapter ça pour le faire sur simplement un bouton...

EDIT : J'ai peut-être trouvé une solution. Ca a marché sur un bouton, je vais essayer sur d'autres contrôles comme des images ou autre...

**Samuel Blanchard** · 15/06/2010, 17h45

euuuh je ne sais pas trop... Ça devrait fonctionner... J'ai pas testé en même temps.

**Z4ng3tsu** · 15/06/2010, 18h10

F**K !
Toujours rien ! Et pourtant j'arrive à faire une rotation de la child window complète (me suis inspiré de ce tuto : http://blogs.windowsclient.net/silve...ildwindow.aspx pour ça).

Pas moyen de faire faire la rotation de ma child window bordel !
Je refile le code xaml et cs de la child window avant toute modification des états ou style :

Le xaml :

Code :

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
<controls:ChildWindow x:Class="CardGameTest.CWShowCard"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
           Width="400" Height="300" 
           Title="Carte Tirée">
    <Grid x:Name="LayoutRoot" Margin="2">
        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid Width="125" Height="175">
                <Image x:Name="imgCardBackShowed" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="UniformToFill" Visibility="Visible" />
                <Image x:Name="imgCardFrontShowed" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="UniformToFill" Visibility="Collapsed" />
            </Grid>
            <Button Content="OK" Width="100" Height="23" Margin="5" x:Name="btnOK" Click="btnOK_Click" />
        </StackPanel>
    </Grid>
</controls:ChildWindow>

Le cs :

Code :

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
38
39
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;
 
namespace CardGameTest
{
    public partial class CWShowCard : ChildWindow
    {
        public BitmapImage biImageBack = null;
        public BitmapImage biImageFront = null;
 
        public CWShowCard()
        {
            InitializeComponent();
        }
 
        protected override void OnOpened()
        {
            imgCardBackShowed.Source = biImageBack;
 
            base.OnOpened();
        }
 
        private void btnOK_Click(object sender, RoutedEventArgs e)
        {
 
        }
    }
}

Mon but étant au final de faire une rotation de l'image imgCardBackShowed de 180 sur un axe y après pression du bouton OK. Vous constaterez comme moi que ce n'est pas si évident dans une ChildWindow...

**xavier-sama** · 17/06/2010, 11h06

Si tu veux juste faire tourner ta ChildWindow regarde ici :

http://www.developpez.net/forums/d93...n-childwindow/

Perso je l'ai fait mais c'est un peu nul car t'as ChildWindow est complétement inverser (les boutons, le texte et même la croix).

Sinon tu verras dans le post un très bon code qui permet de faire tourner un composant et d'avoir autre chose sur le verso (exemple : recto -> info d'une personne, verso -> sa photo).

http://blog.naviso.fr/wordpress/?p=102

Cordialement,
Xavier

**Samuel Blanchard** · 17/06/2010, 14h32

Sinon tu verras dans le post un très bon code qui permet de faire tourner un composant et d'avoir autre chose sur le verso (exemple : recto -> info d'une personne, verso -> sa photo).

Merci