0

我正在查看 VS2012 附带的 windows 8 网格项目并试图理解它。我对 XAML 了解不多，所以我很容易忘记绑定代码发生在哪里等等。

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

我看到 Items Source 正在使用该 groupItemsViewSource 但不确定它如何将数据解析为网格外观但不确定如何。

我不明白的下一部分是它如何确定要使用的布局。我在评论中看到了这个

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

我敢肯定，如果我更深入地研究它，我会发现更多我不理解的东西，但也许当我理解这些东西时，我会理解更多（尤其是一旦我理解了这些绑定的东西）

4

2 回答 2

2

我不知道这个 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

ItemTemplate="{StaticResource Standard250x250ItemTemplate}"在 GridView 绑定中控制内部集合项的显示方式。您必须打开该样式（在 中Common/StandardStyles.xaml）才能看到它引用了 a 的属性SampleDataItem，本质上导致this.DefaultViewModel["Groups"][i].TopItems[j].

前缀指的d:是设计时数据（嗯，一个包含管理它的类的命名空间）；它允许您在不运行应用程序的情况下在设计器中查看数据。因此，在设计时，您看到的数据实际上来自SampleDataSource.AllGroups.

至于关于滚动的评论，进入VisualStateManager，每个状态本质上是对 UI 的不同看法；通过一些代码进行状态转换，您可以在LayoutAwarePage.cslook for GotoState中找到。

于 2013-01-15T23:56:24.757 回答
0

我不知道这个 Source="{Binding Groups}" 实际来自哪里

绑定DataContext以元素为目标——要找到它，您通常会向上扫描 XAML 以查找上次设置 DataContext 的位置。所以在这种情况下，它必须以某种方式设置在Page元素上。（DataContext 也可以从代码隐藏中设置，尽管如果在 VS 示例项目中是这种情况，我会感到惊讶。）

与 d:Source 相同，也不确定 100% 那里发生了什么。

d前缀是指设计时数据。检查SampleDataSource，您可以在其中找到 的设计时实例AllGroups。

不确定它是如何将数据解析到网格中的

Grid 根据其行数据类型的属性自动生成其列。

于 2013-01-15T23:55:53.220 回答