12

Używam listbox i wrappanel do wyświetlania danych.Jak zawinąć ItemsPanel w LongListSelector?

Na przykład:

<ListBox ItemTemplate="{StaticResource ItemTemplateListBoxAnimation}"> 
     <ListBox.ItemsPanel> 
      <ItemsPanelTemplate> 
       <toolkit:WrapPanel ItemHeight="150" ItemWidth="150"> 
       </toolkit:WrapPanel> 
      </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
    </ListBox> 

    <DataTemplate x:Key="ItemTemplateListBoxAnimation"> 
     <Grid Width="130" Height="130"> 
      <Image Source="{Binding Image}"/> 
     </Grid> 
    </DataTemplate> 

To wyglądać następująco:

enter image description here

Teraz muszę korzystać LongListSelector i grupowanie wynik:

<toolkit:LongListSelector ItemTemplate="{StaticResource ItemTemplateListBoxAnimation}"> 
     <toolkit:LongListSelector.GroupItemsPanel> 
      <ItemsPanelTemplate> 
       <toolkit:WrapPanel/> 
      </ItemsPanelTemplate> 
     </toolkit:LongListSelector.GroupItemsPanel> 
    </toolkit:LongListSelector> 

Ale to wyglądać tak:

enter image description here

Muszę dostać:

enter image description here

Twoje założenia? Dziękuję

Odpowiedz

5

Problem jest, że nieruchomość GroupItemsPanel nie zmienia ItemsPanel z listy głównej, ale raczej ItemsPanel nagłówków grupowych, jak można zobaczyć tutaj (obraz z http://www.windowsphonegeek.com/articles/wp7-longlistselector-in-depth--part2-data-binding-scenarios):

group headers wrapped

Niestety, zestaw narzędzi WP nie wydaje się, że chcesz wystawić ItemsPanel, więc będziesz musiał zmodyfikować źródło zestawu narzędzi, aby uzyskać pożądane zachowanie.

  1. Pobierz źródło stąd: https://phone.codeplex.com/SourceControl/changeset/view/80797

  2. rozpakować, otworzyć rozwiązanie Microsoft.Phone.Controls.Toolkit.WP7.sln w Visual Studio.

  3. ramach projektu Microsoft.Phone.Controls.Toolkit.WP7, otwarte themes/Generic.xaml

  4. Przewiń do Style że dotyczy LongListSelector (TargetType = "Kontrola: LongListSelector")

  5. Zmiana TemplatedListBox.ItemsPanel do WrapPanel

       <primitives:TemplatedListBox.ItemsPanel> 
            <ItemsPanelTemplate> 
             <controls:WrapPanel/> 
            </ItemsPanelTemplate> 
           </primitives:TemplatedListBox.ItemsPanel> 
    
  6. odbudować i odwoływać się do nowej biblioteki dll, swoje przedmioty sh ould owinąć odpowiednio!

+0

Doskonała odpowiedź! Chociaż dla mnie trochę hacky, więc na razie będę się trzymał ListBox. – MEMark

3

Można zastąpić je przy użyciu niestandardowego stylu

<toolkit:LongListSelector 
         Background="{StaticResource FCBackground}" 
         HorizontalContentAlignment="Stretch" 
         ItemsSource="{Binding NowShowingEvents}" 
         ItemTemplate="{StaticResource EventsListMediumItemTemplate}" 
         IsFlatList="True" 
         Style="{StaticResource LongListSelectorStyleCustom}" 
           > 

        </toolkit:LongListSelector> 


    <Style x:Key="LongListSelectorStyleCustom" TargetType="toolkit:LongListSelector"> 
     <Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="toolkit:LongListSelector"> 
        <toolkitPrimitives:TemplatedListBox x:Name="TemplatedListBox" Background="{TemplateBinding Background}"> 
         <toolkitPrimitives:TemplatedListBox.ItemContainerStyle> 
          <Style TargetType="ListBoxItem"> 
           <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
          </Style> 

         </toolkitPrimitives:TemplatedListBox.ItemContainerStyle> 
         <toolkitPrimitives:TemplatedListBox.ItemsPanel> 
          <ItemsPanelTemplate> 
           <toolkit:WrapPanel Margin="24,0,12,24"/> 
          </ItemsPanelTemplate> 
         </toolkitPrimitives:TemplatedListBox.ItemsPanel> 
        </toolkitPrimitives:TemplatedListBox> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>