XAMLでレスポンシブエレメントを作成する

Question

私はUWPとレスポンシブデザインにおいて全く新しいので、助けが必要です。 どこに問題がありますか？

ランディングページには4つの反応ボタンが必要ですが、各ビューでは全く同じように見えます。したがって、ボタンは変更されませんが、デスクトップでも同じように見え、電話エミュレータでも同じです（または画面解像度を変更した場合）。より良い説明については、一部の画面があります。大規模な23" の

ボタン - 画面（ポートレート）画面が小さな5" に

..buttonsよさそうだが... - ボタンをキャンバスその後、大きくなっています...

私の質問は：どのように応答するボタンを作るのですか？

応答設計のために

<Page 
    x:Class="STCApp.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:STCApp" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="83*"/> 
      <RowDefinition Height="998*"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <Button x:Name="button" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Background="#33DCFF00"></Button> 
     <Button x:Name="button_Copy" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="1" Background="#33FF0000"/> 
     <Button x:Name="button_Copy1" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="2" Background="#3300FF0C"/> 
     <Button x:Name="button_Copy2" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="3" Background="#330080FF"/> 
    </Grid> 
</Page> 

Answer 1

、私たちはより良い固定幅と高さを使用しないようしたい：

は、ここに私のソースコードです。 WidthとHeightの設定をButtonに削除し、次のようにHorizontalAlignmentとVerticalAlignment〜Stretchに設定してボタンを反応させることができます。

<Button x:Name="button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33DCFF00" Content="Button" /> 

このシナリオでは、各ボタンはグリッド内のセルを占有し、その幅と高さはガードのサイズに応じて自動的に変更されます。以下は完全なサンプルであり、レイアウト設計の詳細については、Layout for UWP appsを参照してください。あなたが利用可能な画面サイズに応じて変化しますビジュアルアメリカで扱うことができるRelativePanelを使用することが良いでしょう。この場合

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="83*" /> 
     <RowDefinition Height="998*" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <Button x:Name="button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33DCFF00" Content="Button" /> 
    <Button x:Name="button_Copy" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33FF0000" Content="Button" /> 
    <Button x:Name="button_Copy1" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#3300FF0C" Content="Button" /> 
    <Button x:Name="button_Copy2" Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#330080FF" Content="Button" /> 
</Grid> 

Answer 2

。これは助けるかもしれない

Windows 10 RelativePanel Sample