Question PathListBox animation by code

Jayme65

Active member
Joined
Apr 5, 2011
Messages
35
Programming Experience
Beginner
Hi,
I'm creating a carousel using a PathListBox.
Everything's working fine..if I use buttons (and Interaction.Behaviors)

VB.NET:
<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>

But I have to scroll the carousel by code!
So, I'm asking your help on:
1) Either, how to invoke the "Interaction.Triggers" by code
2) Or, how to implement (by code) a Storyboard to browse from 1 "pathListBox.StartItemIndex" to another (and therefore deleting all the "<i:Interaction.Behaviors>" code"

Thanks very much for your help!!

PS: you can copy/paste the code to test, it should work out of the box!
 
Top Bottom