如何在WPF中使用这种UI？

Question

我有两个面板，Left Hand网站代表选项或菜单列表，右侧将是分配给左边的eatch菜单项的usercontrol列表，作为Listbox或Items控件。

要求是

例如。如果我将右侧面板中的滚动条的拇指移动到usercontrol2附近的任何位置，标题面板中的Usercontrol 2标题应该被激活，如果我将拇指移动到usercontrol1，标题面板中的usercontrol 1标题应该被激活等等。

那么如何继续完成这些UI。非常感谢任何建议？

基本思路是减少标题面板中的点击次数。右侧有很多UI元素，因此用户希望避免在标题中不必要的点击。 用户不会单击左侧标题面板。在遍历右侧面板的滚动查看器时，标题应自动被选中，以便向用户提供他现在正在输入或使用的控件。

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。

编辑 -

您可以尝试以下内容：

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

我会使用Scrollbar控件并以某种方式使用它像上/下按钮。如果向上移动向上滚动，则转到下一个控件并向下移动。

不确定你是否知道我的意思，请告诉我。