Binding, exécuter un storyboard spécifique selon l'item

Question

Bonjour,

J'ai un UserControl qui contient plusieurs StoryBoard. Comment puis exécuter un Storyboard selon l'item qui est appliqué lors du Binding ?

<GridView.ItemTemplate>
    <DataTemplate>
        <StackPanel>
            <local:ButtonImage Animation="<!-- ici un int= 1 ou 2 -->" />
        </StackPanel>
    </DataTemplate>
</GridView.ItemTemplate>

Mon UserControl contient ces Storyboard :

	<UserControl.Resources>
		<Storyboard x:Key="Horizontal" AutoReverse="True" RepeatBehavior="Forever">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ImageHub">
				<EasingDoubleKeyFrame KeyTime="0" Value="0" x:Name="keystart"/>
				<EasingDoubleKeyFrame KeyTime="0:0:10.0" Value="-85" />
				<EasingDoubleKeyFrame KeyTime="0:0:10.667" Value="-85"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Name="Vertical" AutoReverse="True" RepeatBehavior="Forever">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ImageHub">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:10" Value="-25"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>

Merci, Christophe

---

Christophe

Answer 1

Ne peux tu pas intégrer ton bouton image dans un control à part et exposer dans ce control une dependency property ?

Cette dependecy property s'enregistrera sur l'event dpchanged et dans l'event dpchanged tu appliques le bon storyboard en fonction de la valeur.

Suis-je clair ? :)

Answer 2

Bonjour,

Voilà, C'est fait mais ne me demandez pas de commenter, c'est la première fois que j'utilise les dépendances :

Un "sous-"UserControl ButtonImage :

public partial class ButtonImage : UserControl
    {
        public static readonly DependencyProperty ValeurProperty = 
            DependencyProperty.Register(
            "choixAnim", 
            typeof(int), 
            typeof(ButtonImage),
            new PropertyMetadata(null, new PropertyChangedCallback(StoryBoardChanged)));
        

        public ButtonImage()
        {
            InitializeComponent();
        }

        public int choixAnim
        {
            get
            {
                return (int)GetValue(ValeurProperty);
            }

            set
            {
                SetValue(ValeurProperty, value);
            }
        }

        private static void StoryBoardChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
        {
            ((ButtonImage)sender).StoryBoardChanged();
        }

        private void StoryBoardChanged()
        {
            int value = this.choixAnim;
            if (value == 1)
            {
                ImageHub.Margin = new Thickness(0, 0, -85, 0);
                ImageHub.Width = 290;
                ImageHub.Height = 205;
                var sb = (Storyboard)this.Resources["Horizontal"];
                sb.Begin();
            }
            else
            {
                ImageHub.Margin = new Thickness(0, 0, 0, -25);
                ImageHub.Width = 205;
                ImageHub.Height = 230;
                var sb = (Storyboard)this.Resources["Vertical"];
                sb.Begin();
            }
        }

et dans le UserControl principal :

<myUC:ButtonImage choixAnim="{Binding anim}" HorizontalAlignment="Left" />

---

Christophe