如何在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;
            }
        }
    }
}

笔记：

这只是一个示例代码。只是可能的方法之一。这不是一段非常健康的代码。可能需要进行一些重构。我会将这个逻辑包装在 anAttached Property或 a中Behavior。