2012-08-03 8 views
7

में विभिन्न आइटम आकार मैंने एक आइटम टेम्पलेट और हेडर टेम्पलेट के साथ समूहबद्ध ग्रिड व्यू बनाया। यह अच्छी तरह से काम करता है लेकिन फिर मैं अपनी सूची का पहला लेख एक अलग टेम्पलेट (बड़ा होना) चाहता हूं। उदाहरण के लिए फ्रेंच एप्लिकेशन "LeMonde" की तरह। मुझे नहीं पता कि मैं इसे प्राप्त करने के लिए टेम्पलेट को कैसे परिभाषित कर सकता हूं।समूहबद्ध ग्रिड व्यू

यहाँ मेरे वर्तमान XAML कोड

<Page.Resources> 
<CollectionViewSource x:Name="cvs1" IsSourceGrouped="True" /> 
</Page.Resources> 

<Grid Background="White"> 

    <GridView x:Name="PicturesGridView" SelectionMode="None" 
ItemsSource="{Binding Source={StaticResource cvs1}}"IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"> 
     <GridView.ItemTemplate> 
      <DataTemplate> 
       <StackPanel x:Name="RectanglesStackPanel" Margin="8" Orientation="Vertical" Width="242"> 

        <Image Source="{Binding imageUrl}" Height="180" Width="225" Stretch="UniformToFill" /> 

        <Border Background="Gray" Opacity="1" Width="225" Height="115"> 
         <TextBlock Text="{Binding title}" 
      Foreground="White" TextWrapping="Wrap" Width="215" FontSize="18" /> 
        </Border> 
       </StackPanel> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
     <GridView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </GridView.ItemsPanel> 
     <GridView.GroupStyle> 
      <GroupStyle> 
       <GroupStyle.HeaderTemplate> 
        <DataTemplate> 
         <Button Click="Button_Click_1" Content="{Binding Key}" Foreground="Black" Background="White" FontSize="30" Margin="0,0,0,-10" ></Button>  
        </DataTemplate> 
       </GroupStyle.HeaderTemplate> 
       <GroupStyle.Panel> 
        <ItemsPanelTemplate> 
         <VariableSizedWrapGrid Orientation="Vertical" /> 
        </ItemsPanelTemplate> 
       </GroupStyle.Panel> 
      </GroupStyle> 
     </GridView.GroupStyle> 
    </GridView> 


</Grid> 

है मैं सिर्फ इस तरह सी # में आइटम की सूची को बाँध:

this.cvs1.Source = ListOfArticle; 

अग्रिम :)


धन्यवाद धन्यवाद आप इवान इससे मुझे बहुत सहायता प्राप्त हुई। हालांकि उदाहरण में प्रदान किया गया कोड विंडोज 8 के लिए अद्यतित नहीं लगता है। क्या आपके पास कोई विचार है कि हम किसी पृष्ठ के संसाधनों में परिभाषित टेम्पलेट तक कैसे पहुंच सकते हैं। FindRessources विधि अब मौजूद नहीं है। मैं बजाय इस कोड के साथ करने की कोशिश की, लेकिन यह सफल नहीं था:

public class AuctionItemDataTemplateSelector : DataTemplateSelector 
{ 
    protected override DataTemplate SelectTemplateCore(object item, 
                DependencyObject container) 
    { 
     FrameworkElement element = container as FrameworkElement; 

     if (element != null && item != null && item is Article) 
     { 
      Article auctionItem = item as Article; 

      DataTemplate mySmallTemplate = element.FindName("SmallTemplate") as DataTemplate; 

      switch (auctionItem.isFirstItem) 
      { 
       case true: 
        return 
        element.FindName("BigTemplate") as DataTemplate; 

       case false: 
        return 
        element.FindName("SmallTemplate") as DataTemplate; 
      } 
     } 

     return null; 
    } 
} 

'

+0

आपको अपने शीर्षक में "विंडोज 8" जैसी चीज़ों को नहीं रखना चाहिए। यही टैग है। – mydogisbox

+0

हां: http://blog.jerrynixon.com/2012/08/windows-8-beauty-tip-using.html –

उत्तर

12

मैं गुण के रूप में सभी आवश्यक टेम्पलेट्स के साथ एक कस्टम DataTemplateSelector बनाने के रास्ते का पालन किया।

