Hi,
I'm creating a carousel using a PathListBox.
Everything's working fine..if I use buttons (and Interaction.Behaviors)
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!
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!
