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
            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グループ (type ) のリスト (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プロパティを参照するため、ItemsSourcethis.DefaultViewModel["Groups"][i].Title

ItemTemplate="{StaticResource Standard250x250ItemTemplate}"GridView バインディングでは、内部コレクション項目の表示方法を制御します。そのスタイルを開いて（ で）クラックして、本質的に につながるCommon/StandardStyles.xamlのプロパティを参照していることを確認する必要があります。SampleDataItemthis.DefaultViewModel["Groups"][i].TopItems[j]

プレフィックスは、設計時のd:データ (つまり、それを管理するクラスを含む名前空間) を指します。これにより、アプリケーションを実行せずにデザイナーでデータを表示できるようになります。したがって、設計時に表示されるデータは、実際にはSampleDataSource.AllGroups.

スクロールに関するコメントはVisualStateManagerに入ります。各状態は基本的に UI の異なるテイクです。LayoutAwarePage.csgotoStateの中で見つけることができるコードのビットを介して状態遷移します。

于 2013-01-15T23:56:24.757 に答える
0

この Source="{Binding Groups}" が実際にどこから来ているのかわかりません

バインディングDataContextは要素の をターゲットにします。それを見つけるには、通常、XAML をスキャンして DataContext が最後に設定された場所を見つけます。したがって、この場合、Page何らかの方法で要素に設定する必要があります。(DataContext はコード ビハインドから設定することもできますが、VS サンプル プロジェクトがそうであったとしたら驚きです。)

d:Source と同じで、そこで何が起こっているのか 100% わかりません。

dプレフィックスは、設計時のデータを参照しています。を確認してくださいSampleDataSource。そこに の設計時のインスタンスがありAllGroupsます。

データをグリッドに解析する方法がわからない

グリッドは、行データ型のプロパティに基づいて列を自動生成します。

于 2013-01-15T23:55:53.220 に答える