如何在WPF中实现这种UI界面？

Question

如何在WPF中实现这种UI界面？

5

alt text

我有两个面板，左边的是选项或菜单列表，右边的面板将作为ListBox或ItemsControl列出分配给左侧菜单项的用户控件。

需求是：

例如，如果我在右侧面板的滚动条上移动拇指到任何接近Usercontrol2的位置，Heading面板中的Usercontrol 2标题应该被激活；如果我将拇指移动到Usercontrol1，则Heading面板中的Usercontrol1标题应该被激活，以此类推。

那么如何实现这种UI呢？非常感谢您的任何建议。

基本思路是减少Heading面板中的点击次数。右侧面板装满了UI元素，因此用户希望在Heading中避免不必要的点击。用户不会点击左侧的Heading面板。当遍历右侧面板的滚动视图器时，应自动选择Heading以向用户提供他正在输入或使用的控件信息。

- Kishore Kumar

2个回答

0

我会使用滚动条控件，并将其用作上/下按钮。如果您向上移动滚动条，则会转到下一个控件，向下移动则相同。

不确定您是否明白我的意思，请告诉我。

- Ignacio Soler Garcia

如果我向上或向下移动，如何识别控件？ - Kishore Kumar

请在此处查看：http://www.c-sharpcorner.com/UploadFile/mahesh/SBar06292009105859AM/SBar.aspx - Ignacio Soler Garcia

我忘了提到你应该检查滚动事件。您可以将当前值与上一个值进行比较，然后就知道您是向上还是向下滚动以及滚动了多少。 - Ignacio Soler Garcia

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- decyclone · Accepted Answer

以下代码应该可以正常工作：

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

使用模板选择器来选择在列表中显示的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;
            }
        }
    }
}

注意:

这只是一段示例代码，仅是可能的实现方式之一。它并不是非常稳健的代码，可能需要进行一些重构。我会将这个逻辑封装在一个附加属性或行为中。