0
我想知道如何为UWP应用程序构建XAML布局，这对所有设备都很好。我做了一个由网格和堆叠面板组成的布局，当我在我的电脑上本地启动它时，它在最小尺寸（移动）上非常漂亮。UWP - 使用XAML为所有设备构建漂亮的布局
当我调整它的大小（平板电脑），它看起来不是很好，但它传递
在桌面上这是一个耻辱......
灰色部分是我想在平板电脑和台式机上使用的部分，暂时不使用但我会把内容。
然后，我尝试在真实设备上的手机大小和惊喜，我看不到所有的内容。它被截断在第二行下方（灰色和蓝色按钮下方）。我想我必须找到一个scrollview或像这样的东西，并把它放在我的网格。
但最重要的问题是你如何建立你的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>
谢谢大家的帮忙！我很欣赏:)
听起来像是你应该计算器上的文件要求。 – IInspectable
使用VisualStateManager，因为你得到了[在你以前的问题中回复]（http://stackoverflow.com/a/38713984/318501） – Bart