Currently working on a Windows 8 app for an important client, I will be writing about small issues, tips and tricks, ideas and whatever occurs to me during
the development and
the integration of this app. When working with a GridView, it is quite common to use a VariableSizedWrapGrid as
the ItemsPanel. This creates a nice flowing layout which will auto-adapt for various resolutions. This is ideal when you want to build views like
the Windows 8 start menu. However immediately we notice that
the Start menu allows to place items on one column (Smaller) or two columns (Larger). This switch happens through
the AppBar. So how do we implement that in our app? Using ColumnSpan and RowSpan When you use a VariableSizedWrapGrid directly in your XAML, you can attach
the VariableSizedWrapGrid.ColumnSpan and VariableSizedWrapGrid.RowSpan attached properties directly to an item to create
the desired effect. For instance this code create this output (shown in Blend but it runs just
the same): <VariableSizedWrapGrid ItemHeight="100"
ItemWidth="100"
Width="200"
Orientation="Horizontal">
<Rectangle Fill="Purple" />
<Rectangle Fill="Orange" />
<Rectangle Fill="Yellow" VariableSizedWrapGrid.ColumnSpan="2" />
<Rectangle Fill="Red"
VariableSizedWrapGrid.ColumnSpan="2"
VariableSizedWrapGrid.RowSpan="2" />
<Rectangle Fill="
Green" VariableSizedWrapGrid.RowSpan="2" />
<Rectangle Fill="Blue" />
<Rectangle Fill="LightGray" />
</VariableSizedWrapGrid>
Using
the VariableSizedWrapGrid as ItemsPanel
When you use a GridView however, you typically bind
the ItemsSource property to a collection, for example in a viewmodel. In that case, you want to be able to switch
the ColumnSpan and RowSpan depending on properties on
the item. I tried to find a way to bind
the VariableSizedWrapGrid.ColumnSpan attached property on
the GridView’s ItemContainerStyle template to an observable property on
the item, but it didn’t work. Instead, I decided to use a StyleSelector to switch
the GridViewItem’s style. Here’s how:
First I added my two GridViews to my XAML as follows:
<Page.Resources>
<local:MainViewModel x:Key="Main" />
<DataTemplate x:Key="DataTemplate1">
<Grid Background="{Binding Brush}">
<TextBlock Text="{Binding BrushCode}" />
</Grid>
</DataTemplate>
</Page.Resources>
<Page.DataContext>
<Binding Source="{StaticResource Main}" />
</Page.DataContext>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
Margin="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<GridView ItemsSource="{Binding Items}"
ItemTemplate="{StaticResource DataTemplate1}"
VerticalAlignment="Top">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemHeight="150"
ItemWidth="150" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
<GridView Grid.Column="1"
ItemsSource="{Binding Items}"
ItemTemplate="{StaticResource DataTemplate1}"
VerticalAlignment="Top">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemHeight="100"
ItemWidth="100" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
The MainViewModel looks like this:
public class MainViewModel
{
public IList<Item> Items
{
get;
private set;
}
public MainViewModel()
{
Items = new List<Item>
{
new Item
{
Brush = new SolidColorBrush(Colors.Red)
},
new Item
{
Brush = new SolidColorBrush(Colors.Blue)
},
new Item
{
Brush = new SolidColorBrush(Colors.Green),
},
// And more...
};
}
}
As for
the Item class, I am using an MVVM Light ObservableObject but you can use your own simple implementation of INotifyPropertyChanged of course:
public class Item : ObservableObject
{
public const string ColSpanPropertyName = "ColSpan";
private int _colSpan = 1;
public int ColSpan
{
get
{
return _colSpan;
}
set
{
Set(ColSpanPropertyName, ref _colSpan, value);
}
}
public SolidColorBrush Brush
{
get;
set;
}
public string BrushCode
{
get
{
return Brush.Color.ToString();
}
}
}
Then I copied
the GridViewItem’s style locally. To do this, I use Expression Blend’s functionality. It has
the disadvantage to copy a large portion of XAML to your application, but
the HUGE advantage to allow you to change
the look and feel of your GridViewItem everywhere in
the application. For example, you can change
the selection chrome,
the item’s alignments and many other properties. Actually everytime I use a ListBox, ListView or any other data control, I typically copy
the item style to a resource dictionary in my application and I tweak it.
Note that Blend for Windows 8 apps is automatically installed with every edition of Visual Studio 2012 (including Express) so you have no excuses anymore not to use Blend :)
Open MainPage.xaml in Expression Blend by right clicking on
the MainPage.xaml file in
the Solution Explorer and selecting Open in Blend from
the context menu. Note that
the items do not look very nice!
The reason is that
the default ItemContainerStyle sets
the content’s alignment to “Center” which I never quite understood. Seems to me that you rather want
the content to be stretched, but anyway it is easy to change.
Right click on
the GridView on
the left and select Edit Additional Templates, Edit Generated Item Container (ItemContainerStyle), Edit a Copy.
In
the Create Style Resource dialog, enter
the name “DefaultGridViewItemStyle”, select “Application” and press OK.
Side note 1: You need to save in a global resource dictionary because later we will need to retrieve that Style from a global location.
Side note 2": I would rather copy
the style to an external resource dictionary that I link into
the App.xaml file, but I want to keep things simple here.
Blend switches in Template edit mode.
The template you are editing now is inside
the ItemContainerStyle and will govern
the appearance of your items. This is where, for instance,
the “checked” chrome is defined, and where you can alter it if you need to. Note that you can reuse this style for all your GridViews even if you use a different DataTemplate for your items. Makes sense? I probably need to think about writing another blog post dedicated to
the ItemContainerStyle :)
In
the breadcrumb bar on top of
the page, click on
the style icon.
The property we want to change now can be changed in
the Style instead of
the Template, which is a better idea.
Blend is not in Style edit mode, as you can see in
the Objects and Timeline pane. In
the Properties pane, in
the Search box, enter
the word “content”. This will filter all
the properties containing that partial string, including
the two we are interested in: HorizontalContentAlignment and VerticalContentAlignment.
Set these two values to “Stretch” instead of
the default “Center”.
Using
the breadcrumb bar again, set
the scope back to
the Page (by clicking on
the first crumb on
the left). Notice how
the items are now showing as squares in
the first GridView.
We will now use
the same ItemContainerStyle for
the second GridView. To do this, right click on
the second GridView and select Edit Additional Templates, Edit Generate Item Container, Apply Resource, DefaultGridViewItemStyle.
The page now looks nicer:
And now for
the ColumnSpan!
So now, let’s change
the ColumnSpan property. First, let’s define a new Style that inherits
the ItemContainerStyle we created before.
Make sure that you save everything in Blend by pressing Ctrl-Shift-S.
Open App.xaml in Visual Studio.
Below
the newly created DefaultGridViewItemStyle resource, add
the following style:
<Style x:Key="WideGridViewItemStyle"
TargetType="GridViewItem"
BasedOn="{StaticResource DefaultGridViewItemStyle}">
<Setter Property="VariableSizedWrapGrid.ColumnSpan"
Value="2" />
</Style>
Add a new class to
the project, and name it MainItemStyleSelector.
Implement
the class as follows:
public class MainItemStyleSelector : StyleSelector
{
protected override Style SelectStyleCore(object item, DependencyObject container)
{
var i = (Item)item;
if (i.ColSpan == 2)
{
return Application.Current.Resources["WideGridViewItemStyle"] as Style;
}
return Application.Current.Resources["DefaultGridViewItemStyle"] as Style;
}
}
In MainPage.xaml, add a resource to
the Page.Resources section:
<local:MainItemStyleSelector x:Key="MainItemStyleSelector" />
In MainPage.xaml, replace
the ItemContainerStyle property on
the first GridView with
the ItemContainerStyleSelector property, pointing to
the StaticResource we just defined.
<GridView ItemsSource="{Binding Items}"
ItemTemplate="{StaticResource DataTemplate1}"
VerticalAlignment="Top"
ItemContainerStyleSelector="{StaticResource MainItemStyleSelector}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemHeight="150"
ItemWidth="150" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Do
the same for
the second GridView as well.
Finally, in
the MainViewModel, change
the ColumnSpan property on
the 3rd Item to 2.
new Item
{
Brush = new SolidColorBrush(Colors.Green),
ColSpan = 2
},
Running
the application now creates
the following image, which is what we wanted. Notice how
the green item is now a “wide tile”.
You can also experiment by creating different Styles, all inheriting
the DefaultGridViewItemStyle and using different values of RowSpan for instance. This will allow you to create any layout you want, while leaving
the heavy lifting of “flowing
the layout” to
the GridView control.
What about changing these values dynamically?
Of course as we can see in
the Start menu, it would be nice to be able to change
the ColumnSpan and maybe even
the RowSpan values at runtime. Unfortunately at this time I have not found a good way to do that. I am investigating however and will make sure to post a follow up when I find what I am looking for!
Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn
