Search code examples
xamlgridviewvisual-studio-2013windows-phone-8.1screen-size

Resize elements to fit the current screensize using XAML for WP 8.1

I'm making an app for Windows Phone 8.1 and I've run into some troubles with how the elements are displayed on the screen in different resolutions.

My question is: How can I display two columns with X number of rows, where the width of the columns will stretch to the side of the screen, no matter the screen size (for phones).

[1] Just to give you a visual example, this is how I want it to look, no matter the screen size (picture number [1]): (There are more rows below, but I removed them for this example).

https://i.sstatic.net/BNGMP.jpg

[2] However, on bigger screens (this case a 6-inch), the content does not stretch all the way out, as shown in picture number [2].

[3] I've tried adding a Viewbox around the content, but then the result is like picture number [3] in the imgur link (couldn't upload more than one link). It stretches out, but it doesn't give me two columns. I've tried setting a max width for the Viewbox as well, but it doesn't change anything.

My XAML code so far is:

    <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>

Thank you!

Solution

  • You can change the size of one from the GridViewItems in code behind

    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;
    }

    I've tested it on all sizes.

    EDIT:

    • You must change the width of the ContentGrid, too.

    • And remove the grid, wich is in the 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>