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