सूची दृश्य: संसाधन शब्दकोश में आइटमपैनेल टेम्पलेट को परिभाषित करें

Question

मेरे पास एक सूची दृश्य है जो लेआउट व्यू मॉड्यूल दृश्य (आइकन + कुछ विवरण) जैसा दिखता है, जो व्यूमोडेल में किसी सूची में बाध्य है।

मेरा लक्ष्य यहां जब भी हम चाहते हैं एक्सप्लोरर व्यू या क्लासिक व्यू के बीच स्विच करने में सक्षम होना है।

मैं ItemsPanelTemplate को ListView.ItemsPanel फ़ील्ड में सीधे लेआउट को सही ढंग से प्रदर्शित करने के लिए काम कर रहा हूं। अब, मैं इसे संसाधनों में परिभाषित करना चाहता हूं ताकि मैं इसे अलग-अलग विचारों में उपयोग कर सकूं, और विशेष रूप से एक नियंत्रण में, उपयोगकर्ता को एक्सप्लोरर व्यू या क्लासिक सूची दृश्य (डिफ़ॉल्ट प्रतिपादन के बीच विकल्प होना चाहिए) एक सूची)

आपने यह कैसे किया? मैं अपने ResourceDictionary में किसी भी ItemsPanelTemplate को परिभाषित नहीं कर सकता, और यदि मैं DataTemplate परिभाषित करता हूं तो यह संगत नहीं है (जबकि मैंने सोचा कि शुद्ध तर्क के बाद, ItemsPanelTemplateDataTemplate से प्राप्त होना चाहिए, लेकिन यह वास्तव में ऐसा नहीं दिखता है)। वास्तविक सूची के लिए

कोड स्निपेट:

<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> 

एक स्थिर संसाधन में ItemTemplate रखते हुए करना आसान था, लेकिन अब मैं ItemsPanelTemplate साथ कुछ नहीं कर सकते ...

कोई भी विचार ? मैं एमवीवीएम का उपयोग कर रहा हूं इसलिए यदि संभव हो तो मैं संभवतः कोड-बैक का उपयोग न करने की कोशिश कर रहा हूं

Answer 1

आप इसके लिए संपूर्ण सूची दृश्य के लिए शैली का उपयोग करेंगे।

तो आप क्या करेंगे:

<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> 

अगर आप चाहते हैं उपयोगकर्ता तो, अन्वेषक और क्लासिक दृश्य के बीच स्विच सिर्फ एक दूसरे शैली को परिभाषित करने और सूचीदृश्य की शैली स्विच कर सकेंगे। यह उदाहरण के लिए कुछ VisualStates और 'DataStateBehavior' के साथ किया जा सकता है।

वैकल्पिक रूप से आप अलग-अलग आइटमपैनल्स के लिए कुछ डेटाट्रिगर्स और सेटर्स के साथ शैली बना सकते हैं।