Discussion :

[snoups58]

Bonjour à tous,

Alors voilà mon soucis qui traine depuis 2 jours.
J'ai une image 600*400 centré sur ma page et 4 miniature en dessous.
Le click sur un miniature doit change la source de l'image du dessus.
De plus je souhaite une animation d'opacité entrante et sortante.

Voici mon début de code :
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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<Storyboard x:Name="ChangeZoneImage">
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 
                                           Storyboard.TargetName="ZoneImage1">
        		<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:0.45" Value="0"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:0.95" Value="1"/>
        	</DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ZoneImage1" 
                                           Storyboard.TargetProperty="Source">
                <ObjectAnimationUsingKeyFrames.KeyFrames>
                    <DiscreteObjectKeyFrame KeyTime="0:0:0.48">
                        <DiscreteObjectKeyFrame.Value>
                            <BitmapImage x:Name="ZoneImageSource" UriSource="{Binding ElementName=Original, Path=Source}"/>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames.KeyFrames>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
 
[...]
 
<Image x:Name="ZoneImage1" 
	Width="600" 
	Height="450" 
	Margin="11,11,11,0" 
	HorizontalAlignment="Center" 
	VerticalAlignment="Center" 
	Stretch="Uniform" 
	Opacity="100" 
	MouseEnter="ZoneImage1_MouseEnter" 
	MouseLeave="ZoneImage1_MouseLeave" 
	Cursor="Arrow" Source="{Binding ElementName=Original, Path=Source}"/>
 
[...]
 
<Border x:Name="border0" 
	HorizontalAlignment="Left" 
	Height="48"
	Margin="11,17,0,0" 
	VerticalAlignment="Top" 
	Width="64"                 
	BorderThickness="1" 
	BorderBrush="Red" 
	RenderTransformOrigin="0,1" 
						MouseLeftButtonUp="border0_MouseLeftButtonUp">
 
	<Border.RenderTransform>
		<CompositeTransform/>
	</Border.RenderTransform>
 
	<Image x:Name="Original" Stretch="UniformToFill" RenderTransformOrigin="0.5,0.5"/>

Code Behind:

Code :

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

1
2
3
4
 private void border0_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            ZoneImageSource.UriSource = ((BitmapImage)Original.Source).UriSource;
        }

Et voici l'erreur retourner lorsqu'il y click !

La référence d'objet n'est pas définie à une instance d'un objet.

à Visionneuse_Catalogue.MainPage.border0_MouseLeftButtonUp(Object sender, MouseButtonEventArgs e)
à MS.Internal.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
à MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, String eventName)

J'avais réussi une première fois mais j'ai eu un plantage PC et j'ai donc perdu le code, mais je n'arrive pas à retrouver l'astuce !

Ps: je peux truander et mettre deux bloc image mais ce n'est pas le but de la manoeuvre

merci d'avance pour votre aide !

[Thomas Lebrun]

Vérifie que Original.Source ne soit pas null.

[Skyounet]

Ton code me parait bien compliqué pour pas grand chose, surtout la ObjectAnimationUsingKeyFrames en fait.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
 
    <Image x:Name="mainImage" Source="xxx.jpg" />
 
    <StackPanel Grid.Row="1" Orientation="Horizontal" MouseLeftButtonDown="StackPanel_MouseLeftButtonDown">
        <Image Source="xxx.jpg" />
        <Image Source="xxx.png" />
    </StackPanel>
 
</Grid>

Code :

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

1
2
3
4
5
6
7
8
private void StackPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if (e.OriginalSource is Image)
    {
        var image = e.OriginalSource as Image;
        mainImage.Source = image.Source;
    }
}

Reste plus qu'à rajouter les animations.

[snoups58]

exact skyounet c'est un peu compliqué mais necessaire pour le reste du code.

Thomas, non original.source n'est pas null.
Par contre ImageZoneSource c'est ceci qui pose problème car il est null
perso je sèche.

[snoups58]

Bon à force de persévérence j'ai retrouvé la solution.

La voici en détail:

Xaml deveins ( au niveau du ObjectAnimationUsingKeyFrame )

Code :

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

1
2
3
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ZoneImage1" Storyboard.TargetProperty="Source">
                <DiscreteObjectKeyFrame x:Name="ZoneImageSource" Value="Images/01.jpg" KeyTime="00:00:00.48"/>
            </ObjectAnimationUsingKeyFrames>

Au lieu de mettre un objet Bitmap, je mets directement ma value dans le discreteObject

Ensuite au niveau du code behind sa deviens simple :

Code :

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

1
2
ZoneImageSource.Value = Galerie.Source;
                ChangeZoneImage.Begin();

et voilà comme ceci plus besoin d'avoir 2 emplacements images, un seul suffit du coup moins de problème de gestion sur cette image chargé dynamiquement via une animation de transition

en espérant que cela aide quelqu'un