Animation PathListBox par le code

**Jayme65** · 10/12/2013, 16h07

Bonjour,

Je suis en train de créer un carousel en utilisant "PathListBox"
Tout marche parfaitment bien...si j'utilise des boutons (et "Interaction.Behaviors")

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ec="http://schemas.microsoft.com/expression/2010/controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:Expression_Samples_PathListBoxUtils="clr-namespace:Expression.Samples.PathListBoxUtils;assembly=Expression.Samples.PathListBoxUtils" mc:Ignorable="d"
    x:Class="MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="800" Height="480" Background="#DC212C43">
    <Window.Resources>
        <Style x:Key="PathListBoxItemStyle1" TargetType="{x:Type ec:PathListBoxItem}">
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ec:PathListBoxItem}">
                        <Grid Height="150" Width="200">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Expression_Samples_PathListBoxUtils:PathListBoxItemTransformer d:LayoutOverrides="Width" IsCentered="True" OpacityRange="0.4,1" ScaleRange="0.4,1">
                                <Grid Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5" d:LayoutOverrides="Width" Margin="0,0,-51.113,0">
                                    <Grid.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform>
                                                <ScaleTransform.ScaleY>
                                                    <Binding Path="IsArranged" RelativeSource="{RelativeSource TemplatedParent}">
                                                        <Binding.Converter>
                                                            <ec:IsArrangedToScaleConverter/>
                                                        </Binding.Converter>
                                                    </Binding>
                                                </ScaleTransform.ScaleY>
                                                <ScaleTransform.ScaleX>
                                                    <Binding Path="IsArranged" RelativeSource="{RelativeSource TemplatedParent}">
                                                        <Binding.Converter>
                                                            <ec:IsArrangedToScaleConverter/>
                                                        </Binding.Converter>
                                                    </Binding>
                                                </ScaleTransform.ScaleX>
                                            </ScaleTransform>
                                            <SkewTransform/>
                                            <RotateTransform Angle="{Binding OrientationAngle, RelativeSource={RelativeSource TemplatedParent}}"/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </Grid.RenderTransform>
                                    <Rectangle x:Name="fillColor" Fill="#FFBADDE9" I****TestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
                                    <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" I****TestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
                                    <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
                                    <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
                                </Grid>
                            </Expression_Samples_PathListBoxUtils:PathListBoxItemTransformer>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
 
    <Grid x:Name="LayoutRoot">
        <ec:PathListBox x:Name="pathListBox" Height="100" Width="100" ItemContainerStyle="{DynamicResource PathListBoxItemStyle1}" WrapItems="True">
            <ec:PathListBox.LayoutPaths>
                <ec:LayoutPath SourceElement="{Binding ElementName=path2}" Distribution="Even"/>
            </ec:PathListBox.LayoutPaths>
            <i:Interaction.Behaviors>
                <Expression_Samples_PathListBoxUtils:PathListBoxScrollBehavior Duration="0:0:0.2">
                    <i:Interaction.Triggers>
                        <i:EventTrigger SourceName="pathListBox" SourceObject="{Binding ElementName=button}" EventName="Click">
                            <i:InvokeCommandAction CommandName="DecrementCommand"/>
                        </i:EventTrigger>
                        <i:EventTrigger SourceName="pathListBox" SourceObject="{Binding ElementName=button1}" EventName="Click">
                            <i:InvokeCommandAction CommandName="IncrementCommand"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Expression_Samples_PathListBoxUtils:PathListBoxScrollBehavior>
            </i:Interaction.Behaviors>
            <Rectangle Height="150" HorizontalAlignment="Left" Name="Rectangle1" Width="200" Fill="Red" />
            <Rectangle Height="150" HorizontalAlignment="Left" Name="Rectangle2" Width="200" Fill="RosyBrown" />
            <Rectangle Height="150" HorizontalAlignment="Left" Name="Rectangle3" Width="200" Fill="RoyalBlue" />
            <Rectangle Height="150" HorizontalAlignment="Left" Name="Rectangle4" Width="200" Fill="SaddleBrown" />
            <Rectangle Height="150" HorizontalAlignment="Left" Name="Rectangle5" Width="200" Fill="Salmon" />
            <Rectangle Height="150" HorizontalAlignment="Left" Name="Rectangle6" Width="200" Fill="SandyBrown" />
            <Rectangle Height="150" HorizontalAlignment="Left" Name="Rectangle7" Width="200" Fill="SeaGreen" />
            <Rectangle Height="150" HorizontalAlignment="Left" Name="Rectangle8" Width="200" Fill="SeaShell" />
            <Rectangle Height="150" HorizontalAlignment="Left" Name="Rectangle9" Width="200" Fill="Sienna" />
            <Rectangle Height="150" HorizontalAlignment="Left" Name="Rectangle10" Width="200" Fill="Silver" />
        </ec:PathListBox>
        <Path x:Name="path" Data="M17,235 L769.5,235" Fill="#FFF4F4F5" Height="1" Margin="50,0,50,206" Stretch="Fill" Stroke="Black" VerticalAlignment="Bottom" Visibility="Hidden"/>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="75" Margin="8,0,0,8"/>
        <Button x:Name="button1" Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75" Margin="0,0,8,8"/>
        <Path x:Name="path2" Data="M377.5,203.50107 C171,203.50107 62.499854,216.50111 49.5,234.5 12.021974,286.39003 192.5,320.50145 380.5,320.50145 568.5,320.50145 776.43383,291.2388 730.5,234.5 713.5,213.5011 584,203.50107 377.5,203.50107 z" Margin="44.524,203.5,46.047,120.5" Stretch="Fill" Stroke="Black" Visibility="Hidden"/>
    </Grid>
</Window>

Mais je dois pouvoir déplacer le carousel par le code!
Donc je voudrais votre aide sur:
1) Soit: comment invoquer les "Interaction.Triggers" par le code
2) Ou: Comment implémenter un Storyboard pour naviguer d'un "pathListBox.StartItemIndex" à un autre(et donc effacer le code "<i:Interaction.Behaviors>")

Merci pour votre aide!!

PS: vous pouvez copier/coller le code tel que pour tester, cela marchera directement)

**ikeas** · 12/12/2013, 07h23

ben a priori tu peux reccup les storyboard en faisant un findreource
changer d'etat sur tes visualstat par (ce qui revient a invoquer les interactions)

1)

Code :

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

1
2
 
VisualStateManager.GoToElementState(this.LayoutRoot as FrameworkElement, "lenomduvisualstat", true);

2)
pour ce point je vois pas trop
tu veux sauter tu path au path2 c'est ca ???

Animation PathListBox par le code

Windows Presentation Foundation

Vue hybride

Discussions similaires

Partager

Partager