Is there a XAML equivalent to CSS's grid-area? - wpf

Question

Does WPF XAML have an equivalent to CSS's grid-area? I.e., a way to create a definition of Row, Column, RowSpan, ColumnSpan values, give that definition an identifier, and then use those values via the identifier?
I am imagining something like:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.AreaDefinitions>
<AreaDefinition Row="0" Column="0" ColumnSpan="2" Name="Header" />
<AreaDefinition Row="1" Column="0" Name="Navigation" />
<AreaDefinition Row="1" Column="1" Name="Main" />
<AreaDefinition Row="2" Column="0" ColumnSpan="2" Name="Footer" />
</Grid.AreaDefinitions>
<TextBlock Grid.Area="Header" Text="Header" />
<TextBlock Grid.Area="Navigation" Text="Navigation" />
<TextBlock Grid.Area="Main" Text="Main" />
<TextBlock Grid.Area="Footer" Text="Footer" />
</grid>

Answer 1

WPF doesn't support this directly, but it's easy enough to implement with dependency properties and attached properties. First you'll need a class for your AreaDefinition:
public class AreaDefinition : DependencyObject
{
public int Row
{
get { return (int)GetValue(RowProperty); }
set { SetValue(RowProperty, value); }
}
public static readonly DependencyProperty RowProperty =
DependencyProperty.Register("Row", typeof(int), typeof(AreaDefinition), new PropertyMetadata(0));
public int Column
{
get { return (int)GetValue(ColumnProperty); }
set { SetValue(ColumnProperty, value); }
}
public static readonly DependencyProperty ColumnProperty =
DependencyProperty.Register("Column", typeof(int), typeof(AreaDefinition), new PropertyMetadata(0));
public int RowSpan
{
get { return (int)GetValue(RowSpanProperty); }
set { SetValue(RowSpanProperty, value); }
}
public static readonly DependencyProperty RowSpanProperty =
DependencyProperty.Register("RowSpan", typeof(int), typeof(AreaDefinition), new PropertyMetadata(1));
public int ColumnSpan
{
get { return (int)GetValue(ColumnSpanProperty); }
set { SetValue(ColumnSpanProperty, value); }
}
public static readonly DependencyProperty ColumnSpanProperty =
DependencyProperty.Register("ColumnSpan", typeof(int), typeof(AreaDefinition), new PropertyMetadata(1));
public string Name
{
get { return (string)GetValue(NameProperty); }
set { SetValue(NameProperty, value); }
}
public static readonly DependencyProperty NameProperty =
DependencyProperty.Register("Name", typeof(string), typeof(AreaDefinition), new PropertyMetadata(String.Empty));
}
You'll also need a class to hold a collection of these, in much the same way that Grid.Columns is a collection of type ColumnDefinitionCollection:
public class AreaDefinitionCollection : Collection<AreaDefinition>
{
}
Last, you'll need a class for your attached properties, which I'll call GridHelper. This class will need to provide two APs, one for your Grids (GridHelper.AreaDefinitions) and another for the Grid's children (GridHelper.Area). The change handler for GridHelper.AreaProperty is where all the magic happens, it simply updates the associated Grid APs whenever the Area changes:
public static class GridHelper
{
public static AreaDefinitionCollection GetAreaDefinitions(DependencyObject obj)
{
return (AreaDefinitionCollection)obj.GetValue(AreaDefinitionsProperty);
}
public static void SetAreaDefinitions(DependencyObject obj, AreaDefinitionCollection value)
{
obj.SetValue(AreaDefinitionsProperty, value);
}
public static readonly DependencyProperty AreaDefinitionsProperty =
DependencyProperty.RegisterAttached("AreaDefinitions", typeof(AreaDefinitionCollection), typeof(Grid), new PropertyMetadata(new AreaDefinitionCollection()));
public static string GetArea(DependencyObject obj)
{
return (string)obj.GetValue(AreaProperty);
}
public static void SetArea(DependencyObject obj, string value)
{
obj.SetValue(AreaProperty, value);
}
public static readonly DependencyProperty AreaProperty =
DependencyProperty.RegisterAttached("Area", typeof(string), typeof(UIElement), new PropertyMetadata(String.Empty, OnAreaChanged));
private static void OnAreaChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
UIElement child = d as UIElement;
if (child == null)
return;
Grid grid = VisualTreeHelper.GetParent(child) as Grid;
if (grid == null)
return;
AreaDefinitionCollection areas = GetAreaDefinitions(grid);
if (areas == null)
return;
// the performance of this bit could be improved by giving AreaDefinitionCollection a hash table implementation, oh well.
var areaDefinition = areas.FirstOrDefault(a => a.Name == e.NewValue.ToString());
if (areaDefinition == null)
return;
// update the grid elements
Grid.SetRow(child, areaDefinition.Row);
Grid.SetRowSpan(child, areaDefinition.RowSpan);
Grid.SetColumn(child, areaDefinition.Column);
Grid.SetColumnSpan(child, areaDefinition.ColumnSpan);
}
}
With this in place you can implement the functionality you're after, with some minor modifications:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<g:GridHelper.AreaDefinitions>
<g:AreaDefinition Row="0" Column="0" ColumnSpan="2" Name="Header" />
<g:AreaDefinition Row="1" Column="0" Name="Navigation" />
<g:AreaDefinition Row="1" Column="1" Name="Main" />
<g:AreaDefinition Row="2" Column="0" ColumnSpan="2" Name="Footer" />
</g:GridHelper.AreaDefinitions>
<TextBlock g:GridHelper.Area="Header" Text="Header" />
<TextBlock g:GridHelper.Area="Navigation" Text="Navigation" />
<TextBlock g:GridHelper.Area="Main" Text="Main" />
<TextBlock g:GridHelper.Area="Footer" Text="Footer" />
</Grid>
If you don't like the g: namespace prefix then you can get rid of it, as specified in this article, by adding the following line to your AssemblyInfo.cs file:
[assembly: XmlnsDefinition("http://schemas.microsoft.com/winfx/2006/xaml/presentation", "YourGridHelperNamespace")]

Answer 2

There isn't anything exactly like that, but there is a feature that could be used similarly. Styles are "a convenient way to apply a set of property values to multiple elements". Whever you have a number of elements which all need to have the same properties set to the same value, you can define a Style, like so:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style x:Key="AStyle" TargetType="TextBlock">
<Setter Property="Grid.Row" Value="1"/>
<Setter Property="Grid.Column" Value="1"/>
</Style>
</Grid.Resources>
<TextBlock Style="{StaticResource AStyle}" Text="Header" />
</Grid>
In your example code, this would be useless, because none of the TextBlocks share a complete set of values- you don't save any redundant code because it's only used once anyway. But a grid-area, if it existed, would be equally useless for the same reason.