有人可以解釋網格項目如何在Windows 8中工作

我正在查看VS2012附帶的Windows 8網格項目並試圖瞭解它。我不太瞭解XAML，所以我很容易就會忽略綁定代碼正在發生的地方等等。有人可以解釋網格項目如何在Windows 8中工作

<Page.Resources> 

    <!-- 
     Collection of grouped items displayed by this page, bound to a subset 
     of the complete item list because items in groups cannot be virtualized 
    --> 
    <CollectionViewSource 
     x:Name="groupedItemsViewSource" 
     Source="{Binding Groups}" 
     IsSourceGrouped="true" 
     ItemsPath="TopItems" 
     d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/> 
</Page.Resources> 

<!-- 
    This grid acts as a root panel for the page that defines two rows: 
    * Row 0 contains the back button and page title 
    * Row 1 contains the rest of the page layout 
--> 
<Grid Style="{StaticResource LayoutRootStyle}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="140"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <!-- Horizontal scrolling grid used in most view states --> 
    <GridView 
     x:Name="itemGridView" 
     AutomationProperties.AutomationId="ItemGridView" 
     AutomationProperties.Name="Grouped Items" 
     Grid.RowSpan="2" 
     Padding="116,137,40,46" 
     ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" 
     ItemTemplate="{StaticResource Standard250x250ItemTemplate}" 
     SelectionMode="None" 
     IsSwipeEnabled="false" 
     IsItemClickEnabled="True" 
     ItemClick="ItemView_ItemClick"> 

     <GridView.ItemsPanel> 
      <ItemsPanelTemplate>       
       <VirtualizingStackPanel Orientation="Horizontal"/> 
      </ItemsPanelTemplate> 
     </GridView.ItemsPanel> 
     <GridView.GroupStyle> 
      <GroupStyle> 
       <GroupStyle.HeaderTemplate> 
        <DataTemplate> 
         <Grid Margin="1,0,0,6"> 
          <Button 
           AutomationProperties.Name="Group Title" 
           Click="Header_Click" 
           Style="{StaticResource TextPrimaryButtonStyle}" > 
           <StackPanel Orientation="Horizontal"> 
            <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" /> 
            <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/> 
           </StackPanel> 
          </Button> 
         </Grid> 
        </DataTemplate> 
       </GroupStyle.HeaderTemplate> 
       <GroupStyle.Panel> 
        <ItemsPanelTemplate> 
         <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/> 
        </ItemsPanelTemplate> 
       </GroupStyle.Panel> 
      </GroupStyle> 
     </GridView.GroupStyle> 
    </GridView> 

    <!-- Vertical scrolling list only used when snapped --> 
    <ListView 
     x:Name="itemListView" 
     AutomationProperties.AutomationId="ItemListView" 
     AutomationProperties.Name="Grouped Items" 
     Grid.Row="1" 
     Visibility="Collapsed" 
     Margin="0,-10,0,0" 
     Padding="10,0,0,60" 
     ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" 
     ItemTemplate="{StaticResource Standard80ItemTemplate}" 
     SelectionMode="None" 
     IsSwipeEnabled="false" 
     IsItemClickEnabled="True" 
     ItemClick="ItemView_ItemClick"> 

     <ListView.GroupStyle> 
      <GroupStyle> 
       <GroupStyle.HeaderTemplate> 
        <DataTemplate> 
         <Grid Margin="7,7,0,0"> 
          <Button 
           AutomationProperties.Name="Group Title" 
           Click="Header_Click" 
           Style="{StaticResource TextPrimaryButtonStyle}"> 
           <StackPanel Orientation="Horizontal"> 
            <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" /> 
            <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/> 
           </StackPanel> 
          </Button> 
         </Grid> 
        </DataTemplate> 
       </GroupStyle.HeaderTemplate> 
      </GroupStyle> 
     </ListView.GroupStyle> 
    </ListView> 

    <!-- Back button and page title --> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/> 
     <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/> 
    </Grid> 

    <VisualStateManager.VisualStateGroups> 

     <!-- Visual states reflect the application's view state --> 
     <VisualStateGroup x:Name="ApplicationViewStates"> 
      <VisualState x:Name="FullScreenLandscape"/> 
      <VisualState x:Name="Filled"/> 

      <!-- The entire page respects the narrower 100-pixel margin convention for portrait --> 
      <VisualState x:Name="FullScreenPortrait"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/> 
        </ObjectAnimationUsingKeyFrames> 

        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="96,137,10,56"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 

      <!-- 
       The back button and title have different styles when snapped, and the list representation is substituted 
       for the grid displayed in all other view states 
      --> 
      <VisualState x:Name="Snapped"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/> 
        </ObjectAnimationUsingKeyFrames> 

        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
</Grid>

我不明白，第一個方面是這個

