CODEWITHSUNDEEP
xamlgridviewwindows-8.1
jrharshath
jrharshath

Reputation: 26583

XAML gridview items expanding to full width of GridView

I'm new at developing apps for Windows 8, and its my first encounter with XAML.

I'm trying to build a GridView that will show a grid of 150x150 tiles. The GridView's XAML looks like this:

<GridView Grid.Row="2" Grid.Column="0"
    x:Name="ClocksContainer" 
    VerticalAlignment="Top"
    Height="190" 
    Margin="80,20,80,0"
    HorizontalContentAlignment="Left">

    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid Height="150" Margin="75,0,940,0" Width="150" Background="#FF971485">
                <TextBlock Text="12:23pm" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Width="130" FontSize="32" Foreground="White"/>
                <TextBlock Text="23 February, 2014" HorizontalAlignment="Left" Margin="10,48,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" RenderTransformOrigin="-0.444,0.385" Foreground="#B2FFFFFF"/>
                <TextBlock Text="29° / 20°" HorizontalAlignment="Left" Margin="102,128,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Foreground="#B2FFFFFF" TextAlignment="Right" FontSize="10"/>
                <TextBlock Text="Party Cloudy" HorizontalAlignment="Left" Margin="10,128,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Foreground="#B2FFFFFF" FontSize="10"/>
                <Border BorderBrush="{x:Null}" HorizontalAlignment="Left" Height="45" Margin="10,78,0,0" VerticalAlignment="Top" Width="130">
                    <TextBlock Text="Chennai, India" HorizontalAlignment="Left" TextWrapping="Wrap"  VerticalAlignment="Bottom" Foreground="White" Width="130" FontSize="14"/>
                </Border>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>  
    <GridView.Items>
        <x:String>test</x:String>
        <x:String>test</x:String>
    </GridView.Items>   
</GridView>

However, in the output I'm finding that my grid items are stretching to the width of the grid itself!

To illustrate, here are two cropped screenshots of the rendered GridView.

The first screenshot shows how a grid item expands to the width of the GridView. (I've added the red outline myself in photoshop). The first grid item expanding to occupy the full width

The second screenshot is of the gridview scrolled ahead to reveal teh second item. The red outline on the first item has been replicated via photoshop. The second item's background is a darker colour because it is mouse-over-ed. the same gridview after scrolling ahead a little

My Question: How do I make the grid items not expand to the width? The intended output is this:

Intended output

Upvotes: 0

Views: 756

Answers (1)

Farhan Ghumra
Farhan Ghumra

Reputation: 15296

Remove Margin="75,0,940,0" from GridView's ItemTemplate

Upvotes: 1

Related Questions