2016-03-08 33 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

您可能需要創建自定義控件並自行實施該行爲。我不知道「開箱即用」解決方案。