UWP XAML网格使用相等列宽调整不均匀

时间：2016-08-25 12:55:57

标签： xaml uwp

我正在编写一个UWP应用程序，并且在一个滚动查看器中有一个带有整页网格的页面，其中有两个偶数宽度的外部列和两个偶数宽度的内部列。页面的右侧是左侧的镜像，并且所有内容都与对侧的相似列对齐。但是，当我运行我的应用程序并减小宽度时，在某一点之后只有第三列缩小。在此之前，所有列都会正确调整。我没有设置任何宽度或最小宽度属性。如果我在网格上设置固定宽度，则列调整为均匀。我尝试更改我的元素在各种元素上对齐的列，删除ScrollViewer，以及在任何地方设置的任何最小宽度的双重和三重检查。

<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Grid MinWidth="800" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="69*"/>
            <ColumnDefinition Width="76*"/>
            <ColumnDefinition Width="76*"/>
            <ColumnDefinition Width="69*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="27*"/>
            <RowDefinition Height="62*"/>
            <RowDefinition Height="27*"/>
            <RowDefinition Height="399*"/>
            <RowDefinition Height="340*"/>
            <RowDefinition Height="105*"/>
        </Grid.RowDefinitions>
        <Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform">
            <RichTextBlock Foreground="White">
                <Paragraph>
                    <Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/>
                </Paragraph>
            </RichTextBlock>
        </Viewbox>
        <Viewbox Margin="90,27,100,0" Grid.RowSpan="3" Grid.Column="3" Height="63" VerticalAlignment="Top">
            <RichTextBlock Foreground="White">
                <Paragraph>
                    <Run Text="Away" FontSize="48" FontWeight="Bold"/>
                </Paragraph>
            </RichTextBlock>
        </Viewbox>
        <Rectangle Fill="White" Margin="0,0,-1,0" Stroke="#FF252525" Grid.RowSpan="6" HorizontalAlignment="Right" Width="2" Grid.Column="1"/>
        <Button x:Name="HomeGoalBtn" Margin="320,0,0.667,0.667" Grid.Row="3" Click="button_Click" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2">
            <RichTextBlock IsTextSelectionEnabled="False">
                <Paragraph>
                    <Run Text="Goal" FontSize="48" Foreground="White" />
                </Paragraph>
            </RichTextBlock>
        </Button>
        <Button x:Name="AwayGoalBtn" HorizontalAlignment="Stretch" Margin="0.333,0,320,0.667" Grid.Row="3" VerticalAlignment="Stretch" Click="button_Click" Grid.ColumnSpan="2" Grid.Column="2">
            <RichTextBlock IsTextSelectionEnabled="False">
                <Paragraph>
                    <Run Text="Goal" FontSize="48" Foreground="White" />
                </Paragraph>
            </RichTextBlock>
        </Button>
        <Button x:Name="AwayShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="0.333,24.333,25,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/>
        <Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30,104.333,112,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="3"/>
        <RichTextBlock Margin="10,10,0,0.667" Grid.Row="3" HorizontalAlignment="Left" Width="310">
            <Paragraph TextAlignment="Center">
                <Run Text="{x:Bind ViewModel.HomeScore, Mode=OneWay}" FontSize="200"/>
            </Paragraph>
        </RichTextBlock>
        <RichTextBlock Margin="0,0,0,0.667" Grid.Row="3" Grid.Column="3" HorizontalAlignment="Right" Width="320">
            <Paragraph TextAlignment="Center">
                <Run Text="{x:Bind ViewModel.AwayScore, Mode=OneWay}" FontSize="200"/>
            </Paragraph>
        </RichTextBlock>
        <Button x:Name="HomeShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30.333,24.667,0,14.333" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1" />
        <Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="102,104.333,24.667,15" Grid.Row="4" VerticalAlignment="Stretch"/>
        <Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Left" Margin="30.333,20.167,0,8" Grid.Row="5" VerticalAlignment="Stretch" Width="250" Click="button3_Click"/>

    </Grid>
</ScrollViewer>

这就是我的页面在设计师中的样子：

Screenshot of page in Blend

1 个答案:

答案 0 :(得分：1)

好的......在我看来，布局是过度约束的 - 可能是由于很多Blend安排（那里有很多疯狂的边缘）。如果你想要可预测的布局，我建议将控件放在你希望看到它们的网格部分的边界内，而不是试图使用边距来定位它们。基本上，你想要哪个网格部分元素（Grid.Row =＃Grid.Column =＃），它跨越了多少个部分（Grid.RowSpan =＃Grid.ColumnSpan =＃），哪些边对齐（Horizo​​ntalAlignment =左/右/中心/拉伸VerticalAlignment =左/右/中心/拉伸），你想从边缘有多少空间（边距= ####）？

所以，

<Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform">
    <RichTextBlock Foreground="White">
        <Paragraph>
            <Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/>
        </Paragraph>
    </RichTextBlock>
</Viewbox>

变为

<Viewbox >
    <TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>

此外，我不确定您是否需要视图框，richtextboxes和带有运行的段落，但我不知道您要完成的整个范围。

尝试以下内容：

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
        <Grid MinWidth="800" MinHeight="600" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="69*"/>
                <ColumnDefinition Width="76*"/>
                <ColumnDefinition Width="76*"/>
                <ColumnDefinition Width="69*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="27*"/>
                <RowDefinition Height="62*"/>
                <RowDefinition Height="27*"/>
                <RowDefinition Height="399*"/>
                <RowDefinition Height="340*"/>
                <RowDefinition Height="105*"/>
            </Grid.RowDefinitions>

            <Viewbox >
                <TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
            </Viewbox>
            <Viewbox Grid.Column="3">
                <TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
            </Viewbox>
            <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="1" >
                <TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
            </Button>
            <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="2" >
                <TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
            </Button>
            <Button x:Name="HomeShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch"  Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1"/>
            <Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="0"/>
            <Button x:Name="AwayShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch"  Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/>
            <Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="3"/>
            <TextBlock Text="24" Grid.Row="3" FontSize="200" HorizontalAlignment="Left" VerticalAlignment="Center" />
            <TextBlock Text="12" Grid.Row="3" Grid.Column="3" FontSize="200" HorizontalAlignment="Right" VerticalAlignment="Center" />
            <Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Stretch" Margin="15" Grid.Row="5" VerticalAlignment="Stretch" />

        </Grid>
    </ScrollViewer>
相关问题
最新问题