Question

我正在制作适用于Windows Phone 8.1的应用程序，而且我遇到了一些问题，包括元素在屏幕上以不同分辨率显示的方式。

我的问题是：如何显示两列X行，其中列的宽度将拉伸到屏幕的一侧，无论屏幕大小（对于手机）

[1]只是为了给你一个直观的例子，这就是我想要的样子，无论屏幕大小（图片编号[1]）:(下面有更多行，但我为此示例删除了它们）。

[2]但是，在较大的屏幕上（这种情况下为6英寸），内容不会一直伸展，如图片编号[2]所示。

[3]我尝试在内容周围添加一个Viewbox，但结果就像imgur链接中的图片编号[3]（无法上传多个链接）。它延伸出来，但它并没有给我两列。我也尝试过为Viewbox设置最大宽度，但它并没有改变任何内容。

到目前为止

我的 XAML 代码是：

    <ScrollViewer>
    <Grid>
        <GridView x:Name="ContentGrid" Margin="0,5,0,5" HorizontalAlignment="Center">
            <GridView.Header>
                <TextBlock TextWrapping="Wrap" Margin="0,5,0,5" HorizontalAlignment="Center" Text="Application name" Style="{StaticResource HeaderStyle}" />
            </GridView.Header>

            <!-- Row 1 -->
            <GridViewItem Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
                <Grid>
                    <Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Angle.png" Margin="0,-9,5,9" />
                    <TextBlock Text="Angle" Style="{StaticResource TextBlockStyle}" />
                </Grid>
            </GridViewItem>
            <GridViewItem Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
                <Grid>
                    <Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Area.png" Margin="0,-9,5,9" />
                    <TextBlock Text="Area" Style="{StaticResource TextBlockStyle}" />
                </Grid>
            </GridViewItem>

            <!-- Row 2 -->
            <GridViewItem Style="{StaticResource GridStyleEven}">
                <Grid>
                    <Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Fuel_Consumption.png" Margin="0,-9,5,9" />
                    <TextBlock Text="Consumption" Style="{StaticResource TextBlockStyle}" Margin="10,0,0,-23" Width="188" />
                </Grid>
            </GridViewItem>
            <GridViewItem Tapped="GridViewItem_Tapped_2" Style="{StaticResource GridStyleEven}">
                <Grid>
                    <Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Currency.png" Margin="0,-9,5,9" />
                    <TextBlock Text="Currency" Style="{StaticResource TextBlockStyle}" />
                </Grid>
            </GridViewItem>
        </GridView>
    </Grid>
</ScrollViewer>

谢谢！

Answer 1

您可以在

后面的代码中更改GridViewItems中的一个的大小

e.x。

public MainPage()
    {
       //....


        var bounds = Window.Current.Bounds;
        double height = bounds.Height;
        double width = bounds.Width;

        gridViewitem1.Width = width * 0.5f;
        ContentGrid.Width = width;
    }

我已经测试了所有尺寸。

编辑：

您也必须更改ContentGrid的宽度。

删除网格，位于Scrollviewer中

<ScrollViewer>

    <GridView x:Name="ContentGrid" Margin="0,5,0,5" HorizontalAlignment="Center">
        <GridView.Header>
            <TextBlock TextWrapping="Wrap" Margin="0,5,0,5" HorizontalAlignment="Center" Text="Application name" Style="{StaticResource HeaderStyle}" />
        </GridView.Header>

        <!-- Row 1 -->
        <GridViewItem x:Name="gridViewItem1" Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
            <Grid>
                <Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Angle.png" Margin="0,-9,5,9" />
                <TextBlock Text="Angle" Style="{StaticResource TextBlockStyle}" />
            </Grid>
        </GridViewItem>
        <GridViewItem Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
            <Grid>
                <Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Area.png" Margin="0,-9,5,9" />
                <TextBlock Text="Area" Style="{StaticResource TextBlockStyle}" />
            </Grid>
        </GridViewItem>

        <!-- Row 2 -->
        <GridViewItem Style="{StaticResource GridStyleEven}">
            <Grid>
                <Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Fuel_Consumption.png" Margin="0,-9,5,9" />
                <TextBlock Text="Consumption" Style="{StaticResource TextBlockStyle}" Margin="10,0,0,-23" Width="188" />
            </Grid>
        </GridViewItem>
        <GridViewItem Tapped="GridViewItem_Tapped_2" Style="{StaticResource GridStyleEven}">
            <Grid>
                <Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Currency.png" Margin="0,-9,5,9" />
                <TextBlock Text="Currency" Style="{StaticResource TextBlockStyle}" />
            </Grid>
        </GridViewItem>
    </GridView>

使用适用于WP 8.1的XAML调整元素大小以适合当前屏幕大小

1 个答案: