UWP - すべてのデバイスでXAMLを使用してすばらしいレイアウトを作成してください。

Question

UWPアプリケーション用のXAMLレイアウトをどのように構築すればよいでしょうか。グリッドとスタックパネルで構成されたレイアウトを作ったのですが、私のコンピュータでローカルに起動すると、最小サイズ（モバイル）でとても素敵です。

私は（タブレット）、それのサイズを変更すると、それは非常に良好ではないに見えますが、それはデスクトップで

を渡し、それは...

残念ですグレーの部分は、タブレットとデスクトップで使用したいと思っている部分です。しかし、私は内容を入れます。

私は実際のデバイスでモバイルサイズを試してみましたが、私はすべてのコンテンツを見ることができません。 2番目の行のすぐ下に切り捨てられます（グレーと青のボタンの下）。私はスクロールビューを見つけなければならないと思います。

しかし、最も重要な質問は、すべてのデバイスのサイズに合わせてXAMLを構築する方法です。例えば、私はボタンとして四角形が好きですが、タブレットとデスクトップでは四角形のように見えます...タブレットとデスクトップに四角形に合わせてグリッドのサイズを変更すると、モバイル上の行間に大きな空白ができます。それは私に頭痛を与える...

誰かがこのようなレイアウトを構築していますか？レイアウトを改善する方法を理解するのに役立つ人はいますか？私が書いたコードの下...

<Page 
x:Class="RescueCode.UWP.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:RescueCode.UWP" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" MinHeight="800"> 
<Page.TopAppBar> 
    <CommandBar> 
     <CommandBar.Content> 
      <Grid/> 
     </CommandBar.Content> 
     <AppBarButton Name="update" Icon="Download" Click="AppBarButton_Click"/> 
    </CommandBar> 
</Page.TopAppBar> 

<Grid Background="White" x:Name="MainGrid" > 

    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
     <ColumnDefinition Width="2*"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="188*"/> 
     <RowDefinition Height="179*"/> 
     <RowDefinition Height="409*"/> 
    </Grid.RowDefinitions> 

    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="WideState"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="720" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="MainGrid.Margin" Value="24"/> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="NarrowState"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="MainGrid.Margin" Value="12"/> 
        <Setter Target="MainGrid.ColumnDefinitions[2].Width" Value="0"/> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 


    <StackPanel x:Name="g1" Grid.Column="0" Grid.Row="0" Padding="20" Orientation="Vertical"> 
     <TextBlock Text="Test" FontSize="20"/> 
     <Button x:Name="cameraButton" Click="cameraButton_Click" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#F15A22" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"> 
      <Image x:Name="cameraImage" Source="Assets/scan.png" NineGrid="0" Margin="20,20,20,20" Stretch="UniformToFill"/> 
     </Button> 
    </StackPanel> 

    <StackPanel x:Name="g2" Grid.Column="1" Grid.Row="0" Padding="20" Orientation="Vertical"> 
     <TextBlock Text="Test" FontSize="20"/> 
     <Grid> 
      <Button x:Name="searchButton" Click="searchButton_Click" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" Background="#f7a600" > 
       <Image x:Name="searchImage" Source="Assets/search.png" NineGrid="0" Margin="20,20,20,20"/> 
      </Button> 
     </Grid> 
    </StackPanel> 

    <Grid x:Name="g3" Grid.Column="2" Grid.Row="0" Background="Gray" > 
     <TextBox Text="3"/> 
    </Grid> 

    <StackPanel x:Name="g4" Grid.Column="0" Grid.Row="1" Padding="20" Orientation="Vertical"> 
     <TextBlock Text="Test" FontSize="20"/> 
     <Button x:Name="aboutButton" Content="Test" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0,20,0,0" Background="#6c7778"/> 
     <Button x:Name="applicationButton" Content="Test" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0,20,0,0" Background="#00ADEF"/> 
    </StackPanel> 

    <StackPanel x:Name="g5" Grid.Column="1" Grid.Row="1" Padding="20" Orientation="Vertical" > 
     <TextBlock Text="Site" FontSize="20"/> 
     <Button x:Name="websiteButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" Background="#fc0" Click="websiteButton_Click"> 
      <Image x:Name="websiteImage" Source="Assets/website.png" NineGrid="0" Margin="20,20,20,20"/> 
     </Button> 
    </StackPanel> 

    <Grid x:Name="g6" Grid.Column="2" Grid.Row="1" Background="Gray" > 
     <TextBox Text="6"/> 
    </Grid> 

    <Grid x:Name="g7" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Padding="20" > 
     <StackPanel x:Name="s7" Orientation="Vertical"> 
      <TextBlock Text="Test" FontSize="20"/> 
      <TextBlock Margin="0,20,0,0" TextWrapping="Wrap" Text="fejnfkjbshbcjhsdbvhdskjbcvjhskdnbckjscnkjdsncjnsdcjsdnbvjdjvsjhvlkenjlzsevnljhnjvklevbksvbjkdbnskjdjsdnvkjnkjvnkdjbkdjvbsdkjbvkdjvbkdjbskjvbekvbjdvb ." FontSize="14"/> 
     </StackPanel> 
    </Grid> 

    <Grid x:Name="g9" Grid.Column="2" Grid.Row="2" Background="Gray" > 
     <TextBox Text="9"/> 
    </Grid> 

</Grid> 

あなたが助けてくれてありがとうみんな！私が述べたあなたの前の質問にコメントとして

Answer 1

:)感謝、StackPanelは不定の高さを有し、そしてあなたの受け入れ答えすでにその溶液を用いて、あなたの問題が解決することができ、デスクトップ上のレイアウトは、このような、たとえば次のようになります。

ボタンは常にコンテナに合わせて伸びるため、ボタンは長方形になりますが、画像はすべて正方形のように見えます。あなたはこの質問をもう一度聞いたので、私の推測では、ボタンを正方形にしたいと思っていますか？もしそうなら

は、1つの方法は、あなたはまだ私はあなたの最後の質問で提案されているように、あなたのレイアウトで各ボタンのサイズを定義するVisualStateManagerを使用することができ、そして、私は別の方法を提供し、この時間は、あなたがあなたのMainGridのScrollViewer外に設定することができるということですVisualStateManagerをこのレイアウトのルートコントロール（今はScrollViewer）に移動します。

あなたの問題は、実際にあなたのボタンの両親を保持するのに十分な高さがないことです。

<ScrollViewer> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="WideState"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="720" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="MainGrid.Margin" Value="24"/> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="NarrowState"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="MainGrid.Margin" Value="12"/> 
        <Setter Target="MainGrid.ColumnDefinitions[2].Width" Value="0"/> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

    <Grid Background="White" x:Name="MainGrid" > 

     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition Width="2*"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="188*"/> 
      <RowDefinition Height="179*"/> 
      <RowDefinition Height="409*"/> 
     </Grid.RowDefinitions> 

     <!--your layout without VisualStateManager--> 

    </Grid> 
</ScrollViewer> 

これは良い作品が、私は良いことだと考える一つの問題になり、それは年末に空きをトリミングします：StackPanels、十分な高さがあり確実にするには、ScrollViewerは多くを助けることができますこのようなレイアウト：