WPF菜单样式列表框(MVVM)

时间:2013-02-28 12:09:46

标签: wpf xaml drop-down-menu datatemplate

我想创建一个跟踪所选项目的菜单,所以我使用嵌套的ListBoxes(因为Selectors are quite limited的选项。主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中选择一个项目时,Expander扩展正常,但ListBox的高度增长,所以其他所有项目看起来也都展开了。

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

换句话说,如何让其中一个垂直ListBox溢出其父容器(又称水平ListBox)?

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

任何帮助都是受欢迎的,并且会孜孜不倦地投票; - )

(注意:以防万一之前不清楚,我需要知道在水平ListBox中选择了哪个元素,以及在每个单独的垂直ListBox中选择了哪一个。这绑定到跟踪选择的相应ViewModel,并且水平和垂直ListBox都是动态填充的,因此无法在XAML中定义它们

1 个答案:

答案 0 :(得分:2)

您可以将所选样式移出数据模板,这样它就不会应用于所有项目。

<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但是这给出了一个使用listview作为菜单的例子使用可选择的项目,也许它可以帮助解决您的问题,我假设您的扩展器控件隐藏了实际的扩展器按钮。

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