UWP XAMLグリッドは等幅の列幅で不均等にサイズ変更されます

Question

私はUWPアプリケーションを作成しており、2つの偶数幅の外側列と2つの偶数幅の内側列を持つスクロールビューア内にフルページグリッドを持つページを持っています。ページの右側は左のミラーであり、すべてが反対側の同様の列に揃えられています。しかし、私は私のアプリを実行し、幅を減らすと、特定のポイントの後に3番目の列だけが縮小します。その点の前に、すべての列が正しく調整されます。私は、幅または幅プロパティを設定していません。グリッドに固定幅を設定すると、列のサイズが偶数になるようにサイズが変更されます。 ScrollViewerを削除し、任意の最小幅がどこにでも設定されているかどうかを二重チェックと三重チェックで確認しました。

<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"> 
    <Grid MinWidth="800" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="69*"/> 
      <ColumnDefinition Width="76*"/> 
      <ColumnDefinition Width="76*"/> 
      <ColumnDefinition Width="69*"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="27*"/> 
      <RowDefinition Height="62*"/> 
      <RowDefinition Height="27*"/> 
      <RowDefinition Height="399*"/> 
      <RowDefinition Height="340*"/> 
      <RowDefinition Height="105*"/> 
     </Grid.RowDefinitions> 
     <Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform"> 
      <RichTextBlock Foreground="White"> 
       <Paragraph> 
        <Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/> 
       </Paragraph> 
      </RichTextBlock> 
     </Viewbox> 
     <Viewbox Margin="90,27,100,0" Grid.RowSpan="3" Grid.Column="3" Height="63" VerticalAlignment="Top"> 
      <RichTextBlock Foreground="White"> 
       <Paragraph> 
        <Run Text="Away" FontSize="48" FontWeight="Bold"/> 
       </Paragraph> 
      </RichTextBlock> 
     </Viewbox> 
     <Rectangle Fill="White" Margin="0,0,-1,0" Stroke="#FF252525" Grid.RowSpan="6" HorizontalAlignment="Right" Width="2" Grid.Column="1"/> 
     <Button x:Name="HomeGoalBtn" Margin="320,0,0.667,0.667" Grid.Row="3" Click="button_Click" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2"> 
      <RichTextBlock IsTextSelectionEnabled="False"> 
       <Paragraph> 
        <Run Text="Goal" FontSize="48" Foreground="White" /> 
       </Paragraph> 
      </RichTextBlock> 
     </Button> 
     <Button x:Name="AwayGoalBtn" HorizontalAlignment="Stretch" Margin="0.333,0,320,0.667" Grid.Row="3" VerticalAlignment="Stretch" Click="button_Click" Grid.ColumnSpan="2" Grid.Column="2"> 
      <RichTextBlock IsTextSelectionEnabled="False"> 
       <Paragraph> 
        <Run Text="Goal" FontSize="48" Foreground="White" /> 
       </Paragraph> 
      </RichTextBlock> 
     </Button> 
     <Button x:Name="AwayShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="0.333,24.333,25,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/> 
     <Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30,104.333,112,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="3"/> 
     <RichTextBlock Margin="10,10,0,0.667" Grid.Row="3" HorizontalAlignment="Left" Width="310"> 
      <Paragraph TextAlignment="Center"> 
       <Run Text="{x:Bind ViewModel.HomeScore, Mode=OneWay}" FontSize="200"/> 
      </Paragraph> 
     </RichTextBlock> 
     <RichTextBlock Margin="0,0,0,0.667" Grid.Row="3" Grid.Column="3" HorizontalAlignment="Right" Width="320"> 
      <Paragraph TextAlignment="Center"> 
       <Run Text="{x:Bind ViewModel.AwayScore, Mode=OneWay}" FontSize="200"/> 
      </Paragraph> 
     </RichTextBlock> 
     <Button x:Name="HomeShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30.333,24.667,0,14.333" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1" /> 
     <Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="102,104.333,24.667,15" Grid.Row="4" VerticalAlignment="Stretch"/> 
     <Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Left" Margin="30.333,20.167,0,8" Grid.Row="5" VerticalAlignment="Stretch" Width="250" Click="button3_Click"/> 

    </Grid> 
</ScrollViewer> 

これは私のページには、デザイナーでどのように見えるかです：

Answer 1

OK ...レイアウトがoverconstrainedされていることを私には見える - 可能性が高いため、配置ブレンド（Aの多くにそこに狂ったマージンがたくさんあります）。予測可能なレイアウトが必要な場合は、余白を使用して配置するのではなく、グリッドセクションの境界内にコントロールを配置することをお勧めします。 Grid.Row =＃Grid.Column =＃、どのくらいの幅のセクション（Grid.RowSpan =＃Grid.ColumnSpan =＃）、どの辺を整列するか（Horizo​​ntalAlignment =＃Grid.Column =＃）左/右/中央/ストレッチVerticalAlignment =左/右/中央/伸縮）、および余白からどれくらいの余白（余白=＃＃＃＃）が必要ですか？

ので、

<Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform"> 
    <RichTextBlock Foreground="White"> 
     <Paragraph> 
      <Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/> 
     </Paragraph> 
    </RichTextBlock> 
</Viewbox> 

なり、さらに

<Viewbox > 
    <TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" /> 
</Viewbox> 

、私はあなたが何をしているかについての実行とviewboxes、richtextboxes、および段落を必要とわからないんだけど、私はしないでくださいあなたが達成しようとしているものの全範囲を知っている。

は、次のようなものを試してみてください：

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" > 
     <Grid MinWidth="800" MinHeight="600" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="69*"/> 
       <ColumnDefinition Width="76*"/> 
       <ColumnDefinition Width="76*"/> 
       <ColumnDefinition Width="69*"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="27*"/> 
       <RowDefinition Height="62*"/> 
       <RowDefinition Height="27*"/> 
       <RowDefinition Height="399*"/> 
       <RowDefinition Height="340*"/> 
       <RowDefinition Height="105*"/> 
      </Grid.RowDefinitions> 

      <Viewbox > 
       <TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" /> 
      </Viewbox> 
      <Viewbox Grid.Column="3"> 
       <TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" /> 
      </Viewbox> 
      <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="1" > 
       <TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" /> 
      </Button> 
      <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="2" > 
       <TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" /> 
      </Button> 
      <Button x:Name="HomeShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1"/> 
      <Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="0"/> 
      <Button x:Name="AwayShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/> 
      <Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="3"/> 
      <TextBlock Text="24" Grid.Row="3" FontSize="200" HorizontalAlignment="Left" VerticalAlignment="Center" /> 
      <TextBlock Text="12" Grid.Row="3" Grid.Column="3" FontSize="200" HorizontalAlignment="Right" VerticalAlignment="Center" /> 
      <Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Stretch" Margin="15" Grid.Row="5" VerticalAlignment="Stretch" /> 

     </Grid> 
    </ScrollViewer>