WPF中有没有什么控件可以实现QQ的设置界面的效果？

[aoelover]

如图：



主要是如下功能点：
左侧是一个竖向的选项卡，右侧的详细项目是在一个完整的可滚动的界面中。
选中左侧的条目时，右侧对应的区域会显示出来（滚动到该位置）。
右侧滚动到某块位置时，左侧对应的条目会被选中。

请问大家现在有没有什么控件可以实现这样的效果？

[qq14923349]

这个是考验设置滚动条位置吧

[郑州高新区WPF小王子]

没有直接的控件，WPF的ListBox，布局面板，ScrollViewer 等 组合起来可以实现。

[aoelover]

我好像也没找到，用硬编码的UserControl实现了。稍后把我的实现的贴上来。

[wxstar8]

ListView可以用！

[一个破人]

        private void Grid_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
        {
            Grid view = sender as Grid;
            switch (view.Name)
            {
                case "Grid1":
                    Lable1.Background = Brushes.Gray;
                    Lable2.Background = Brushes.White;
                    Lable3.Background = Brushes.White;
                    Lable4.Background = Brushes.White;
                    break;
                case "Grid2":
                    Lable2.Background = Brushes.Gray;
                    Lable1.Background = Brushes.White;
                    Lable3.Background = Brushes.White;
                    Lable4.Background = Brushes.White;
                    break;
                case "Grid3":
                    Lable3.Background = Brushes.Gray;
                    Lable1.Background = Brushes.White;
                    Lable2.Background = Brushes.White;
                    Lable4.Background = Brushes.White;
                    break;
                case "Grid4":
                    Lable4.Background = Brushes.Gray;
                    Lable1.Background = Brushes.White;
                    Lable2.Background = Brushes.White;
                    Lable3.Background = Brushes.White;
                    break;
                default:
                    break;
            }
            var eventArg = new MouseWheelEventArgs(e.MouseDevice, e.Timestamp, e.Delta);
            eventArg.RoutedEvent = UIElement.MouseWheelEvent;
            eventArg.Source = sender;
            view.RaiseEvent(eventArg);
        }

        private void Label_MouseDown1(object sender, MouseButtonEventArgs e)
        {
            Lable1.Background = Brushes.Gray;
            Lable2.Background = Brushes.White;
            Lable3.Background = Brushes.White;
            Lable4.Background = Brushes.White;
            scroll.ScrollToVerticalOffset(0);
        }

        private void Label_MouseDown2(object sender, MouseButtonEventArgs e)
        {
            Lable2.Background = Brushes.Gray;
            Lable1.Background = Brushes.White;
            Lable3.Background = Brushes.White;
            Lable4.Background = Brushes.White;
            scroll.ScrollToVerticalOffset(300);
        }

        private void Label_MouseDown3(object sender, MouseButtonEventArgs e)
        {
            Lable3.Background = Brushes.Gray;
            Lable1.Background = Brushes.White;
            Lable2.Background = Brushes.White;
            Lable4.Background = Brushes.White;
            scroll.ScrollToVerticalOffset(600);
        }

        private void Label_MouseDown4(object sender, MouseButtonEventArgs e)
        {
            Lable4.Background = Brushes.Gray;
            Lable1.Background = Brushes.White;
            Lable2.Background = Brushes.White;
            Lable3.Background = Brushes.White;
            scroll.ScrollToVerticalOffset(900);
        }

  <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0">
            <StackPanel>
                <Label
                    x:Name="Lable1"
                    Height="30"
                    VerticalAlignment="Center"
                    Content="第一项"
                    MouseDown="Label_MouseDown1" />
                <Label
                    x:Name="Lable2"
                    Height="30"
                    VerticalAlignment="Center"
                    Content="第二项"
                    MouseDown="Label_MouseDown2" />
                <Label
                    x:Name="Lable3"
                    Height="30"
                    VerticalAlignment="Center"
                    Content="第三项"
                    MouseDown="Label_MouseDown3" />
                <Label
                    x:Name="Lable4"
                    Height="30"
                    VerticalAlignment="Center"
                    Content="第四项"
                    MouseDown="Label_MouseDown4" />
            </StackPanel>
            <Label VerticalAlignment="Bottom" Content="{Binding ElementName=scroll,Path=VerticalOffset}"/>
        </Grid>
        <ScrollViewer Grid.Column="1" x:Name="scroll">
            <StackPanel Orientation="Vertical">
                <Grid
                    x:Name="Grid1"
                    Height="300"
                    Background="Red"
                    PreviewMouseWheel="Grid_PreviewMouseWheel">
                    <Label Content="111" />
                </Grid>
                <Grid
                    x:Name="Grid2"
                    Height="300"
                    Background="Azure"
                    PreviewMouseWheel="Grid_PreviewMouseWheel">
                    <Label Content="222" />
                </Grid>
                <Grid
                    x:Name="Grid3"
                    Height="300"
                    Background="DarkBlue"
                    PreviewMouseWheel="Grid_PreviewMouseWheel">
                    <Label Content="333" />
                </Grid>
                <Grid
                    x:Name="Grid4"
                    Height="300"
                    Background="Violet"
                    PreviewMouseWheel="Grid_PreviewMouseWheel">
                    <Label Content="444" />
                </Grid>
            </StackPanel>
        </ScrollViewer>
    </Grid>

做的一个简单的，看看行不行

[wushang923]

都放在ScrollViewer里，根据条件切位置就可以了。