2016-03-08 7 views
0

Так я расширитель, содержащий ListView в ListView, вот схема:ListView в Listview + Expander разлив из внешнего контейнера

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

Но когда я расширяю один из расширителей она выплескивается из первого ListView, как вы можете видеть здесь, то второй расширитель перелива и, конечно, полосы прокрутки не работают:

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

Кроме того, чтобы исправить побочный эффект, который вышел из использования этого решения (контейнер скроллинг еще включен) Я применил шаблон к Список контейнеров для удаления прокрутки:

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

...

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

Я использую шаблон MVVM, но я считаю это чистое взаимодействие интерфейса так модель не нужно знать об этом, это прекрасно в коде. И он будет работать для всех дальнейших применений в MY приложении. Для повторного использования «allround» пользовательский элемент управления был хорошим решением, но слишком много работы для моего использования IMO.

0

Возможно, вам понадобится создать собственный элемент управления и реализовать свое поведение самостоятельно. Я не знаю о «вне коробки».