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
