WinRT（メトロ）の四角形のグリッドビュー

Question

私はこれで数日前から苦労していて、うまく動作しません。 多分、私は私が望むほど良いXAMLプログラマではないでしょう:)

私の問題は、GridViewにいくつかの要素をバインドして、幅と幅を設定せずに四角形として表示することです高さ。なぜなら、解像度や画面サイズが変わると、GridViewアイテムを拡大/縮小して最大サイズに拡大したいからです。ここで

は私のXAMLです：

<UserControl.Resources> 

    <Style x:Key="MyItemContainerStyle" TargetType="ListViewItem"> 
     <Setter Property="FontFamily" Value="Segoe UI" /> 
     <Setter Property="FontWeight" Value="Bold" /> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
     <Setter Property="VerticalContentAlignment" Value="Stretch" /> 
     <!--<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource Self}, Path=Width}" />--> 
    </Style> 

    <DataTemplate x:Key="MyItemTemplate"> 
     <Border CornerRadius="4" 
       BorderBrush="Black" 
       BorderThickness="1" 
       Background="Blue"> 
      <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">X</TextBlock> 
     </Border> 
    </DataTemplate> 

    <ItemsPanelTemplate x:Key="MyItemsPanelTemplate"> 
     <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" /> 
    </ItemsPanelTemplate> 

</UserControl.Resources> 

<Grid Background="White"> 
    <GridView x:Name="MyGrid" 
       UseLayoutRounding="True" 
       ItemTemplate="{StaticResource MyItemTemplate}" 
       ItemsPanel="{StaticResource MyItemsPanelTemplate}" 
       ItemContainerStyle="{StaticResource MyItemContainerStyle}" 
       ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto"> 
    </GridView> 
</Grid> 

そして、これは私のコードビハインドである：

：これは、しかし、このような出力（長方形のアイテムではなく、四角）を生成

public sealed partial class BlankPage : Page 
{ 
    public BlankPage() 
    { 
     this.InitializeComponent(); 

     MyGrid.Items.Add(new ListViewItem { Content = 1 }); 
     MyGrid.Items.Add(new ListViewItem { Content = 2 }); 
     MyGrid.Items.Add(new ListViewItem { Content = 3 }); 
    } 

    /// <summary> 
    /// Invoked when this page is about to be displayed in a Frame. 
    /// </summary> 
    /// <param name="e">Event data that describes how this page was reached. The Parameter 
    /// property is typically used to configure the page.</param> 
    protected override void OnNavigatedTo(NavigationEventArgs e) 
    { 
    } 
} 

XAMLについてもう少し分かっている人WinRT（地下鉄）の開発は私よりも、私のためにこれを説明することができ、おそらく私に実用的な例を与えることができます。

Thanx！

EDIT

私は能力を伸ばし/いくつかのスケーリングを持っているようだとして、ビューボックスで私のボーダーをラップするヒントを得ました。

私は数時間で遊んだが、実際には100％動作させることはできません。

これが今の私のXAMLです：

<UserControl.Resources> 

<Style x:Key="MyItemContainerStyle" TargetType="ListViewItem"> 
    <Setter Property="FontFamily" Value="Segoe UI" /> 
    <Setter Property="FontWeight" Value="Bold" /> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
    <Setter Property="VerticalContentAlignment" Value="Stretch" /> 
</Style> 

<DataTemplate x:Key="MyItemTemplate"> 
    <Viewbox> 
     <Border CornerRadius="3" 
     BorderBrush="Black" 
     BorderThickness="1"> 
      <Grid Background="Blue" MinHeight="50" MinWidth="50"> 
       <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">X</TextBlock> 
      </Grid> 
     </Border> 
    </Viewbox> 
</DataTemplate> 

<ItemsPanelTemplate x:Key="MyItemsPanelTemplate"> 
    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"> 
    </StackPanel> 
</ItemsPanelTemplate> 

</UserControl.Resources> 

<Grid Background="White"> 
    <GridView x:Name="MyGrid" 
     UseLayoutRounding="True" 
     ItemTemplate="{StaticResource MyItemTemplate}" 
     ItemsPanel="{StaticResource MyItemsPanelTemplate}" 
     ItemContainerStyle="{StaticResource MyItemContainerStyle}" 
     ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"> 
    </GridView> 
</Grid> 

これは、この出力を生成します

今ではsqaureに自分自身を伸ばしているようだが、それは、画面の外に自分自身をsretches。私はまた、いくつかのresoultionsと画面サイズでこの例を実行し、それは正しくスケールすることを意味する同じ出力を示しています。

助けていただければ幸いです。

Thanx！結合コメントアウト

Answer 1

あなたは仕事の並べ替えができなものに近いです - あなただけがActualWidthにバインドする必要があります：

<Setter Property="Height" Value="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" /> 

全体的に私は、ハードコードされた値を使用することをお勧めし - 彼らはへのCPU上の物事が容易になりますレイアウト、簡単に決定論的に設計することができ、画面サイズと解像度にはそれが必要な場合には、Windowsによって縮尺されます。それ以上の制御が必要な場合は、必要に応じて変更するビューモデルからWidthとHeightを同じ値にバインドするか、検出された画面に応じてハードコードされたWidth/Height値を実際の値に変換するコンバータを作成しますサイズ/解像度または設定。