Listview + Expander中的Listview溢出外部容器

时间:2016-03-08 13:24:14

标签: wpf listview expander

所以我在listview中有一个包含listview的扩展器,这里是一个模式:

enter image description here

的Xaml:

<UserControl x:Class="Sesam.Resources.CommonControls.FilterPanelView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:Sesam.Resources.CommonControls"
         xmlns:filters="clr-namespace:Sesam.Filters"
         mc:Ignorable="d" 
         d:DataContext="{d:DesignInstance local:FilterPanelViewModel}">
<UserControl.Resources>
    <ControlTemplate x:Key="NoScroll">
        <ItemsPresenter></ItemsPresenter>
    </ControlTemplate>


</UserControl.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition x:Name="ListViewGridRowDefinition" Height="*"/>
    </Grid.RowDefinitions>
    <Border Grid.Row="0" Background="Transparent" BorderThickness="0,0,0,1" BorderBrush="{StaticResource myLightGrey}">
        <DockPanel VerticalAlignment="Center">
            <Label Content="Filtres" DockPanel.Dock="Left" Foreground="{StaticResource myDarkBlue}" FontSize="14" FontWeight="SemiBold"/>
            <!-- future reset button -->
        </DockPanel>
    </Border>
    <Grid Grid.Row="1">
        <ListView BorderThickness="1" ItemsSource="{Binding FilterCollection}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"  >
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                    <Setter Property="OverridesDefaultStyle" Value="True"/>
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <Grid Background="Transparent">
                                    <Expander BorderThickness="2"  Style="{StaticResource SesamExpanderFiltres}" Header="{Binding Title}" Foreground="White">
                                        <ListView   BorderThickness="0" ItemsSource="{Binding Filters}" SelectedItem="{Binding SelectedFilter}"  SelectedIndex="{Binding SelectedIndex}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible" SelectionChanged="Selector_OnSelectionChanged" VirtualizingPanel.ScrollUnit="Pixel" >
                                            <ListView.ItemContainerStyle>
                                                <Style TargetType="ListViewItem">
                                                    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                                                    <Setter Property="OverridesDefaultStyle" Value="True"/>
                                                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                                                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="{x:Type ListViewItem}">
                                                                <Border Height="Auto" Name="ContentBorder"  BorderBrush="{StaticResource myLightGrey}" BorderThickness="0,0,0,1" Visibility="{Binding IsVisible, Converter={StaticResource BoolToCollapsed}}" >
                                                                    <Grid>
                                                                        <Grid.ColumnDefinitions>
                                                                            <ColumnDefinition Width="15" />
                                                                            <ColumnDefinition Width="*"   />
                                                                        </Grid.ColumnDefinitions>
                                                                        <Grid Name="selectCol" Grid.Column="0" Background="White" />
                                                                        <Label Grid.Column="1" Foreground="{StaticResource myDarkBlue}" Content="{Binding Name}" />
                                                                    </Grid>
                                                                </Border>
                                                                <ControlTemplate.Triggers>
                                                                    <Trigger Property="IsMouseOver" Value="True">
                                                                        <Setter Property="Background" TargetName="selectCol"  Value="{StaticResource myDarkBlue}" />
                                                                        <Setter Property="BorderBrush" TargetName="ContentBorder" Value="{StaticResource myDarkBlue}" />
                                                                    </Trigger>
                                                                </ControlTemplate.Triggers>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                </Style>
                                            </ListView.ItemContainerStyle>
                                        </ListView>
                                    </Expander>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>
    </Grid>
</Grid>

我的目标是让“扩展器”和列表包含在其中,以共享容器网格中的空间(我离开了第一个listview边框,看到它实际上占用了正确的空间量): / p>

enter image description here

但是,当我展开其中一个扩展器时,它会溢出第一个列表视图,如此处所示,第二个扩展器溢出,当然滚动条不起作用:

enter image description here

我希望扩展器在底部堆叠,以便它们保持可见,并且扩展的扩展器/列表占用剩余空间,并让用户使用内部滚动条滚动扩展器中包含的列表。

预期结果:

enter image description here

我已经看过如何在固定网格高度的上一篇文章中做到这一点,但我的扩展程序列表绑定到一个集合,因此该解决方案对我不起作用。我一直在争取工作几个小时,想知道外面的观察者是否会看到我正在犯的错误。

2 个答案:

答案 0 :(得分:0)

您可能需要创建自定义控件并自行实现该行为。我不知道&#34;开箱即用&#34;解。

答案 1 :(得分:0)

实际上,因为扩展器标题高度永远不会变化(我可以将其设置为固定高度),我可以得到grid.row&#34; actualheight&#34;并且我需要让所有其他扩展器在打开时折叠我在后面的代码中执行此操作:

    private void Expander_Expanded(object sender, RoutedEventArgs e)
    {

        var exp = sender as Expander;
        if (exp != null)
        {
            exp.MaxHeight = ListViewGridRowDefinition.ActualHeight -  (ContainerListView.Items.Count*31) + 28;
        }
    }


    private void Expander_Collapsed(object sender, RoutedEventArgs e)
    {
        var exp = sender as Expander;
        if (exp != null)
        {
            exp.MaxHeight = 31;
        }
    }

这是在xaml:

<Expander Height="Auto" IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListViewItem}}}".....

另外,为了解决使用此解决方案产生的副作用(容器滚动仍然启用),我将模板应用到容器列表视图中以删除滚动行为:

    <UserControl.Resources>
    <ControlTemplate x:Key="NoScroll">
        <ItemsPresenter></ItemsPresenter>
    </ControlTemplate>
</UserControl.Resources>

...

    <ListView x:Name="ContainerListView" Template="{StaticResource NoScroll}"

我正在使用mvvm模式,但我认为这是纯接口交互,所以模型不需要知道这一点,它在代码隐藏中很好。它将适用于我的应用程序中的所有进一步用途。对于&#34; allround&#34;重用自定义控件是一个很好的解决方案,但是我使用IMO的工作太多了。