我希望能够在小屏幕上观看视图，视图变得越来越少，而且它应该很大。例如，在下面给出的480×800电话视图中的图像应该到达支持部分（其余部分可滚动），而在wxga中它应该覆盖人力资源部分。 xaml代码是
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
<StackPanel>
<TextBlock Text="Contact" FontSize="30" HorizontalAlignment="Center" Foreground="Black"></TextBlock>
<ScrollViewer x:Name="scroll" Height="650">
<StackPanel x:Name="stack">
<Border Background="#E66729" Padding="5">
<TextBlock Text="Email" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<HyperlinkButton Margin="0,10,0,0" Content="xxxxxxxx" Foreground="Blue"></HyperlinkButton>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Skype ID" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<TextBlock Text="xxxxxxxx" Foreground="Black" HorizontalAlignment="Center" FontWeight="SemiBold" FontSize="22"></TextBlock>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Numbers" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Sales:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Sales:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Care:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="+91-xxxxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="HR:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="+91-xxxxxxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
</StackPanel>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Support" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Care:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxxx" Margin="0,5,0,0" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Email:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxxxxxxxx" Margin="0,5,0,0" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Skype ID:" Margin="0,5,0,0" Foreground="Black" FontSize="22" ></TextBlock>
<TextBlock Text="xxxxxxxx" FontSize="22" Foreground="Black"></TextBlock>
</StackPanel>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Human Resource" HorizontalAlignment="Center" FontSize="25"></TextBlock>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Hr:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Email:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxxxx" Foreground="Blue"></HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Skype ID:" Foreground="Black" FontSize="22" ></TextBlock>
<TextBlock Text="orangemantra" Foreground="Black"></TextBlock>
</StackPanel>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
请打开图片，因为我没有声誉。 http://i.stack.imgur.com/lLQR7.png
答案 0 :(得分：0)
对于自适应布局，请确保仔细使用边距。并且每个元素或容器基于其水平和垂直对齐放置。在任何时候，如果无法使用对齐放置元素，请使用网格行和列定义来更好地放置元素。使用边距将元素放置在距行或列定义精确的距离处。尽量不要使用边距，因为它们是硬编码的，在运行时它们不会改变。在行和列定义中，使用*作为因子或划分网格（如代码所示），因为*会考虑屏幕布局大小，并在这种情况下将网格大小乘以因子12。此外，如果您不想设置列的宽度或行的高度，则可以使用Auto而不是*，并且在运行时，将自动分配列，编辑代码并使它适用于所有的screentypes。使用scrollviewer时，请确保避免给它一个高度（如代码中所示）。我添加了一个网格行，使得滚动查看器可以完全展开屏幕。这是修改后的代码：
<Grid x:Name="ContactGrid" Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="12*"/>
</Grid.RowDefinitions>
<TextBlock Text="Contact" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="Black"/>
<ScrollViewer x:Name="scroll" IsEnabled="True" Grid.Row="1">
<Grid x:Name="ContentGrid">
<StackPanel x:Name="stack">
<Border Background="#E66729" Padding="5">
<TextBlock Text="Email" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<HyperlinkButton Margin="0,10,0,0" Content="xxxxxxxx" Foreground="Blue"/>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Skype ID" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<TextBlock Text="xxxxxxxx" Foreground="Black" HorizontalAlignment="Center" FontWeight="SemiBold" FontSize="22"/>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Numbers" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Sales:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Sales:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="Care:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="+91-xxxxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
<TextBlock Text="HR:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="+91-xxxxxxxxxx" Foreground="Blue"/>
</StackPanel>
</StackPanel>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Support" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Care:" Foreground="Black" FontSize="22" ></TextBlock>
<HyperlinkButton Content="xxxxxxx" Margin="0,5,0,0" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Email:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="xxxxxxxxxxxx" Margin="0,5,0,0" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Skype ID:" Margin="0,5,0,0" Foreground="Black" FontSize="22" />
<TextBlock Text="xxxxxxxx" FontSize="22" Foreground="Black"></TextBlock>
</StackPanel>
<Border Margin="0,10,0,0" Background="#E66729" Padding="5">
<TextBlock Text="Human Resource" HorizontalAlignment="Center" FontSize="25"/>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Hr:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="xxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Email:" Foreground="Black" FontSize="22" />
<HyperlinkButton Content="xxxxxxxx" Foreground="Blue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Skype ID:" Foreground="Black" FontSize="22" />
<TextBlock Text="orangemantra" Foreground="Black"/>
</StackPanel>
</StackPanel>
</Grid>
</ScrollViewer>
</Grid>
您还可以使用Pivot控件来组织支持内容。这样，用户可以轻扫您需要提供的信息。如果有什么请在评论部分告诉我