2016-03-08 89 views
0

因此,我已含有一个列表视图中的列表视图的膨胀机,在这里是一个模式:列表视图中列表视图+扩展器溢出外容器的

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> 

我的目标是让“扩展器”和列表中包含的内容共享容器网格中的空间(我留下了第一个列表视图边框以查看它实际上是在占用正确的空间量):

enter image description here

但是,当我展开它溢出了第一列表视图的一个膨胀器,你可以在这里看到,第二膨胀满溢,当然滚动条不工作:

enter image description here

我希望扩展在底部堆积,使他们保持可见和扩展扩展/列表拉紧的剩余空间,并让用户使用内部滚动条滚动浏览包含的列表在膨胀机中。

预期结果:

enter image description here

我已经看到了如何做到这一点在以前的文章中有定格的高度,但我的扩展列表绑定到一个集合,这样的解决方案并没有为我工作。我一直在争取好几个小时才能开始工作,想知道外部观察员是否会看到我正在犯的错误。

回答

0

其实因为扩展头的高度永远不会变化(我可以将其设置为固定高度),我可以得到grid.row“actualheight”,我需要所有其他扩展器在一个打开时折叠我做了这个在后面的代码:

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}}}"..... 

另外要解决这个问题就出来了使用此解决方案(容器滚动仍处于启用状态)的副作用,我申请一个模板到容器listview删除滚动行为:

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

...

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

我使用的MVVM模式,但我认为这是纯粹的界面交互,从而模型没有必要知道关于这一点,在代码隐藏罚款。它将适用于我的应用程序中的所有进一步使用。对于“全方位”重复使用自定义控件是一个很好的解决方案,但对于我使用IMO来说太多了。

0

您可能需要创建自定义控件并自行实施该行为。我不知道“开箱即用”解决方案。