Grid list

Grid list

The grid list is not a control. It is template for a ListBox to render it as a grid list. You will find details and usage scenarios in the Material Design specification.

Screenshots

Code example

<ListBox Style="{StaticResource MaterialDesignGridList}" ItemsSource="{Binding Path=Items, Mode=OneTime}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="8">
                <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="64" Height="64">
                    <TextBlock DockPanel.Dock="Bottom" FontSize="12" Text="{Binding Path=Label, Mode=OneTime}"
                               Margin="0,8,0,0" HorizontalAlignment="Center" />
                    <materialDesign:PackIcon Kind="{Binding Path=Kind, Mode=OneTime}"
                                             Height="32" Width="32"
                                             HorizontalAlignment="Center" VerticalAlignment="Center" />
                </DockPanel>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

public class GridListViewModel : ViewModel
{
    private List<GridListItem> m_items;

    public List<GridListItem> Items
    {
        get
        {
            return m_items;
        }
    }

    public GridListViewModel()
        : base()
    {
        m_items = new List<GridListItem>()
        {
            new GridListItem() { Kind = PackIconKind.Android, Label = "Android" },
            new GridListItem() { Kind = PackIconKind.Windows, Label = "Windows" },
            new GridListItem() { Kind = PackIconKind.AppleIos, Label = "iOS" }
        };
    }
}

public class GridListItem : ViewModel
{
    public PackIconKind Kind { get; set; }
    public string Label { get; set; }

    public GridListItem() { }
}