如何爲Windows 8的Bing應用程序做xaml模板？

Question

標準GridApp模板如下：

可變大小的分組GridView的模板如下：

如何使一個模板爲您的應用程序，所以它看起來是這樣的：

例如，這樣的設計在所有應用中兵爲Windows 8：

代碼爲可變大小的分組GridView控件模板：

<UserControl.Resources> 

    <!-- Collection of grouped items displayed by this page --> 
    <CollectionViewSource 
     x:Name="groupedItemsViewSource" 
     Source="{Binding Groups}" 
     IsSourceGrouped="true" 
     ItemsPath="Items" 
     d:Source="{Binding ItemGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/> 

    <DataTemplate x:Key="CustomTileItem"> 
     <Grid > 
      <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"> 
       <Image Source="{Binding Image}" Stretch="UniformToFill"/> 
      </Border> 
      <StackPanel VerticalAlignment="Bottom" > 
       <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/> 
       <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/> 
      </StackPanel> 
     </Grid> 
    </DataTemplate> 
</UserControl.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 Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="140"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <!-- 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" Style="{StaticResource PageHeaderTextStyle}"/> 
    </Grid> 

    <!-- Horizontal scrolling grid used in most view states --> 
    <ScrollViewer 
     x:Name="itemGridScrollViewer" 
     AutomationProperties.AutomationId="ItemGridScrollViewer" 
     Grid.Row="1" 
     Margin="0,-3,0,0" 
     Style="{StaticResource HorizontalScrollViewerStyle}"> 

     <local:MyGridView 
      x:Name="itemGridView" 
      AutomationProperties.AutomationId="ItemGridView" 
      AutomationProperties.Name="Grouped Items" 
      Margin="116,0,40,46" 
      ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" 
      ItemTemplate="{StaticResource CustomTileItem}" 
      SelectionMode="None" 
      IsItemClickEnabled="True" 
      ItemClick="ItemView_ItemClick"> 

      <local:MyGridView.ItemsPanel> 
       <ItemsPanelTemplate> 
        <VirtualizingStackPanel Orientation="Horizontal"/> 
       </ItemsPanelTemplate> 
      </local:MyGridView.ItemsPanel> 
      <local:MyGridView.GroupStyle> 
       <GroupStyle> 
        <GroupStyle.HeaderTemplate> 
         <DataTemplate> 
          <Grid Margin="1,0,0,6"> 
           <Button 
            AutomationProperties.Name="Group Title" 
            Content="{Binding Title}" 
            Click="Header_Click" 
            Style="{StaticResource TextButtonStyle}"/> 
          </Grid> 
         </DataTemplate> 
        </GroupStyle.HeaderTemplate> 
        <GroupStyle.Panel> 
         <ItemsPanelTemplate> 
          <VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/> 
         </ItemsPanelTemplate> 
        </GroupStyle.Panel> 
       </GroupStyle> 
      </local:MyGridView.GroupStyle> 
     </local:MyGridView> 
    </ScrollViewer> 

和：

public class MyGridView : GridView 
{ 
    private int rowVal; 
    private int colVal; 
    private Random _rand; 
    private List<Size> _sequence; 

    public MyGridView() 
    { 
     _rand = new Random(); 
     _sequence = new List<Size> { 
      LayoutSizes.PrimaryItem, 
      LayoutSizes.SecondarySmallItem, LayoutSizes.SecondarySmallItem, 
      LayoutSizes.SecondarySmallItem, 
      LayoutSizes.SecondaryTallItem, 
      LayoutSizes.OtherSmallItem, LayoutSizes.OtherSmallItem, LayoutSizes.OtherSmallItem 
     }; 

    } 
    protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item) 
    { 
     base.PrepareContainerForItemOverride(element, item); 
     SampleDataItem dataItem = item as SampleDataItem; 
     int index = -1; 

     if (dataItem != null) 
     { 
      index = dataItem.Group.Items.IndexOf(dataItem); 

     } 



     if (index >= 0 && index < _sequence.Count) 
     { 

      colVal = (int)_sequence[index].Width; 
      rowVal = (int)_sequence[index].Height; 

     } 
     else 
     { 
      colVal = (int)LayoutSizes.OtherSmallItem.Width; 
      rowVal = (int)LayoutSizes.OtherSmallItem.Height; 

     } 


     VariableSizedWrapGrid.SetRowSpan(element as UIElement, rowVal); 
     VariableSizedWrapGrid.SetColumnSpan(element as UIElement, colVal); 


    } 
} 

public static class LayoutSizes 
{ 
    public static Size PrimaryItem = new Size(6, 2); 
    public static Size SecondarySmallItem = new Size(3, 1); 
    public static Size SecondaryTallItem = new Size(3, 2); 
    public static Size OtherSmallItem = new Size(2, 1); 

} 

例如與「可變大小的分組GridView的模板」，我們可以結合行或列，以及如何設置第一個元素height =「auto」，以及所有其他具有不同寬度和高度的元素，但分組爲「Variable Sized Grouped GridView template」？

Answer 1

查看這篇文章： http://blogs.msdn.com/b/synergist/archive/2012/09/25/windows-store-app-xaml-gridview-with-variable-templates.aspx

我覺得這是你所需要的。