How to populate GridView with buttons? - xaml

Question

Want to populate the gridview with buttons that all share the same ICommand.
So far I have this:
<DataTemplate x:Key="DataTemplate1">
<Button Content="{Binding Name}"
Command="{Binding NumberCommand}">
</Button>
</DataTemplate>
<GridView SelectionMode="None"
ItemContainerStyle="{StaticResource GridViewItemStyle1}"
ItemTemplate="{StaticResource DataTemplate1}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"
MaximumRowsOrColumns="3">
</WrapGrid>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridViewItem Content="1"></GridViewItem>
<GridViewItem Content="2"></GridViewItem>
<GridViewItem Content="3"></GridViewItem>
<GridViewItem Content="4"></GridViewItem>
<GridViewItem Content="5"></GridViewItem>
<GridViewItem Content="6"></GridViewItem>
<GridViewItem Content="7"></GridViewItem>
<GridViewItem Content="8"></GridViewItem>
<GridViewItem Content="9"></GridViewItem>
</GridView>
The problem is the GridViewItems are just showing up as text and not buttons. What am I doing wrong?

Answer 1

Instead of setting the items in the Xaml bind them to a collection. With your DataTemplate's binding you'll need a class with Name and NumberCommand properties:
class MyData
{
public string Name { get; set;}
public ICommand MyCommand { get; set; }
}
Then create a collection of the data:
ObservableCollection<MyData> data;
And bind it to the GridView. For simplicity I gave the Grid a name here and set the ItemsSource directly. That's likely good enough for your scenario. You'll obviously want to hook up the Command too, and for more complicated scenarios you could bind via a CollectionViewSource.
public MainPage()
{
this.InitializeComponent();
data = new ObservableCollection<MyData>();
for (int i=1;i<10;i++)
{
data.Add(new MyData() { Name = i.ToString() });
}
myGrid.ItemsSource = data;
}