0

各アイテム コンテナー間には間隔があり、コンテナー内のマージンとパディングもあるようです。私の質問は、GridView で ItemContainer の実際のサイズを計算して、グリッドが収容できる行数を計算する方法です。私が得ることができるのは、各 ItemTemplate の高さとグリッドの高さです。これらの値を考えると、どのように計算するのですか?

4

1 に答える 1

2

テンプレート グリッド アプリを作成する場合は、NuGet 参照を winrtxamltoolkit デバッグ コンポーネントに追加し、次のように設定して Standard250x250ItemTemplate にブレークポイントを追加します。

Debugging:VisualTreeDebugger.BreakOnLoaded="True"

どこ

xmlns:Debugging="using:WinRTXamlToolkit.Debugging"

VS の出力ウィンドウに、次のようなビジュアル ツリー トレースが表示されます。

path[8] is Control: Windows.UI.Xaml.Controls.GridViewItem():
    ActualWidth=258
    ActualHeight=258
    Position – X=376, Y=176, Right=634, Bottom=434
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Stretch
    VerticalAlignment=Stretch
    HorizontalContentAlignment=Center
    VerticalContentAlignment=Center
    Content=Item Title: 3
    Margins=0,0,2,2
    Padding=0,0,0,0
    Background=SolidColorBrush: #00FFFFFF
    Foreground=SolidColorBrush: #FFFFFFFF
    FontFamily: Segoe UI
path[7] is Control: Windows.UI.Xaml.Controls.Border(OuterContainer):
    ActualWidth=258
    ActualHeight=258
    Position – X=376, Y=176, Right=634, Bottom=434
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Stretch
    VerticalAlignment=Stretch
    Margins=0,0,0,0
path[6] is Control: Windows.UI.Xaml.Controls.Grid(ReorderHintContent):
    ActualWidth=258
    ActualHeight=258
    Position – X=376, Y=176, Right=634, Bottom=434
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Stretch
    VerticalAlignment=Stretch
    Margins=0,0,0,0
    Background=SolidColorBrush: #00FFFFFF
path[5] is Control: Windows.UI.Xaml.Controls.Border(ContentContainer):
    ActualWidth=258
    ActualHeight=258
    Position – X=376, Y=176, Right=634, Bottom=434
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Stretch
    VerticalAlignment=Stretch
    Margins=0,0,0,0
path[4] is Control: Windows.UI.Xaml.Controls.Grid(InnerDragContent):
    ActualWidth=258
    ActualHeight=258
    Position – X=376, Y=176, Right=634, Bottom=434
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Stretch
    VerticalAlignment=Stretch
    Margins=0,0,0,0
    Background=
path[3] is Control: Windows.UI.Xaml.Controls.Border(ContentBorder):
    ActualWidth=250
    ActualHeight=250
    Position – X=380, Y=180, Right=630, Bottom=430
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Stretch
    VerticalAlignment=Stretch
    Margins=4,4,4,4
path[2] is Control: Windows.UI.Xaml.Controls.Grid():
    ActualWidth=250
    ActualHeight=250
    Position – X=380, Y=180, Right=630, Bottom=430
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Stretch
    VerticalAlignment=Stretch
    Margins=0,0,0,0
    Background=
path[1] is Control: Windows.UI.Xaml.Controls.ContentPresenter(contentPresenter):
    ActualWidth=250
    ActualHeight=250
    Position – X=380, Y=180, Right=630, Bottom=430
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Center
    VerticalAlignment=Center
    Margins=0,0,0,0
path[0] is Control: Windows.UI.Xaml.Controls.Grid():
    ActualWidth=250
    ActualHeight=250
    Position – X=380, Y=180, Right=630, Bottom=430
    DataContext: Item Title: 3 HashCode: 9648315
    Width=250
    Height=250
    HorizontalAlignment=Left
    VerticalAlignment=Stretch
    Margins=0,0,0,0
    Background=

その項目テンプレートはルートとして 250x250 グリッドを使用し、GridView はデフォルトの ItemContainerStyle でデフォルトのスタイルを使用しているため、デフォルトの GridViewItem スタイルには、「4」のマージンを定義する ContentBorder と呼ばれる 1 つの境界線があるようです。グリッド アイテムの構成方法に応じて、その知識を使用して、さまざまな方法で探しているサイズを計算できます。

グリッド アプリ プロジェクト テンプレートの 250x250 のような固定サイズの ItemTemplate を定義すると、最終的に 258x258 の正方形のスペースを占めるアイテムになります。ItemContainerStyle を変更して各 ContentBorder の周囲のマージンを変更する場合は、計算を調整する必要があります。ItemTemplate に一定のサイズを指定しない場合、項目のサイズは GridView に追加された最初の項目に基づきます。

Blend を使用してコントロール テンプレートを詳細に分析するか、VisualTreeDebugger、XAML Spy、または VisualTreeHelper を使用してビジュアル ツリーをたどる独自のコードを使用して、レイアウトについて詳しく知ることができます。

于 2012-11-10T22:18:35.773 に答える