WPF设计视图与运行之间的区别

Question

在我的设计视图中，我有这个：

但是当我跑步时，我明白了：

这是我的代码：

<Viewbox Margin="95,49,399.4,246.4">
    <Grid Width="20" Height="20">
        <Ellipse Stroke="Black" HorizontalAlignment="Left" Width="20"/>
        <TextBlock HorizontalAlignment="Center" Text="i" TextAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Viewbox>
<Viewbox Margin="21,43,21,243.4">
    <Grid Height="20">
        <TextBlock FontSize="8" HorizontalAlignment="Center" Text="Lorem ipsum dolor sit amet consecutetur" TextAlignment="Left" VerticalAlignment="Center"/>
    </Grid>
</Viewbox>

有没有更好的方法来实现设计视图中的内容;而且，为什么两者之间有任何差异？

Answer 1

我很确定它是因为你的窗口在运行时的大小不同，虽然这不是真正的问题。

您正在使用两个不同的Viewbox，每个Viewbox都通过使用每个窗口边缘具有不同偏移的边距来固定到位。如果使窗口变大或变小，则边距不会改变，但视图框内的大小会改变。

由于视图框会自动缩放其内容以适合可用区域的大小（请参阅http://msdn.microsoft.com/en-us/library/system.windows.controls.viewbox.aspx），这使您的内容看起来与众不同。

如果我试图对上面的内容进行布局，我会做一些简单的水平和中心布置的东西;

 <StackPanel >
        <TextBlock FontSize="20" Text="Heading" HorizontalAlignment="Center"/>
        <StackPanel Orientation="Horizontal"  HorizontalAlignment="Center">
            <Grid x:Name="iGrid">
                <Ellipse Width="{Binding ElementName=iGrid, Path=ActualHeight}" Stroke="Black"/>
                <TextBlock Text="i" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
            <TextBlock Text="Lorem ipsum"/>
        </StackPanel>
    </StackPanel>