Ibraheem Osama Mohamed (ابراهيم اسامه محمد)

Welcome to my blog :)

Windows 8 Grid View Tutorial

with 9 comments

I Wrote this post because many people asked me ,How to make a GirdView and How to add Items in the GridView.
You have 2 options.
1)Use MVVM : Data binging like the example in Windows 8 layouts and styles post I posted later Or like in Contoso CookBook
2)Use Gird View Directly in the Designer.
This post will be about use Gird View in the Designer. you’ll be able to make the a Grid View like in this images at the end of the post 🙂


Let’s Start
1)Open Visual Studio — Then New Windows 8 Metro Blank Application.
2)Open The MainPage.xaml . You can add the GridView in the Designer from the Toolbox or add it in the xaml code
3)After you added a GridView let’s think what is a GridView : GridView is a Special Container for GridViewItem and what is the GridViewItem : it’s the child that contains the Grid you want to add to the Grid View.
<GridView>
<!–The First Item–>
<GridViewItem>
<Grid>
<!–what ever you want to add Here–>
</Grid>
</GridViewItem>
<!–The Second Item–>
<GridViewItem>
<Grid>
<!–what ever you want to add Here–>
</Grid>
</GridViewItem>
</GridView>

4)Now we can add the Grid we want to the GridViewItem but before we add the Gird we must consider Windows 8 Metro Style Design in our application
so we will add an Image with a TextBox describing the image or what ever you want

5)How we can make a Grid like this ??
This is the code for the Grid in the image below
<Grid HorizontalAlignment=”Left” Width=”400″ Height=”350″>
<Border Background=”Red”>
<Image Source=”Assets/blueball.png” Stretch=”UniformToFill”/>
</Border>
<StackPanel VerticalAlignment=”Bottom” Background=”Gray”>
<TextBlock Text=”Hello Wolrd” TextAlignment=”Center” Foreground=”White” Style=”{StaticResource TitleTextStyle}” Height=”48″ Margin=”15,0,15,0″/>
</StackPanel>
</Grid>
6)Try the code below and read it again and you’ll notice that
a)You can change the size of the Grid to fit the size you want like in the first 3 pictures in this post (They are the same Grid but there is a different in width and height)
b)If you changed the Border BackGround property the background behind the image will change
c)The StackPanel is used to manage the textbox (if we have more than textbox like textbox for title and another for short description)

7)Now you’ll be able to manage your GridView as you want. and if you need more shapes or styles for your GridView open the StandardStyles.Xaml Class and use it’s styles or create your’s
This is the code for the 2 Grids in the GirdView you are free to copy the code but don’t forget to add your own image and change the image source to your image soruce

<Grid Background=”{StaticResource ApplicationPageBackgroundThemeBrush}”>
<!–The Decleration of the Grid View–>
<GridView
SelectionMode=”None”
IsItemClickEnabled=”True”
ItemTemplate=”{StaticResource Standard500x130ItemTemplate}”>
<!–The first Item in the Grid View–>
<GridViewItem>
<Grid HorizontalAlignment=”Left” Width=”400″ Height=”350″>
<Border Background=”Green”>
<Image Source=”Assets/blueball.png” Stretch=”UniformToFill”/>
</Border>
<StackPanel VerticalAlignment=”Bottom” Background=”Gray”>
<TextBlock Text=”Hello Wolrd” TextAlignment=”Center” Foreground=”White” Style=”{StaticResource TitleTextStyle}” Height=”48″ Margin=”15,0,15,0″/>
</StackPanel>
</Grid>
</GridViewItem>
<!–End of the First Item–>
<!–The second Item in the Grid View–>
<GridViewItem>
<Grid HorizontalAlignment=”Left” Width=”400″ Height=”350″>
<Border Background=”Red”>
<Image Source=”Assets/blueball.png” Stretch=”UniformToFill”/>
</Border>
<StackPanel VerticalAlignment=”Bottom” Background=”Gray”>
<TextBlock Text=”Hello Wolrd” TextAlignment=”Center” Foreground=”White” Style=”{StaticResource TitleTextStyle}” Height=”48″ Margin=”15,0,15,0″/>
</StackPanel>
</Grid>
</GridViewItem>
<!–End of the Second Item–>
</GridView>
<!–End of the Grid View–>
</Grid>

This is the rest of the Windows 8 Tutorial
 Contents :-

1)Hello World.
2)Layouts and Styles.

3)GridView Tutorial
.( Here )
4)Application Menu.(Bottom and Top)
5) Secondary Tiles and Live Tiles
6)Toast Notification.
7)Searching and Sharing.
8)File Pickers , File savers and File Access(Read, Write).
9)Bing Maps.

 

Ibraheem Osama Mohamed
@IbraheemOsamaMo

Advertisements

Written by Ibraheem Osama Mohamed

June 10, 2012 at 5:57 pm

9 Responses

Subscribe to comments with RSS.

  1. […] World Metro Style App Tutorial Contents :- 1)Hello World.( Here ) 2)Layouts and Styles. 3)GridView Tutorial. 4)Application Menu.(Bottom and Top) 5) Secondary Tiles and Live Tiles 6)Toast Notification. […]

  2. […] World. 2)Layouts and Styles.( Here ) 3)GridView Tutorial 34Application Menu.(Bottom and Top) 5) Secondary Tiles and Live Tiles 6)Toast Notification. […]

  3. […] in HTML5. I’ll post a post every 2 days. Contents :- 1)Hello World. 2)Layouts and Styles. 4)Grid View Tutorial 4)Application Menu.(Bottom and Top) 5) Secondary Tiles and Live Tiles 6)Toast Notification. […]

  4. Hello Ibraheem, I’ve followed your tutorial but when I want something to happen when an item is tapped Visual Studio won’t allow me to create an event handler. Do you why this is by any chance?

    Myles

    December 5, 2012 at 10:45 pm

    • Hello Myles,
      I created an event handler for tapped event and it is going fine 🙂 here is the code

      Xaml

      C#

      private void GridViewItem_Tapped_1(object sender, TappedRoutedEventArgs e)
      {
      (new Windows.UI.Popups.MessageDialog(“Hi Myles”)).ShowAsync();
      }

      Try this code and it’ll work for you 🙂
      Regards,

      Ibraheem Osama Mohamed

      December 6, 2012 at 10:22 am

      • I can’t write the xaml here in the comment part but add a tapped event in the gridviewitem

        GridViewItem Tapped=”GridViewItem_Tapped_1″
        And if you don’t get it give me your email and I’ll send you the project

        Ibraheem Osama Mohamed

        December 6, 2012 at 10:24 am

      • How is it done in Visual Basic?

        Myles

        December 7, 2012 at 9:58 pm

      • Please send me the project (preferably in Visual Basic)
        My email is: m.findlay93@gmail.com

        Myles

        December 7, 2012 at 10:01 pm

    • Hi Myles,
      Check you inbox 🙂 I sent you the project in VB

      Ibraheem Osama Mohamed

      December 7, 2012 at 10:20 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: