locked
Horizontal Listbox and frozen column RRS feed

  • Question

  • I have a horizontal listbox and I want to freeze the first two columns. (in fact it are rows which are shown horizontally)

    How should i be able to do that?

    At the moment I use two listboxes but keeping both listboxes in sync does not work all the time.

    Thursday, July 4, 2013 8:29 AM

Answers

  • Hmmm... Well try something like this...

    I changed the control to have 3 lists (Make sure both frozen columns have their TranslateY bound to the offset)...

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	xmlns:local="clr-namespace:HorizontalListDisplay"
    	mc:Ignorable="d"
    	x:Class="HorizontalListDisplay.HorizontalList"
    	x:Name="UserControl"
    	d:DesignWidth="640" d:DesignHeight="480" FontFamily="Segoe UI Light" FontSize="21.333" Loaded="UserControl_Loaded">
    	<UserControl.Resources>
    		<local:NegativeConverter x:Key="NegativeConverter"/>
    		<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
    			<VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal"/>
    		</ItemsPanelTemplate>
    		<ItemsPanelTemplate x:Key="ItemsPanelTemplate2">
    			<VirtualizingStackPanel IsItemsHost="True"/>
    		</ItemsPanelTemplate>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot">
    		<Grid x:Name="Main" Margin="0">
    			<Grid.ColumnDefinitions>
    				<ColumnDefinition Width="Auto"/>
    				<ColumnDefinition Width="Auto"/>
    				<ColumnDefinition Width="*"/>
    			</Grid.ColumnDefinitions>
    			<ScrollViewer x:Name="Column1ScrollViewer" Margin="0" MinWidth="100" ScrollViewer.VerticalScrollBarVisibility="Hidden">
    				<ListBox x:Name="column1ListBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden" IsManipulationEnabled="True" ItemsPanel="{DynamicResource ItemsPanelTemplate2}" BorderBrush="{x:Null}" VerticalAlignment="Top" IsHitTestVisible="False" IsTextSearchEnabled="False" Focusable="False" Background="{x:Null}" RenderTransformOrigin="0.5,0.5">
    					<ListBox.RenderTransform>
    						<TransformGroup>
    							<ScaleTransform/>
    							<SkewTransform/>
    							<RotateTransform/>
    							<TranslateTransform Y="{Binding VerticalOffset, Converter={StaticResource NegativeConverter}, ElementName=itemScrollViewer, Mode=OneWay}"/>
    						</TransformGroup>
    					</ListBox.RenderTransform>
    				</ListBox>
    			</ScrollViewer>
    			<ScrollViewer x:Name="Column2ScrollViewer" Margin="0" MinWidth="100" ScrollViewer.VerticalScrollBarVisibility="Hidden" Grid.Column="1">
    				<ListBox x:Name="column2ListBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden" IsManipulationEnabled="True" ItemsPanel="{DynamicResource ItemsPanelTemplate2}" BorderBrush="{x:Null}" VerticalAlignment="Top" IsHitTestVisible="False" IsTextSearchEnabled="False" Focusable="False" Background="{x:Null}" RenderTransformOrigin="0.5,0.5">
    					<ListBox.RenderTransform>
    						<TransformGroup>
    							<ScaleTransform/>
    							<SkewTransform/>
    							<RotateTransform/>
    							<TranslateTransform Y="{Binding VerticalOffset, Converter={StaticResource NegativeConverter}, ElementName=itemScrollViewer, Mode=OneWay}"/>
    						</TransformGroup>
    					</ListBox.RenderTransform>
    				</ListBox>
    			</ScrollViewer>
    			<ScrollViewer x:Name="itemScrollViewer" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Column="2">
    				<ListBox x:Name="itemListBox" IsManipulationEnabled="True" ItemsPanel="{DynamicResource ItemsPanelTemplate1}" VerticalAlignment="Top" BorderBrush="{x:Null}" Background="{x:Null}"/>
    			</ScrollViewer>
    		</Grid>
    	</Grid>
    </UserControl>

    I changed the code-behind to separate the ItemsSource into 3...

    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Markup.Primitives;
    
    namespace HorizontalListDisplay
    {
    	public partial class HorizontalList : UserControl
    	{
    		[Category("Settings")]
    		public ObservableCollection<object> ItemsSource { get { return (ObservableCollection<object>)GetValue(ItemsSourceProperty); } set { SetValue(ItemsSourceProperty, value); }}
    		public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(ObservableCollection<object>), typeof(HorizontalList), new PropertyMetadata(null, new PropertyChangedCallback(OnItemsSourceChanged)));	
    		
    		[Category("Settings")]
    		public DataTemplate ItemsTemplate { get { return (DataTemplate)GetValue(ItemsTemplateProperty); } set { SetValue(ItemsTemplateProperty, value); }}
    		public static readonly DependencyProperty ItemsTemplateProperty = DependencyProperty.Register("ItemsTemplate", typeof(DataTemplate), typeof(HorizontalList), new PropertyMetadata(null));	
    		
    		[Category("Settings")]
    		public DataTemplate FrozenColumnTemplate { get { return (DataTemplate)GetValue(FrozenColumnTemplateProperty); } set { SetValue(FrozenColumnTemplateProperty, value); }}
    		public static readonly DependencyProperty FrozenColumnTemplateProperty = DependencyProperty.Register("FrozenColumnTemplate", typeof(DataTemplate), typeof(HorizontalList), new PropertyMetadata(null));	
    		
    		
    		private static void OnItemsSourceChanged(object sender, DependencyPropertyChangedEventArgs e)
    		{
    			HorizontalList hl = sender as HorizontalList;
    			hl.SetUpList();
    		}
    		
    		public HorizontalList()
    		{
    			this.InitializeComponent();
    			SetUpList();
    		}
    		
    		private void SetUpList()
    		{
    			if (column1ListBox.Items.Count > 0)
    			{
    				column1ListBox.Items.Clear();
    				column2ListBox.Items.Clear();
    				itemListBox.Items.Clear();
    			}
    			
    			ObservableCollection<object> Column1Source = new ObservableCollection<object>();
    			ObservableCollection<object> Column2Source = new ObservableCollection<object>();
    			ObservableCollection<object> MainSource = new ObservableCollection<object>();
    			
    			if (ItemsSource != null)
    			{
    				if (ItemsSource.Count >= 3)
    				{
    					for (int i = 0; i < ItemsSource.Count; i++)
    					{
    						if (i == 0)
    							Column1Source.Add(ItemsSource[0]);
    						if (i == 1)
    							Column2Source.Add(ItemsSource[1]);
    						else
    							MainSource.Add(ItemsSource[i]);
    					}
    					
    					column1ListBox.ItemTemplate = FrozenColumnTemplate;
    					column2ListBox.ItemTemplate = FrozenColumnTemplate;
    					itemListBox.ItemTemplate = ItemsTemplate;
    					
    					column1ListBox.ItemsSource = Column1Source;
    					column2ListBox.ItemsSource = Column1Source;
    					itemListBox.ItemsSource = ItemsSource;				
    				}
    			}
    		}
    
    		private void UserControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
    		{
    			SetUpList();
    		}
    	}
    }

    And then the MainWindow I just had to change the header template which could be the same as the ItemsTemplate (You may have to reduce the margin of the items in the header template so that they appear to be scrolling vertically even with the main list) ...

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:local="clr-namespace:HorizontalListDisplay" 
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    	mc:Ignorable="d"
    	x:Class="HorizontalListDisplay.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="400" Height="150">
    	<Window.Resources>
    		<DataTemplate x:Key="ItemTemplate">
    			<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
    				<TextBlock Text="{Binding Make}" Margin="10"/>
    				<TextBlock Text="{Binding Model}" Margin="10"/>
    				<TextBlock Text="{Binding Color}" Margin="10"/>
    			</StackPanel>
    		</DataTemplate>
    		<DataTemplate x:Key="HeaderTemplate">
    			<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
    				<TextBlock Text="{Binding Make}" Margin="10"/>
    				<TextBlock Text="{Binding Model}" Margin="10"/>
    				<TextBlock Text="{Binding Color}" Margin="10"/>
    			</StackPanel>
    		</DataTemplate>
    	</Window.Resources>
    
    	<Grid x:Name="LayoutRoot">
    		<local:HorizontalList x:Name="hl" d:LayoutOverrides="Height" ItemsSource="{Binding Collection}" ItemsTemplate="{DynamicResource ItemTemplate}" FrozenColumnTemplate="{DynamicResource HeaderTemplate}"  />
    	</Grid>
    </Window>

    And I didn't touch the code-behind for the MainWindow...

    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.Windows;
    
    namespace HorizontalListDisplay
    {
    	public partial class MainWindow : Window
    	{
    		ObservableCollection<object> CarCollection = new ObservableCollection<object>() 
    		{ 
        		new Cars { Make = "Acura", Model = "MDX", Color = "Black"},
        		new Cars { Make = "Ford", Model = "Explorer", Color = "Red" },
            	new Cars { Make = "Ford", Model = "Escape", Color = "White" },
        		new Cars { Make = "GMC", Model = "Sierra", Color = "Blue" },
    			new Cars { Make = "Acura2", Model = "MDX", Color = "Silver"},
        		new Cars { Make = "Ford2", Model = "Explorer", Color = "Black" },
            	new Cars { Make = "Ford2", Model = "Escape", Color = "Black" },
        		new Cars { Make = "GMC2", Model = "Sierra", Color = "Black" }
    		};
    
    		public MainWindow()
    		{
    			this.InitializeComponent();
    			hl.ItemsSource = CarCollection;
    		}
    	}
    	
    	public class Cars
        {
            #region
    
            private string make;
            public string Make { get { return make; } set { make = value; OnPropertyChanged("Make"); } }
    
            private string model;
            public string Model { get { return model; } set { model = value; OnPropertyChanged("Model"); } }
    
    		private string color;
            public string Color { get { return color; } set { color = value; OnPropertyChanged("Color"); } }
    		
            #endregion
    
            #region INotifyPropertyChanged
    
            public event PropertyChangedEventHandler PropertyChanged;
            protected void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); }
    
            #endregion
        }
    }

    Will that work for you?  I'll upload the new sample to SkyDrive in a sec.

    ~Christine


    HorizontalListDisplay (2)
    • Edited by Christine L. _ Wednesday, July 10, 2013 1:31 PM Adjusted code for control.
    • Proposed as answer by Lisa Zhu Thursday, July 11, 2013 12:12 PM
    • Marked as answer by Lisa Zhu Tuesday, July 16, 2013 7:53 AM
    Wednesday, July 10, 2013 1:23 PM

