我的一种XAML表单在设计上看起来与调试不同

Question

项目中的一种XAML表单在设计时看起来像我想要的样子，但是当我调试表单的元素时，它们的大小和位置不同。我该如何解决？

如果我的XAML代码无用，我深表歉意。我不熟悉XAML，也不知道要包含什么内容。如有必要，我可以添加任何其他代码。

我尝试从表单调试时删除并重新添加位于不同位置的元素。

文本块在调试表单中未对齐，并且列表框大于应有的大小。

Xaml

</ContentDialog>
<Rectangle HorizontalAlignment="Left" Height="195" Margin="766,793,0,0" VerticalAlignment="Top" Width="463" FocusVisualPrimaryBrush="#FF1B0303" Fill="{ThemeResource AppBarBorderThemeBrush}"/>
<ListBox Margin="1617,192,21,348"/>

Answer 1

根据您所附的图片，我只能假设为文本框指定的边距与为矩形指定的边距不同。这很容易测试。

<Rectangle HorizontalAlignment="Left" Height="195" Margin="766,793,0,0" VerticalAlignment="Top" Width="463" FocusVisualPrimaryBrush="#FF1B0303" Fill="{ThemeResource AppBarBorderThemeBrush}"/>

这里有2条重要线索-

  

Margin =“ 766,793,0,0” //父元素中的相对位置

     

Width =“ 463” Height =“ 195” //矩形的大小

将这些值与您引用的文本块进行比较，希望您会发现问题。

注意：全屏应用程序的窗口大小将与设计不同，因此相对位置也会发生变化。尝试更改设计中的窗口宽度/高度（更改为全屏分辨率），该视图应显示与正在运行的应用相同的视图。

您可以尝试将它们放置在同一个父对象（例如网格）中。我已经用这个UWP xaml进行了测试，它似乎可以解决问题：

<Grid Margin="766,793,0,0" Width="463" Height="195">
            <Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" FocusVisualPrimaryBrush="#FF1B0303" Fill="{ThemeResource AppBarBorderThemeBrush}"/>
            <ListBox>
                <TextBlock Text="asda"/>
                <TextBlock Text="asda"/>
                <TextBlock Text="asda"/>
                <TextBlock Text="asda"/>
                <TextBlock Text="asda"/>
            </ListBox>
 </Grid>

基本上，父元素网格将设置大小和位置，子元素将继承这些属性。

Answer 2

  

我的一种XAML表单在外观设计上与调试不同，

问题是您使用Margin进行了绝对布局。更改窗口大小后，控件将固定在Margin="766,793,0,0"上。更好的方法是进行自适应布局。例如。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Aqua" Height="200"/>
    <ListView Height="200" Grid.Column="1" Background="Beige">
        <x:String>Test Value</x:String>
        <x:String>Test Value</x:String>
        <x:String>Test Value</x:String>
        <x:String>Test Value</x:String>
    </ListView>
    <Image Stretch="Fill" Height="200" Grid.Column="2" Source="Assets/StoreLogo.png" />
</Grid>

有关更多详细信息，请参阅l ayouts with XAML。