wpf - WPF 菜单样式列表框 (MVVM)

Question

我想创建一个跟踪所选项目的菜单，所以我使用嵌套的 ListBoxes（因为 Selectors 的选项非常有限。主 ListBox 水平排列，每个 ListBoxItem 包含一个 TextBlock 和一个 StackPanel 以及另一个 ListBox（这个一个垂直显示）以显示“MenuItems”（我还需要跟踪所选项目）。像这样：

    <ListBox DockPanel.Dock="Top" Grid.Column="0" ItemsSource="{Binding DashBoards}" 
                     IsSynchronizedWithCurrentItem="True" SelectedItem="{Binding SelectedDashBoard}">

        <ListBox.Template>
            <ControlTemplate TargetType="{x:Type ListBox}">
                <DockPanel>
                    <ScrollViewer x:Name="scrollviewer" HorizontalScrollBarVisibility="Hidden" CanContentScroll="False">
                        <StackPanel IsItemsHost="True" Orientation="Horizontal" />
                    </ScrollViewer>
                </DockPanel>
            </ControlTemplate>
        </ListBox.Template>

        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding Name}" />
                    <dx:DXExpander IsExpanded="{Binding IsSelected}">
                        <ListBox ItemsSource="{Binding Sections}" 
                     IsSynchronizedWithCurrentItem="True" SelectedItem="{Binding SelectedSection}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Metadata.Name}" />
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </dx:DXExpander>
                </StackPanel> 
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

我设法将这个 ListBox 显示在其他控件之上，所以它看起来像一个菜单。

现在有问题了……当我在水平列表框中选择一个项目时，扩展器可以正常展开，但列表框的高度会增加，因此所有其他项目看起来也像展开了一样。

如何在不更改 ListBox 高度的情况下仅扩展所选项目？

换句话说，我怎样才能让垂直列表框之一溢出其父容器（又名水平列表框）？

我想我需要重新构建一切，但我不知道如何开始。我找到了一些使用 Canvas 的解决方案，但在这种情况下它们似乎不起作用。

欢迎任何帮助，并将努力支持 ;-)

（注意：以防之前不清楚，我需要知道在水平 ListBox 中选择了哪个元素，以及在每个单独的垂直 ListBox 中选择了哪个元素。这将绑定到跟踪选择的相应 ViewModel，并且两者水平和垂直列表框是动态填充的，因此无法在 XAML 中定义它们）

Answer 1

您可以将所选样式移出数据模板，使其不会应用于所有项目。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="ListViewItem">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Height" Value="90"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <ListView>
            <ListView.Items>
                <sys:String>a</sys:String>
                <sys:String>b</sys:String>
                <sys:String>c</sys:String>
                <sys:String>d</sys:String>
                <sys:String>e</sys:String>                
            </ListView.Items>
        </ListView>
    </Grid>
</Window>

编辑：在正确阅读您所追求的内容后，我没有您的扩展器类或您要绑定的项目，所以我使用的是 Expander 和 MenuItem 但这给出了一个使用列表视图作为带有可选项目的菜单的示例，也许它会帮助解决您的问题，我假设您的扩展器控件隐藏了实际的扩展器按钮。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListView Height="16" VerticalAlignment="Top">
            <ListView.Resources>
                <Style TargetType="ListViewItem">
                    <Setter Property="Margin" Value="0,0,10,0"/>
                </Style>
            </ListView.Resources>
            <ListView.Template>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <StackPanel Background="LightGray" IsItemsHost="True" Orientation="Horizontal" />
                </ControlTemplate>
            </ListView.Template>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical"  ClipToBounds="False">
                        <TextBlock Text="{Binding Header}" />
                        <Canvas>
                            <Expander IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}">
                                <Expander.Style>
                                    <Style TargetType="{x:Type Expander}">
                                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                                        <Setter Property="Background" Value="Transparent"/>
                                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                        <Setter Property="BorderBrush" Value="Transparent"/>
                                        <Setter Property="BorderThickness" Value="1"/>
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type Expander}">
                                                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3" SnapsToDevicePixels="true">
                                                        <DockPanel>

                                                            <ContentPresenter x:Name="ExpandSite" DockPanel.Dock="Bottom" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                        </DockPanel>
                                                    </Border>
                                                    <ControlTemplate.Triggers>
                                                        <Trigger Property="IsExpanded" Value="true">
                                                            <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
                                                        </Trigger>
                                                        <Trigger Property="ExpandDirection" Value="Right">
                                                            <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right"/>
                                                        </Trigger>
                                                        <Trigger Property="ExpandDirection" Value="Up">
                                                            <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/>
                                                        </Trigger>
                                                        <Trigger Property="ExpandDirection" Value="Left">
                                                            <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left"/>
                                                        </Trigger>
                                                        <Trigger Property="IsEnabled" Value="false">
                                                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                                        </Trigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Expander.Style>
                                <ListView ItemsSource="{Binding Items}" IsSynchronizedWithCurrentItem="True" />
                            </Expander>
                        </Canvas>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>

            <ListView.Items>
                <MenuItem Header="File">
                    <MenuItem.Items>
                        <MenuItem Header="Open" IsHitTestVisible="False"/>
                        <MenuItem Header="Exit"  IsHitTestVisible="False"/>
                    </MenuItem.Items>
                </MenuItem>
                <MenuItem Header="Edit">
                    <MenuItem.Items>
                        <MenuItem Header="Cut" IsHitTestVisible="False"/>
                        <MenuItem Header="Copy" IsHitTestVisible="False"/>
                        <MenuItem Header="Paste" IsHitTestVisible="False"/>
                    </MenuItem.Items>
                </MenuItem>
            </ListView.Items>

        </ListView>
    </Grid>
</Window>