Как подойти для такого вида интерфейса в WPF?

Question

У меня есть две панели, левый сайт представляет список опций или меню, а правая сторона будет списком пользовательских элементов управления, назначенных для пунктов меню слева в качестве элемента управления Listbox или Items.

Требование

например. Если я перемещу большой палец полосы прокрутки на правой боковой панели в любом случае рядом с usercontrol2, должен активироваться заголовок Usercontrol 2 на панели заголовков, а если я перемещаю большой палец к usercontrol1, заголовок usercontrol 1 должен появиться активируйся и т. д.

Так как же выполнить этот вид пользовательского интерфейса? Любое предложение высоко ценится?

Основная идея заключается в уменьшении количества кликов на панели заголовка. Правая сторона сильно заполнена элементами пользовательского интерфейса, поэтому пользователь хочет избежать ненужного щелчка в заголовке. Пользователь не будет нажимать на левую боковую панель заголовка. При обходе прокрутки правой панели заголовок должен автоматически выбираться, чтобы дать пользователю информацию о элементе управления, который он вводит или использует сейчас.

Answer 1

Должны работать следующие:

    <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>

Используйте Template Selectors для выбора UserControl для отображения в списках.

Edit-

Вы можете попробовать что-то вроде следующего:

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>

Код:

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;
            }
        }
    }
}

Примечание:

Это просто пример кода. Просто один из возможных способов сделать это. И это не очень полезный кусок кода. Может потребоваться некоторый рефакторинг. Я бы обернул эту логику в Attached Property или Behavior.

Answer 2

Я бы использовал элемент прокрутки и использовал бы его как кнопку вверх / вниз. Если вы перемещаете прокрутку вверх, вы переходите к следующему элементу управления и тоже самое двигаетесь вниз.

Не уверен, если вы понимаете, о чем я, дайте мне знать.