2017-01-23 4 views
1

ユニバーサルのWindowsプラットフォームで子コントロールを折りたたむ方法、C#ののListViewItem UWP

にはどうすればいいの背後にあるコードから項目MainListViewのリストアイテムの子リストビューを展開する/折りたたむことができますか?私は動作するものは見つけられませんでした。 私はこれをSelectionChangedイベントで行いたいと思います。

XAML

 <ListView x:Name="DestListView" SelectionMode="Single" Margin="0,60,0,0" SelectionChanged="listview_SelectionChanged" > 
     <ListView.ItemContainerStyle > 
      <Style TargetType="ListViewItem"> 
       <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
       <Setter Property="BorderThickness" Value="0,.5,0,0" /> 
       <Setter Property="BorderBrush" Value="Gainsboro" /> 
      </Style> 
     </ListView.ItemContainerStyle> 
     <ListView.ItemTemplate > 
      <DataTemplate> 
       <StackPanel> 
        <Grid> 
         <Grid HorizontalAlignment="Stretch"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="40"/> 
           <ColumnDefinition Width="100"/> 
           <ColumnDefinition Width="50"/> 
           <ColumnDefinition Width="*"/> 
           <ColumnDefinition Width="50"/> 
          </Grid.ColumnDefinitions> 

          <CheckBox Grid.Column="0" MinWidth="20" /> 
          <TextBlock Grid.Column="1" Text="{Binding destination}" FontSize="20" /> 
          <TextBlock Grid.Column="2" Text="{Binding total_quantity}" FontSize="20" Margin="10,0,0,0"/> 
          <TextBlock Grid.Column="3" Text="{Binding package_type}" FontSize="20" HorizontalAlignment="Center" Margin="10,0,0,0"/> 
          <TextBlock Grid.Column="4" Text="{Binding total_weight}" FontSize="20" Margin="10,0,0,0"/> 
         </Grid> 
        </Grid> 

        **<!--Collpase/Expand-->** 

        <ListView x:Name="DetailListView" ItemsSource="{Binding destination_data}" SelectionMode="Multiple" Margin="20,0,0,0" Visibility="Collapsed" > 
         <ListView.ItemTemplate > 
          <DataTemplate > 
           <StackPanel Orientation="Vertical"> 
            <TextBlock Text="{Binding visual_number}" FontSize="14" Foreground="White" HorizontalAlignment="Stretch" /> 
            </StackPanel> 
          </DataTemplate> 
         </ListView.ItemTemplate> 
        </ListView> 

       </StackPanel> 

      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 

分離コードここ

 private void listview_SelectionChanged(object sender, SelectionChangedEventArgs e) 
    { 
     //GET THE ITEM 
     var selectItem = DestListView.Items[DestListView.SelectedIndex]; 

     //GET THE CHILD SOMEHOW 
     //ListView childListView = (ListView)...not sure what to do here 

     //if (childListView != null) 
     //{ 
     // if (childListView.Visibility == Visibility.Collapsed) 
     // { 
     //  //childListView.Visibility = Visibility.Collapsed; 
     // } 
     // else 
     // { 
     //  //childListView.Visibility = new Visibility; 
     // } 
     //} 

    } 
+0

です。 – AVK

答えて

2

は、私はそれを行うだろうかです。

私は、選択したときに表示する2つのDataTemplate(展開)、展開しないときに別の2つのDataTemplateを作成します。

以下は私のViewModelです。以下は

public class MyViewModel 
{ 
    public MyViewModel() 
    { 
     myItems = new ObservableCollection<MyItems>(); 
     for(int i=1;i<=10;i++) 
     { 
      MyItems item = new MyItems(); 
      item.Name = "Main Item " + i.ToString(); 
      ObservableCollection<MySubItems> subItems = new ObservableCollection<MySubItems>(); 
      for (int j=1;j<=5;j++) 
      { 
       subItems.Add(new MySubItems() { Title = "Sub Item " + j.ToString() }); 
      } 
      item.Data = subItems; 
      myItems.Add(item); 
     } 
    } 

    public ObservableCollection<MyItems> myItems { get; set; } 
} 

public class MyItems 
{ 
    public string Name { get; set; } 
    public ObservableCollection<MySubItems> Data { get; set; } 
} 

public class MySubItems 
{ 
    public string Title { get; set; } 
} 

<Page 
    x:Class="App2.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:App2" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 
    <Page.DataContext> 
     <local:MyViewModel/> 
    </Page.DataContext> 

    <Page.Resources> 
     <DataTemplate x:Key="NoSelectDataTemplate"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto" /> 
        <RowDefinition Height="Auto" /> 
       </Grid.RowDefinitions> 
       <TextBlock Text="{Binding Name}" /> 
      </Grid> 
     </DataTemplate> 
     <DataTemplate x:Key="SelectDataTemplate"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto" /> 
        <RowDefinition Height="Auto" /> 
       </Grid.RowDefinitions> 
       <TextBlock Text="{Binding Name}" /> 
       <ListView ItemsSource="{Binding Data}" Grid.Row="1"> 
        <ListView.ItemTemplate> 
         <DataTemplate> 
          <TextBlock Text="{Binding Title}" /> 
         </DataTemplate> 
        </ListView.ItemTemplate> 
       </ListView> 
      </Grid> 
     </DataTemplate> 
    </Page.Resources> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <ListView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding myItems}" SelectionChanged="ListView_SelectionChanged" ItemTemplate="{StaticResource NoSelectDataTemplate}"> 
      <ListView.ItemContainerStyle > 
       <Style TargetType="ListViewItem"> 
        <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
        <Setter Property="BorderThickness" Value="0,.5,0,0" /> 
        <Setter Property="BorderBrush" Value="Gainsboro" /> 
       </Style> 
      </ListView.ItemContainerStyle> 
     </ListView> 
    </Grid> 
</Page> 

を要求し、以下の私のSelectionChangedイベントがどのように見えるかであるように私MainPage.xamlをです。ここで

private int PreviousIndex; 
private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e) 
{ 
    ListView lv = sender as ListView; 

    if (PreviousIndex >=0) 
    { 
     ListViewItem prevItem = (lv.ContainerFromIndex(PreviousIndex)) as ListViewItem; 
     prevItem.ContentTemplate = Resources["NoSelectDataTemplate"] as DataTemplate; 
    } 

    ListViewItem item = (lv.ContainerFromIndex(lv.SelectedIndex)) as ListViewItem; 
    item.ContentTemplate = Resources["SelectDataTemplate"] as DataTemplate; 

    PreviousIndex = lv.SelectedIndex; 
} 

は、タグがUWPないWPFでなければなりません出力

enter image description here

+0

これはすばらしい例です。 1つの質問、どのように "MyViewModel"クラスを実装するのですか?私はwinformsとwebformsから来るUWPには新しいです。 – TroyS

+0

@BangBangここでサンプルとして 'ViewModel'を使用しました。 ViewModelのしくみを知りたい場合は、MVVMを使い始める必要があります。 [This](https://msdn.microsoft.com/en-in/library/hh848246.aspx)を起動します。 – AVK

+0

ありがとう、私はMVVMを研究しています。その間、サンプルコードでは、残りのxamlを表示してリストビューとViewModelをバインドすることは可能でしょうか? – TroyS

関連する問題