2011-04-18 16 views
8

Listede ViewModel içindeki bir listeye bağlı bir Windows Gezgini görünümü (simge + bazı ayrıntılar) gibi görünen bir ListView var.ListView: resource Sözlük'te ItemsPanelTemplate

Amacım istediğimiz zaman kaşif görünümü veya klasik görünüm arasında geçiş yapabilmek.

Bir ItemsPanelTemplate tanımını, düzgün olarak düzeni doğru olarak görüntülemek için tam olarak iş yapıyorum, ListView.ItemsPanel alanında. Şimdi, bunu farklı görünümlerde kullanabilmem için kaynaklarda tanımlamak istiyorum ve özellikle tek bir kontrolde, kullanıcı Explorer görünümü veya klasik liste görünümü arasında seçim yapmalıdır (bir liste)

Bunu nasıl yaptınız? Herhangi bir ItemsPanelTemplate'u ResourceDictionary içinde tanımlayamıyorum ve bir DataTemplate tanımladığımda uyumlu değil (ben bunu mantıksal olarak takip ettim, ItemsPanelTemplateDataTemplate'dan miras almalı, ama aslında böyle görünmüyor). Gerçek listesi için

Kod pasajı: ...

Herhangi bir fikir

<ListView SelectionMode="Single" 
       VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom" 
       ScrollViewer.VerticalScrollBarVisibility="Auto" 
       ItemsSource="{Binding ListUserApps, 
           UpdateSourceTrigger=PropertyChanged}" 
       SelectedIndex="{Binding SelectedUserApp, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Background="White"> 

       <ListView.ItemsPanel> 
        <ItemsPanelTemplate > 
         <WrapPanel Width="{Binding (FrameworkElement.ActualWidth), 
        RelativeSource={RelativeSource 
            AncestorType=ScrollContentPresenter}}" 
        ItemWidth="{Binding (ListView.View).ItemWidth, 
        RelativeSource={RelativeSource AncestorType=ListView}}" 

        ItemHeight="{Binding (ListView.View).ItemHeight, 
        RelativeSource={RelativeSource AncestorType=ListView}}" /> 
         <!--MinWidth="{Binding ItemWidth, 
        RelativeSource={RelativeSource Self}}"--> 
        </ItemsPanelTemplate> 
       </ListView.ItemsPanel> 

       <ListView.ItemTemplate> 
        <DataTemplate> 
         <StackPanel Orientation="Horizontal" Height="Auto" Width="150"> 
          <Image Source="{Binding Path=Appli.AppType, Converter={StaticResource TypeToIconConverter}}" Margin="5" 
            Height="50" Width="50"/> 
          <StackPanel VerticalAlignment="Center" Width="90"> 
           <TextBlock Text="{Binding Path=Appli.AppName}" 
        FontSize="13" HorizontalAlignment="Left" TextWrapping="WrapWithOverflow" 
        Margin="0,0,0,1" /> 
           <TextBlock Text="{Binding Path=Appli.AppType}" FontSize="9" 
        HorizontalAlignment="Left" Margin="0,0,0,1" /> 
          </StackPanel> 
         </StackPanel> 
        </DataTemplate> 
       </ListView.ItemTemplate> 

      </ListView> 

statik kaynak ItemTemplate tutulması yapmak kolaydı ama şimdi ItemsPanelTemplate ile bir şey yapamaz ? MVVM kullanıyorum, bu yüzden, eğer mümkünse, kodun arkasındaki kodu kullanmamaya çalışıyorum.

cevap

7

bunun için tüm ListView stilini kullanırsınız.

böylece yapardın:

<Grid.Resources> 
    <Style x:Key="ListViewStyle" TargetType="ListView"> 
    <Setter Property="ItemsPanel"> 
     <Setter.Value> 
     <ItemsPanelTemplate > 
         <WrapPanel Width="{Binding (FrameworkElement.ActualWidth), 
        RelativeSource={RelativeSource 
            AncestorType=ScrollContentPresenter}}" 
        ItemWidth="{Binding (ListView.View).ItemWidth, 
        RelativeSource={RelativeSource AncestorType=ListView}}" 

        ItemHeight="{Binding (ListView.View).ItemHeight, 
        RelativeSource={RelativeSource AncestorType=ListView}}" /> 
         <!--MinWidth="{Binding ItemWidth, 
        RelativeSource={RelativeSource Self}}"--> 
        </ItemsPanelTemplate> 
     </Setter.Value> 
    </Setter> 
    </Style> 
</Grid.Resources> 


    <ListView SelectionMode="Single" 
     VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom" 
     ScrollViewer.VerticalScrollBarVisibility="Auto" 
     ItemsSource="{Binding ListUserApps, 
         UpdateSourceTrigger=PropertyChanged}" 
     SelectedIndex="{Binding SelectedUserApp, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Background="White" Style="{StaticResource ListViewStyle}">      
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal" Height="Auto" Width="150"> 
        <Image Source="{Binding Path=Appli.AppType, Converter={StaticResource TypeToIconConverter}}" Margin="5" 
          Height="50" Width="50"/> 
        <StackPanel VerticalAlignment="Center" Width="90"> 
         <TextBlock Text="{Binding Path=Appli.AppName}" 
      FontSize="13" HorizontalAlignment="Left" TextWrapping="WrapWithOverflow" 
      Margin="0,0,0,1" /> 
         <TextBlock Text="{Binding Path=Appli.AppType}" FontSize="9" 
      HorizontalAlignment="Left" Margin="0,0,0,1" /> 
        </StackPanel> 
       </StackPanel> 
      </DataTemplate> 
     </ListView.ItemTemplate>    
    </ListView> 

Eğer kullanıcı daha sonra, kaşif ve klasik görünüm arasında geçiş sadece bir saniye Stil tanımlamak ve liste görünümü stilini geçiş yapabilmek istiyorum. Bu, örneğin bazı VisualStates ve bir 'DataStateBehavior' ile yapılabilir.

Alternatif olarak, tek tek ItemsPanels için bazı DataTriggers ve Setter'lerle bir stil oluşturabilirsiniz.

+0

Harika, teşekkürler, tüm ListView'i şekillendirmeyi düşünmediğime inanamıyorum. Sanırım DataStateBehavior'a bir göz atacağım. Tekrar teşekkürler – Damascus

+0

Başka bir ilgili soru: Önceden tanımlanmış bir stilde 'ListView.GroupStyle' nasıl tanımlanacağını anlayamıyorum. Salt okunur bir özellik olmalı ve nasıl tanımlanacağımı anlamıyorum. Herhangi bir fikir? – Damascus