All replies

  • Hi,

    What do you mean by "freeze the first two columns"?


    Cheers, Amy

    Friday, July 5, 2013 11:07 AM
  • So when there is a horizontal scrollbar and you scroll that the first two columns are frozen (won't move, stay in the same place)
    Friday, July 5, 2013 8:22 PM
  • Hello Jron.

    Last year I helped someone with a horizontal type list that had the stationary headers on the left.  Is that what you are after?

    If so, I copied it to my SkyDrive if you'd like to try it and get some ideas...  http://sdrv.ms/14UHlGQ

    ~Christine

    Saturday, July 6, 2013 10:33 PM
  • Hello Jron.

    Last year I helped someone with a horizontal type list that had the stationary headers on the left.  Is that what you are after?

    If so, I copied it to my SkyDrive if you'd like to try it and get some ideas...  http://sdrv.ms/14UHlGQ

    ~Christine

    Christine,

    That's almost what I want to do, nice example. The difference is that I want to be able to freeze (so they won't move when you use the horizontal scrollbar) the first two items in the listbox (Acura and Ford in this case).

    Wednesday, July 10, 2013 12:42 PM
  • Hmmm... Well try something like this...

    I changed the control to have 3 lists (Make sure both frozen columns have their TranslateY bound to the offset)...

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	xmlns:local="clr-namespace:HorizontalListDisplay"
    	mc:Ignorable="d"
    	x:Class="HorizontalListDisplay.HorizontalList"
    	x:Name="UserControl"
    	d:DesignWidth="640" d:DesignHeight="480" FontFamily="Segoe UI Light" FontSize="21.333" Loaded="UserControl_Loaded">
    	<UserControl.Resources>
    		<local:NegativeConverter x:Key="NegativeConverter"/>
    		<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
    			<VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal"/>
    		</ItemsPanelTemplate>
    		<ItemsPanelTemplate x:Key="ItemsPanelTemplate2">
    			<VirtualizingStackPanel IsItemsHost="True"/>
    		</ItemsPanelTemplate>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot">
    		<Grid x:Name="Main" Margin="0">
    			<Grid.ColumnDefinitions>
    				<ColumnDefinition Width="Auto"/>
    				<ColumnDefinition Width="Auto"/>
    				<ColumnDefinition Width="*"/>
    			</Grid.ColumnDefinitions>
    			<ScrollViewer x:Name="Column1ScrollViewer" Margin="0" MinWidth="100" ScrollViewer.VerticalScrollBarVisibility="Hidden">
    				<ListBox x:Name="column1ListBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden" IsManipulationEnabled="True" ItemsPanel="{DynamicResource ItemsPanelTemplate2}" BorderBrush="{x:Null}" VerticalAlignment="Top" IsHitTestVisible="False" IsTextSearchEnabled="False" Focusable="False" Background="{x:Null}" RenderTransformOrigin="0.5,0.5">
    					<ListBox.RenderTransform>
    						<TransformGroup>
    							<ScaleTransform/>
    							<SkewTransform/>
    							<RotateTransform/>
    							<TranslateTransform Y="{Binding VerticalOffset, Converter={StaticResource NegativeConverter}, ElementName=itemScrollViewer, Mode=OneWay}"/>
    						</TransformGroup>
    					</ListBox.RenderTransform>
    				</ListBox>
    			</ScrollViewer>
    			<ScrollViewer x:Name="Column2ScrollViewer" Margin="0" MinWidth="100" ScrollViewer.VerticalScrollBarVisibility="Hidden" Grid.Column="1">
    				<ListBox x:Name="column2ListBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden" IsManipulationEnabled="True" ItemsPanel="{DynamicResource ItemsPanelTemplate2}" BorderBrush="{x:Null}" VerticalAlignment="Top" IsHitTestVisible="False" IsTextSearchEnabled="False" Focusable="False" Background="{x:Null}" RenderTransformOrigin="0.5,0.5">
    					<ListBox.RenderTransform>
    						<TransformGroup>
    							<ScaleTransform/>
    							<SkewTransform/>
    							<RotateTransform/>
    							<TranslateTransform Y="{Binding VerticalOffset, Converter={StaticResource NegativeConverter}, ElementName=itemScrollViewer, Mode=OneWay}"/>
    						</TransformGroup>
    					</ListBox.RenderTransform>
    				</ListBox>
    			</ScrollViewer>
    			<ScrollViewer x:Name="itemScrollViewer" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Column="2">
    				<ListBox x:Name="itemListBox" IsManipulationEnabled="True" ItemsPanel="{DynamicResource ItemsPanelTemplate1}" VerticalAlignment="Top" BorderBrush="{x:Null}" Background="{x:Null}"/>
    			</ScrollViewer>
    		</Grid>
    	</Grid>
    </UserControl>

    I changed the code-behind to separate the ItemsSource into 3...

    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Markup.Primitives;
    
    namespace HorizontalListDisplay
    {
    	public partial class HorizontalList : UserControl
    	{
    		[Category("Settings")]
    		public ObservableCollection<object> ItemsSource { get { return (ObservableCollection<object>)GetValue(ItemsSourceProperty); } set { SetValue(ItemsSourceProperty, value); }}
    		public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(ObservableCollection<object>), typeof(HorizontalList), new PropertyMetadata(null, new PropertyChangedCallback(OnItemsSourceChanged)));	
    		
    		[Category("Settings")]
    		public DataTemplate ItemsTemplate { get { return (DataTemplate)GetValue(ItemsTemplateProperty); } set { SetValue(ItemsTemplateProperty, value); }}
    		public static readonly DependencyProperty ItemsTemplateProperty = DependencyProperty.Register("ItemsTemplate", typeof(DataTemplate), typeof(HorizontalList), new PropertyMetadata(null));	
    		
    		[Category("Settings")]
    		public DataTemplate FrozenColumnTemplate { get { return (DataTemplate)GetValue(FrozenColumnTemplateProperty); } set { SetValue(FrozenColumnTemplateProperty, value); }}
    		public static readonly DependencyProperty FrozenColumnTemplateProperty = DependencyProperty.Register("FrozenColumnTemplate", typeof(DataTemplate), typeof(HorizontalList), new PropertyMetadata(null));	
    		
    		
    		private static void OnItemsSourceChanged(object sender, DependencyPropertyChangedEventArgs e)
    		{
    			HorizontalList hl = sender as HorizontalList;
    			hl.SetUpList();
    		}
    		
    		public HorizontalList()
    		{
    			this.InitializeComponent();
    			SetUpList();
    		}
    		
    		private void SetUpList()
    		{
    			if (column1ListBox.Items.Count > 0)
    			{
    				column1ListBox.Items.Clear();
    				column2ListBox.Items.Clear();
    				itemListBox.Items.Clear();
    			}
    			
    			ObservableCollection<object> Column1Source = new ObservableCollection<object>();
    			ObservableCollection<object> Column2Source = new ObservableCollection<object>();
    			ObservableCollection<object> MainSource = new ObservableCollection<object>();
    			
    			if (ItemsSource != null)
    			{
    				if (ItemsSource.Count >= 3)
    				{
    					for (int i = 0; i < ItemsSource.Count; i++)
    					{
    						if (i == 0)
    							Column1Source.Add(ItemsSource[0]);
    						if (i == 1)
    							Column2Source.Add(ItemsSource[1]);
    						else
    							MainSource.Add(ItemsSource[i]);
    					}
    					
    					column1ListBox.ItemTemplate = FrozenColumnTemplate;
    					column2ListBox.ItemTemplate = FrozenColumnTemplate;
    					itemListBox.ItemTemplate = ItemsTemplate;
    					
    					column1ListBox.ItemsSource = Column1Source;
    					column2ListBox.ItemsSource = Column1Source;
    					itemListBox.ItemsSource = ItemsSource;				
    				}
    			}
    		}
    
    		private void UserControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
    		{
    			SetUpList();
    		}
    	}
    }

    And then the MainWindow I just had to change the header template which could be the same as the ItemsTemplate (You may have to reduce the margin of the items in the header template so that they appear to be scrolling vertically even with the main list) ...

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:local="clr-namespace:HorizontalListDisplay" 
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    	mc:Ignorable="d"
    	x:Class="HorizontalListDisplay.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="400" Height="150">
    	<Window.Resources>
    		<DataTemplate x:Key="ItemTemplate">
    			<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
    				<TextBlock Text="{Binding Make}" Margin="10"/>
    				<TextBlock Text="{Binding Model}" Margin="10"/>
    				<TextBlock Text="{Binding Color}" Margin="10"/>
    			</StackPanel>
    		</DataTemplate>
    		<DataTemplate x:Key="HeaderTemplate">
    			<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
    				<TextBlock Text="{Binding Make}" Margin="10"/>
    				<TextBlock Text="{Binding Model}" Margin="10"/>
    				<TextBlock Text="{Binding Color}" Margin="10"/>
    			</StackPanel>
    		</DataTemplate>
    	</Window.Resources>
    
    	<Grid x:Name="LayoutRoot">
    		<local:HorizontalList x:Name="hl" d:LayoutOverrides="Height" ItemsSource="{Binding Collection}" ItemsTemplate="{DynamicResource ItemTemplate}" FrozenColumnTemplate="{DynamicResource HeaderTemplate}"  />
    	</Grid>
    </Window>

    And I didn't touch the code-behind for the MainWindow...

    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.Windows;
    
    namespace HorizontalListDisplay
    {
    	public partial class MainWindow : Window
    	{
    		ObservableCollection<object> CarCollection = new ObservableCollection<object>() 
    		{ 
        		new Cars { Make = "Acura", Model = "MDX", Color = "Black"},
        		new Cars { Make = "Ford", Model = "Explorer", Color = "Red" },
            	new Cars { Make = "Ford", Model = "Escape", Color = "White" },
        		new Cars { Make = "GMC", Model = "Sierra", Color = "Blue" },
    			new Cars { Make = "Acura2", Model = "MDX", Color = "Silver"},
        		new Cars { Make = "Ford2", Model = "Explorer", Color = "Black" },
            	new Cars { Make = "Ford2", Model = "Escape", Color = "Black" },
        		new Cars { Make = "GMC2", Model = "Sierra", Color = "Black" }
    		};
    
    		public MainWindow()
    		{
    			this.InitializeComponent();
    			hl.ItemsSource = CarCollection;
    		}
    	}
    	
    	public class Cars
        {
            #region
    
            private string make;
            public string Make { get { return make; } set { make = value; OnPropertyChanged("Make"); } }
    
            private string model;
            public string Model { get { return model; } set { model = value; OnPropertyChanged("Model"); } }
    
    		private string color;
            public string Color { get { return color; } set { color = value; OnPropertyChanged("Color"); } }
    		
            #endregion
    
            #region INotifyPropertyChanged
    
            public event PropertyChangedEventHandler PropertyChanged;
            protected void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); }
    
            #endregion
        }
    }

    Will that work for you?  I'll upload the new sample to SkyDrive in a sec.

    ~Christine


    HorizontalListDisplay (2)
    • Edited by Christine L. _ Wednesday, July 10, 2013 1:31 PM Adjusted code for control.
    • Proposed as answer by Lisa Zhu Thursday, July 11, 2013 12:12 PM
    • Marked as answer by Lisa Zhu Tuesday, July 16, 2013 7:53 AM
    Wednesday, July 10, 2013 1:23 PM
  • Christine,

    It works great. Better than in my own build control.

    I just had to change one thing because it kept crashing:

    if (column1ListBox.Items.Count > 0)
                {
                //    column1ListBox.Items.Clear();
                //    column2ListBox.Items.Clear();
                //    itemListBox.Items.Clear();
                }

    Thanks for your help. Nice way to keep the scrollbars in sync.

    Wednesday, July 10, 2013 2:40 PM