Home > Metro App, win8 > Customizing GridView Items in Metro App

Customizing GridView Items in Metro App

This is a short post on customizing height and width of the items in GridView. by default if we use a WrapGrid we get items as bunch of tiles.

We can change the height and width of the tiles by deriving from gridview and overriding PrepareContainerForItemOverride method like below. In the code I am making the tile double the width if the city is “City 4″.  Ofcourse we can add properties and not hardcode stuff like shown
public class MyGridView : GridView
{
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
var obj = item as Person;
var gi = element as GridViewItem;
if (obj.City == “City 4″)
{
gi.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 2);
gi.Background = new SolidColorBrush(Colors.Beige);
gi.Foreground = new SolidColorBrush(Colors.Black);
gi.FontSize = 22;
}
base.PrepareContainerForItemOverride(gi, item);
}
}

Here is the xaml and code I used in the BlankPage .

protected override void OnNavigatedTo(NavigationEventArgs e)
{
Random r = new Random();
var items = Enumerable.Range(0, 50).Select(x =>
new Person { Id = x,
Name = “person..” + x.ToString(),
City = “City ” + (r.Next(0,5)).ToString() });
cvs.Source = items;

}

<Page.Resources>         <CollectionViewSource x:Name=”cvs”/>     </Page.Resources>

<local:MyGridView FontSize=”20″ FontFamily=”segoe ui” Margin=”100″ ItemsSource=”{Binding Source={StaticResource cvs}}” >
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment=”Left” >
<TextBlock Text=”{Binding Id}” />
<TextBlock Text=”{Binding Name}” />
<TextBlock Text=”{Binding City}” />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>

<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemHeight=”120″ ItemWidth=”120″ MaximumRowsOrColumns=”6″ Orientation=”Vertical”/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>

</local:MyGridView>

Here is the result.

About these ads
Categories: Metro App, win8 Tags:
  1. sivavarri
    April 4, 2012 at 6:45 am

    Thanks friend, this is very simple and easy to understand . I’ve one query, i.e. I want to display records row wise in gridview by default it display column wise.

    • lee
      April 4, 2012 at 8:57 am

      You can change the orientation to horizontal, in the sample it is vertical.

  2. April 16, 2012 at 12:29 pm

    Do you have a XAML or C# example ? I’m currently trying to change my standard GridView into having a large first tile for each GridView.

    • lee
      April 16, 2012 at 1:16 pm

      No, I dont, the code in the post, should be enough to get started. Are you running into any issues

      • Mahadesh
        April 17, 2012 at 10:45 am

        Hi I dont have the code for VariableSizedWrapGrid. Can you help with that.

  3. Mahadesh
    April 17, 2012 at 10:49 am

    Sorry I forgot to mention that I am trying to achieve this in Windows 7 using WPF. Your example matched my requirement perfectly only issues I am facing is code for VariableSizedWrapGrid.

    • lee
      April 17, 2012 at 1:25 pm

      VariableSizeWrapGrid is part of Windows 8 metro not WPF.

  4. Srini
    May 3, 2012 at 11:23 am

    I have tried the same it works fine with items but when I try to add group header it UI really goes for a toss :( Is there any sample which will show with group header, example : Create a existing GridView Template and implement Variable tile?

  5. May 18, 2012 at 2:55 am

    How can you make each item 100% the height of the grid view so you have rows of tall items?? I can’t figure this out for the life of me:(

    • lee
      May 18, 2012 at 9:25 am

      I did not quite understand, do you have a mockup of what it looks like?

  6. July 20, 2012 at 8:49 pm

    Do you know of a way to only allow certain items to be selected in the GridView? I want the GridView to allow multiple selected items but I want to choose and limit what may be actually selected.

    • lee
      July 20, 2012 at 9:03 pm

      you could set IsHitTestVisible on gridviewitem to false to prevent selection

      • July 20, 2012 at 9:21 pm

        Yea, that would do the trick, thanks…but I actually want to be able to respond to a Tap/Click so turning the HitTest off won’t entirely do.

        I’m thinking I may have to go with an entirely new approach to my problem…thanks for your help and quick response!

  7. Mr Tran
    July 30, 2012 at 8:28 am

    when i press and hold item on gridview. have to error. what happen

    • lee
      July 30, 2012 at 11:26 am

      I am not sure I understood, Do you want an error to occur when they Tap and Hpld?

  8. August 9, 2012 at 7:27 pm

    It really write simply, but very usefully. This sample help me to resolve my project problem. Thanks.

  9. kk
    August 23, 2012 at 1:05 pm

    This may sound very trivial, but I have been trying increase the distance between the two items. I do not need variable size items but just space between the items to increase. If I use Margin, it just adds margin to a cell which becomes visible when you select ie selection rect is on the complete cell including the margin.

    • lee
      August 23, 2012 at 1:16 pm

      You should change the template of GridViewItem.

  1. March 29, 2012 at 6:36 am
  2. May 23, 2012 at 6:48 pm
  3. July 4, 2012 at 1:42 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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: