locked
open Path ListBox Scroll Behavior RRS feed

  • Question

  • I have a pathlistbox with PathListBoxScrollBehavior attached like in the carousel tutorial showed by Microsoft in the presentation of PathListBoxUtils.

    My path is a open path (a line) and I don't want a infinite carousel but a path list box that go through the items but stops when comes in the last or first item. Am I being clear?

    Something similar to what exist on ios.

    I know there are a way to do that but I can't find it.

    Thanks for help.


    • Edited by wshossein Wednesday, October 31, 2012 1:16 PM
    Wednesday, October 31, 2012 3:46 AM

All replies

  • Hello Wshossein.

    With your pathListBox selected, look in the properties panel under "LayoutPaths".  Make sure "WrapItems" is not checked or set to false.

    See if that solves your problem.

    ~Christine


    My Gallery

    Wednesday, October 31, 2012 5:10 AM
  • Thanks Christine!

    Almost there. I set WrapItems to false and now the carousel don't loop infinitely but looks weird.

    The capacity value of my PathListBox [PLB] is set to 5 but when the last item appear on the screen and I continue clicking on button to advance or click on item directly the capacity of PLB changes and show less items than capacity. This action destroy the effect.

    There are a way to don't allow increment action when the last item is visible?

    PS.: I can't post images to show you because my account isn't not verified yet. How I verify my account?


    Wednesday, October 31, 2012 1:13 PM
  • Well my first thought would be to HitTest the items on either end of the path and enable or disable the buttons according to what item is at either end. 

    Here's a quick example.  You'd have to play with actual hittest point based on your path, but perhaps something like this might work for you.

    <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:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    	xmlns:Expression_Samples_PathListBoxUtils="clr-namespace:Expression.Samples.PathListBoxUtils;assembly=Expression.Samples.PathListBoxUtils"
    	x:Class="WpfApplication7.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot">
    		<Path x:Name="path" Data="M59.945405,224 C241.41294,143.0592 377.37024,151.16027 561.53094,233.43847" Margin="60,167.365,61.5,207.5" Stretch="Fill"/>
    		<ec:PathListBox x:Name="pathListBox" Margin="60,167.365,61.5,207.5">
    			<i:Interaction.Behaviors>
    				<Expression_Samples_PathListBoxUtils:PathListBoxScrollBehavior HideEnteringItem="True">
    					<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:EventTrigger SourceName="pathListBox" EventName="SelectionChanged">
    							<i:InvokeCommandAction CommandName="ScrollSelectedCommand"/>
    						</i:EventTrigger>
    					</i:Interaction.Triggers>
    				</Expression_Samples_PathListBoxUtils:PathListBoxScrollBehavior>
    			</i:Interaction.Behaviors>
    			<ec:PathListBox.LayoutPaths>
    				<ec:LayoutPath SourceElement="{Binding ElementName=path}" Distribution="Even" FillBehavior="NoOverlap" Capacity="7" Start="0.07"/>
    			</ec:PathListBox.LayoutPaths>
    			<TextBlock TextWrapping="Wrap" Text="1" Background="Red" Width="50" Height="50" FontSize="32" TextAlignment="Center"/>
    			<TextBlock TextWrapping="Wrap" Text="2" Background="Red" Width="50" Height="50" FontSize="32" TextAlignment="Center"/>
    			<TextBlock TextWrapping="Wrap" Text="3" Background="Red" Width="50" Height="50" FontSize="32" TextAlignment="Center"/>
    			<TextBlock TextWrapping="Wrap" Text="4" Background="Red" Width="50" Height="50" FontSize="32" TextAlignment="Center"/>
    			<TextBlock TextWrapping="Wrap" Text="5" Background="Red" Width="50" Height="50" FontSize="32" TextAlignment="Center"/>
    			<TextBlock TextWrapping="Wrap" Text="6" Background="Red" Width="50" Height="50" FontSize="32" TextAlignment="Center"/>
    			<TextBlock TextWrapping="Wrap" Text="7" Background="Red" Width="50" Height="50" FontSize="32" TextAlignment="Center"/>
    			<TextBlock TextWrapping="Wrap" Text="8" Background="Red" Width="50" Height="50" FontSize="32" TextAlignment="Center"/>
    			<TextBlock TextWrapping="Wrap" Text="9" Background="Red" Width="50" Height="50" FontSize="32" TextAlignment="Center"/>
    			<TextBlock TextWrapping="Wrap" Text="10" Background="Red" Width="50" Height="50" FontSize="32" TextAlignment="Center"/>
    		</ec:PathListBox>
    		<Button x:Name="button" Content="&lt;" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="75" Margin="63,0,0,120.04" Click="button_Click" IsEnabled="False"/>
    		<Button x:Name="button1" Content="&gt;" VerticalAlignment="Bottom" Margin="0,0,86,120.04" HorizontalAlignment="Right" Width="75" Click="button1_Click"/>
    	</Grid>
    </Window>

    And the C# code-behind...

    using System.Windows;
    using System.Windows.Media;
    
    namespace WpfApplication7
    {
    	public partial class MainWindow : Window
    	{
    		Point p = new Point(0, 0);
    		
    		public MainWindow()
    		{
    			this.InitializeComponent();
    		}
    
    		private void button1_Click(object sender, System.Windows.RoutedEventArgs e)
    		{
    			button.IsEnabled = true;
    			p = path.TranslatePoint(new Point(0, 0), LayoutRoot);
    			double a = path.ActualWidth;
                		HitTestResult result = VisualTreeHelper.HitTest(LayoutRoot, new Point(p.X - 40 + a, p.Y + 40));
    		        if (result != null)
                		{
    				int b = pathListBox.Items.IndexOf(result.VisualHit);
    				if (b >= pathListBox.Items.Count - 2)
    					button1.IsEnabled = false;
    		        }
    		}
    
    		private void button_Click(object sender, System.Windows.RoutedEventArgs e)
    		{
    			button1.IsEnabled = true;
    			HitTestResult result = VisualTreeHelper.HitTest(LayoutRoot, new Point(p.X + 20, p.Y + 20));
    		        if (result != null)
    		        {
    				int b = pathListBox.Items.IndexOf(result.VisualHit);
    				if (b <= 1)
    					button.IsEnabled = false;
    		        }
    		}
    	}
    }

    I'll upload the project to my SkyDrive so that you can just download it and play with it a bit.

    ~Christine

    Here is the project link.. http://sdrv.ms/Pm8RsL  I named it PathListBoxWithHitTest.


    My Gallery



    Wednesday, October 31, 2012 5:03 PM