<CollectionViewSource 
      x:Name="groupedItemsViewSource" 
      Source="{Binding Groups}" 
      IsSourceGrouped="true" 
      ItemsPath="TopItems" 
      d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>

我不明白這哪裏是Source="{Binding Groups}"實際上來自哪裏（我甚至不能確定如何找到代碼F12不起作用）。

與d:Source相同也不能確定100％會發生什麼。

接下來的部分是在gridview中，並再次綁定。

<GridView 
      x:Name="itemGridView" 
      AutomationProperties.AutomationId="ItemGridView" 
      AutomationProperties.Name="Grouped Items" 
      Grid.RowSpan="2" 
      Padding="116,137,40,46" 
      ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" 
      ItemTemplate="{StaticResource Standard250x250ItemTemplate}" 
      SelectionMode="None" 
      IsSwipeEnabled="false" 
      IsItemClickEnabled="True" 
      ItemClick="ItemView_ItemClick">

我看到資料來源是使用groupItemsViewSource但不知道它是如何將數據解析成網格的外觀，但不知道如何。

我沒有得到的下一個部分是如何找出使用哪種佈局。我看到這個評論

<!-- Horizontal scrolling grid used in most view states --> 
<!-- Vertical scrolling list only used when snapped -->

我相信，如果我看起來更深入它，我會找到更多的我不明白，但也許當我明白這個東西，我會明白更多（尤其是當我明白這個綁定東東）

來源

2013-01-15 chobo2

我沒有得到這裏Source {「Binding Groups}」實際上來自（我甚至不知道如何找到代碼F12不起作用）。在頁面的頂部

注：

DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"

它設置爲頁面上的頁面DefaultViewModel屬性結合上下文。在後面的頁面的代碼，你會看到

this.DefaultViewModel["Groups"] = sampleDataGroups;

其中sampleDataGroups是組列表（IEnumerable的）（類型SampleDataGroup）從一個方法調用返回。現在你也有，

<CollectionViewSource 
     x:Name="groupedItemsViewSource" 
     Source="{Binding Groups}" 
     IsSourceGrouped="true" 
     ItemsPath="TopItems" 
     d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>

這裏「組」是指密鑰索引DefaultViewModel，所以它要使用DefaultViewModel的子集。此外，CollectionViewSource中的每個項目本身都包含一個集合，並且這些集合將在ItemsPath指定的任何屬性（即TopItems）上顯示給綁定引擎。

在GridView

現在結合：

<GridView 
     x:Name="itemGridView" 
     AutomationProperties.AutomationId="ItemGridView" 
     AutomationProperties.Name="Grouped Items" 
     Grid.RowSpan="2" 
     Padding="116,137,40,46" 
     ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" 
     ItemTemplate="{StaticResource Standard250x250ItemTemplate}"

您注意的是，數據是從CollectionViewSource的特定實例來命名groupedItemsViewSource（在這種情況下相當於this.DefaultViewModel["Groups"]）。如果你看一下了一下後頭部模板，你會看到：

<StackPanel Orientation="Horizontal"> 
    <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" /> 
    ...

的Title綁定是指ItemsSource集合中元素的屬性，所以this.DefaultViewModel["Groups"][i].Title

在GridView綁定共治ItemTemplate="{StaticResource Standard250x250ItemTemplate}"如何顯示內部收集項目。您必須打開該樣式（在Common/StandardStyles.xaml中）才能看到它引用了SampleDataItem的屬性，基本上導致了this.DefaultViewModel["Groups"][i].TopItems[j]。

d:前綴是指設計時間數據（以及包含管理它的類的名稱空間）;這就是允許您在設計器中看到數據而無需運行應用程序的原因。所以在設計時，您所看到的數據實際上來自SampleDataSource.AllGroups。

至於滾動的評論，進入VisualStateManager，每個狀態實質上是一個不同的UI上的需要;狀態通過一些你可以在LayoutAwarePage.cs裏面找到的代碼進行轉換，尋找GotoState。

來源

2013-01-15 23:56:24

我不明白這哪裏來源=「{結合組}」實際上是從

綁定未來目標元素的DataContext - 找到它，你通常最多掃描XAML找到DataContext的位置最後一集。因此，在這種情況下，它必須以某種方式設置Page元素。（DataContext也可以從代碼隱藏中設置，儘管如果VS樣例項目中出現這種情況我會感到驚訝。）

與d相同：源不確定100％發生了什麼那裏也是。

d前綴指的是設計時數據。檢查SampleDataSource，這是您可以在其中找到AllGroups的設計時實例的位置。

不知道它是如何將數據解析成網格

基於其行數據類型的屬性網格自動生成其列。

來源

2013-01-15 23:55:53 McGarnagle

有人可以解釋網格項目如何在Windows 8中工作

回答

相關問題