How to approach for this kind of UI in WPF? - wpf

Question

I have two panel , Left Hand site represents the list of options or menu and right hand side will be list of usercontrol assigned to eatch menu items in the left as Listbox or Items control.
The requirement is
eg. If i move the thumb of the scrollbar in the right hand side panel to anyway near the usercontrol2 , the Usercontrol 2 heading in the heading panel should get activated and if iam moving the thumb to the usercontrol1, the usercontrol 1 heading in the heading panel should get activated and so on.
So how to proceed to accomplish these kind of UI.? Any suggestion is greatly appreciated?
The basic idea is to reduce the no of clicks in the Heading Panel. Right hand side is heavily packed with UI elements so user wants to avoid unnecessary click in the heading.
User will not click on the Left side heading panel. While traversing the right hand panel's scrollviewer the heading should automatically get selected to give the user about the control which he is entering or using now.

Answer 1

Following should work:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Column="0">
<ItemsControl>
<!--List on Left : List of Usercontrols-->
</ItemsControl>
</Border>
<Border Grid.Column="1">
<ScrollViewer VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Disabled">
<ItemsControl>
<!--List on Right : List of Usercontrols-->
</ItemsControl>
</ScrollViewer>
</Border>
</Grid>
Use Template Selectors to select which UserControl to display in lists.
EDIT-
You could try something like following:
XAML:
<Window x:Class="WpfApplication1.Window4"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window4"
Height="300"
Width="300">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0">
<ListBox Name="ListBox1"
ItemsSource="{Binding}"
HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Height="50"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="5"
Padding="3">
<TextBlock Text="{Binding}" />
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
<Border Grid.Column="1">
<ScrollViewer VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Disabled"
ScrollChanged="OnScrollChanged"
Name="ScrollViewer1">
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Height="250"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="5"
Padding="3">
<TextBlock Text="{Binding}" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Border>
</Grid>
</Grid>
</Window>
Code:
public partial class Window4 : Window
{
public Window4()
{
InitializeComponent();
DataContext = Enumerable.Range(1, 25);
}
private void OnScrollChanged(object sender, ScrollChangedEventArgs e)
{
var element = ScrollViewer1.InputHitTest(new Point(5, 5));
if (element != null)
{
if (element is FrameworkElement)
{
ListBox1.SelectedItem = (element as FrameworkElement).DataContext;
}
}
}
}
NOTE:
This is just a sample code. Just one of possible ways to do it. And it is not a very healthy piece of code. Some refactoring might be needed. I would wrap this logic up in an Attached Property or a Behavior.

Answer 2

I would use a Scrollbar control and use it somehow like an up/down button. If you move the scroll up you go to the next control and the same moving down.
Not sure if you know what I mean, let me know.