namespace Helper 
{ 
    public class CustomSampleDataTemplateSelector : DataTemplateSelector 
    { 
     public DataTemplate FirstDataTemplate { get; set; } 

     public DataTemplate SecondDataTemplate { get; set; } 

     protected override DataTemplate SelectTemplateCore(object item, 
        DependencyObject container) 
     { 
      if (item is FirstItemType) 
       return FirstDataTemplate ; 
      if (item is SecondItemType) 
       return SecondDataTemplate; 
      else 
       return FirstDataTemplate ; 
     } 
    } 
} 

अब आप इस तरह XAML में सीधे इसका इस्तेमाल कर सकते हैं:

प्रचार संसाधन:

<UserControl.Resources> 
    <DataTemplate x:Key="myTemplate1"> 
     <Border Background="White"> 
      <TextBlock Text="{Binding Name}" 
         FontSize="40" 
         Foreground="Black" 
         HorizontalAlignment="Center" 
         VerticalAlignment="Center" /> 
     </Border> 
    </DataTemplate> 
    <DataTemplate x:Key="myTemplate2"> 
     <Border Background="Orange"> 
      <Grid> 
       <Image Source="{Binding Image}"></Image> 
       <TextBlock Text="{Binding ShopName}" 
          FontSize="64" 
          Foreground="LightBlue" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center" /> 
      </Grid> 
     </Border> 
    </DataTemplate> 
    <Common:CustomSampleDataTemplateSelector x:Key="mySelector" 
            FirstDataTemplate="{StaticResource myTemplate1}" 
            SecondDataTemplate="{StaticResource myTemplate2}"> 
    </Common:CustomSampleDataTemplateSelector > 
</UserControl.Resources> 

है यही कारण है कि सभी

0

बजाय GridView में सभी वस्तुओं के लिए एक एकल ItemTemplate का उपयोग कर आप सभी के लिए 1 तत्व के लिए अलग ItemTemplate को परिभाषित करने और उसके बाद करने के लिए है दूसरे।

ऐसा करने के लिए आपको दूरस्थ आइटम टेम्पलेट को परिभाषित करना है और यह निर्धारित करने के लिए कि कौन सी शैली का उपयोग करना है, आइटम टेम्पलेट चयनकर्ता का उपयोग करें।

यहां आप अधिक जानकारी पा सकते हैं: http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemtemplateselector.aspx

4

धन्यवाद यह

<GridView x:Name="PicturesGridView" ItemTemplateSelector="{StaticResource mySelector}"> 

का प्रयोग करें। यह वास्तव में अच्छी तरह से काम करता है क्योंकि यह पहले आइटम को दूसरे की तुलना में एक अलग टेम्पलेट बनाता है। हालांकि यह नहीं था कि मैं चाहता था कि यह मेरी गलती है, मैं स्पष्ट नहीं था। क्योंकि आपकी तकनीक के साथ ग्रिड व्यू में आइटम का आकार हमेशा एक ही आकार में होता है। मान लें कि मैं 400 की चौड़ाई के साथ ग्रिड रखने के लिए myTemplate1 चुनता हूं और myTemplate2 200 की चौड़ाई वाला ग्रिड है। फिर यदि मेरा पहला तत्व myTemplate1 का पालन करता है, तो ग्रिड व्यू के सभी तत्वों का आकार 400 होगा, भले ही छवि अंदर ही है 200

मैं इस लेख में की तरह एक परिणाम प्राप्त करना चाहता था: http://blogs.u2u.be/diederik/post/2012/03/07/Databinding-to-the-VariableSizedWrapGrid-in-Windows-8-Metro.aspx

तो मैंने पाया मैं वास्तव में क्या जरूरत है यह VariableSizedWrapGrid है और एक gridView.I का एक संस्करण के लिए यह बहुत अच्छा लेख बाद reimplement रहे हैं: http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/966aa897-1413-46f0-bef7-663de36f9423

हालांकि मैं सही रूप में अपने जवाब में चिह्नित कर देंगे, क्योंकि यह मेरी प्रारंभिक सवाल का जवाब: यह एक समूह ग्रिड दृश्य में विभिन्न मद आकार का चयन करने के लिए अनुमति देता है।

आपके समय के लिए बहुत बहुत धन्यवाद, यह मुझे बहुत मदद करता है