Windows Phone - Customizing GridView Max Columns

Question

I'm new to Windows Phone programming. I want to create a gridview like the following:

I've done the <DataTemplate>, so I've already done the items and their buttons. But I can't set 2 columns for the grid using MaximumRowsOrColumns, because it limits my grid with only 2 rows (can be ilimited rows, but I need to have only 2 columns). Coding as below was the closest I made:

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <ItemsWrapGrid Orientation="Vertical" MaximumRowsOrColumns="2"/>
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

EDIT: added <DataTemplate>code:

<DataTemplate x:Key="gridClassItem">

        <Grid>

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="14.96"/>
             </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="14.96" />
            </Grid.ColumnDefinitions>

            <Button x:Name="btnItem" Grid.Row="0" Grid.Column="0"
                            BorderThickness="0 0 0 2" Opacity="100" 
                            Height="70.4" Width="174.24"
                            Background="#FF6B33"
                            Click="btnItem_OnClick">

                <TextBlock x:Name="txtItem" FontSize="38" Foreground="#5B1F08" Opacity="100" Margin="0" Text="{Binding Name}" TextAlignment="Center"/>
            </Button>

            <Grid Grid.Row="1" Grid.Column="0" Margin="0, -8, 0, 0" Height="52.8">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="86.24"/>
                    <ColumnDefinition Width="86.24"/>
                </Grid.ColumnDefinitions>

                <Button x:Name="btn1" Click="btn1_OnClick"
                                Grid.Row="0" Grid.Column="0"
                                BorderBrush="#FFFFFF" BorderThickness="0 0 1.76 0"
                                Margin="-10, -15, 0, 0"
                                DataContext="{Binding}">
                    <Button.Background>
                        <ImageBrush ImageSource="\Assets\bt1.png" Stretch="UniformToFill"/>
                    </Button.Background>

                </Button>

                <Button x:Name="btn2" Click="btn2_OnClick"
                                Grid.Row="0" Grid.Column="1"
                                BorderBrush="#FFFFFF" BorderThickness="1.76 0 0 0"
                                Margin="0, -15, -2.5, 0"
                                DataContext="{Binding}">
                    <Button.Background>
                        <ImageBrush ImageSource="\Assets\bt2.png" Stretch="UniformToFill"/>
                    </Button.Background>

                </Button>

            </Grid>

            <Rectangle Grid.Row="2" Grid.Column="1" Fill="#FFFFFF" Margin="0"/>

        </Grid>
    </DataTemplate>

Any suggestions?

By the way, any idea how could i change the GridViewItem's background color? I was thinking about a geometric series, like the first item will be orange, the followings - always counting by two - will be green and then orange again. But I don't know how to implement it.

Answer 1

Well, since I couldn't find a way to do it using XAML, I did it at C#. Below is my solution, if someone need something looked like:

enum GridItemColor
{
    NONE,
    BLUE,
    RED
};

//Some event to populate a list
...
myGrid.Items.Clear();
GridItemColor lastColor = GridItemColor.NONE;

foreach (MyModel item in myList)
{
    if (lastColor == GridItemColor.NONE || lastColor == GridItemColor.BLUE)
    {
        myGrid.Items.Add(FormatGridViewItem(item, GridItemColor.RED));
        lastColor = GridItemColor.RED;
    }
    else if (lastColor == GridItemColor.RED)
    {
        myGrid.Items.Add(FormatGridViewItem(item, GridItemColor.BLUE));
        lastColor = GridItemColor.BLUE;
     }
}

...

private Grid FormatGridViewItem(MyModel currentItem, GridItemColor itemColor)
    {
        Grid gridItem = new Grid();

        #region Grid Item Row Definition and GridItem Setup

        RowDefinition itemRowDef = new RowDefinition();
        RowDefinition minorButtonRowDef = new RowDefinition();

        itemRowDef.Height = new GridLength(72);
        minorButtonRowDef.Height = new GridLength(49);
        gridItem.RowDefinitions.Add(classPlanRowDef);
        gridItem.RowDefinitions.Add(minorButtonRowDef);

        gridItem.MaxWidth = 196;
        gridItem.Width = 196;
        gridItem.Margin = new Thickness(0, 0, 24, 24);

        #endregion

        #region Button Item

        Button btnItem = new Button();
        btnItem.BorderThickness = new Thickness(0);
        btnItem.Margin = new Thickness(-3, 0, 0, 0);
        btnItem.Opacity = 100;
        btnItem.MaxWidth = 203;
        btnItem.MinWidth = 203;
        btnItem.Height = 78;
        btnItem.DataContext = currentItem;

        if (itemColor == GridItemColor.RED)
            btnItem.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 255, 107, 51));
        else
            btnItem.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 23, 229, 192));

        btnItem.Click += btnItem_Click;

        TextBlock txtItem = new TextBlock();
        txtItem.FontSize = 40;

        if (itemColor == GridItemColor.RED)
            txtItem.Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 91, 31, 8));
        else
            txtItem.Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 3, 97, 80));

        txtItem.Opacity = 100;
        txtItem.TextAlignment = TextAlignment.Center;
        txtItem.Text = currentItem.Name;
        txtItem.TextTrimming = TextTrimming.CharacterEllipsis;

        btnItem.Content = txtItem;
        gridItem.Children.Add(btnItem);
        Grid.SetRow(btnItem, 0);

        #endregion

        #region Grid Minor Buttons Row

        Grid minorButtonsRow = new Grid();
        minorButtonsRow.Margin = new Thickness(0);

        if (itemColor == GridItemColor.RED)
            minorButtonsRow.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 255, 107, 51));
        else
            minorButtonsRow.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 23, 229, 192));

        ColumnDefinition btnOneColumnDef = new ColumnDefinition();
        ColumnDefinition btnTwoColumnDef = new ColumnDefinition();

        btnOneColumnDef.Width = new GridLength(98);
        btnTwoColumnDef.Width = new GridLength(98);

        minorButtonsRow.ColumnDefinitions.Add(btnOneColumnDef);
        minorButtonsRow.ColumnDefinitions.Add(btnTwoColumnDef);

        // Button One
        Button btnOne = new Button();
        btnOne.BorderBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 255, 255, 255));
        btnOne.BorderThickness = new Thickness(0);
        btnOne.MinWidth = 97;
        btnOne.MaxWidth = 97;
        btnOne.MinHeight = 48;
        btnOne.MaxHeight = 48;
        btnOne.Margin = new Thickness(0, 0, 1, 0);
        btnOne.DataContext = currentItem;
        btnOne.Click += btnOne_Click;

        ImageBrush imgOne = new ImageBrush();
        BitmapImage bitImg;
        if (itemColor == GridItemColor.RED)
        {
            bitImg = new BitmapImage(new Uri("ms-appx:/Assets/Icons/btOneRED.png", UriKind.RelativeOrAbsolute));
            btnOne.Style = (Style)this.Resources["btnOneRedStyle"];
        }
        else
        {
            bitImg = new BitmapImage(new Uri("ms-appx:/Assets/Icons/btOneBLUE.png", UriKind.RelativeOrAbsolute));
            btnOne.Style = (Style)this.Resources["btnOneBlueStyle"];
        }

        imgOne.ImageSource = bitImg;
        imgOne.Stretch = Stretch.UniformToFill;
        btnOne.Background = imgOne;
        minorButtonsRow.Children.Add(btnOne);
        Grid.SetRow(btnOne, 0);
        Grid.SetColumn(btnOne, 0);
        // END Button One

        // Button Two
        Button btnTwo = new Button();
        btnTwo.BorderBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 255, 255, 255));
        btnTwo.BorderThickness = new Thickness(0);
        btnTwo.MinWidth = 97;
        btnTwo.MaxWidth = 97;
        btnTwo.MinHeight = 48;
        btnTwo.MaxHeight = 48;
        btnTwo.Margin = new Thickness(1, 0, 0, 0);
        btnTwo.DataContext = currentItem;
        btnTwo.Click += btnTwo_Click;

        ImageBrush imgTwo = new ImageBrush();
        BitmapImage bitImgTwo;
        if (itemColor == GridItemColor.RED)
        {
            bitImgTwo = new BitmapImage(new Uri("ms-appx:/Assets/Icons/btTwoRED.png", UriKind.RelativeOrAbsolute));
            btnTwo.Style = (Style)this.Resources["btnTwoRedStyle"];
        }
        else
        {
            bitImgTwo = new BitmapImage(new Uri("ms-appx:/Assets/Icons/bt_AgendaVerde.png", UriKind.RelativeOrAbsolute));
            btnTwo.Style = (Style)this.Resources["btnTwoBlueStyle"];
        }

        imgTwo.ImageSource = bitImgTwo;
        imgTwo.Stretch = Stretch.UniformToFill;
        btnTwo.Background = imgTwo;
        minorButtonsRow.Children.Add(btnTwo);
        Grid.SetRow(btnTwo, 0);
        Grid.SetColumn(btnTwo, 1);

        gridItem.Children.Add(minorButtonsRow);
        Grid.SetRow(minorButtonsRow, 1);
        Grid.SetColumn(minorButtonsRow, 0);
        // END Button Two

        #endregion 

        return gridItem;
    }

Answer 2

If you have DataTemplate done correctly, then you don't need the ItemsPanel template. Can you show the code for DataTemplate? Because with it you can do pretty much everything.

For the colors. Declare brushes on your ViewModel and then assign it to your classes.Then just bind the Background. You only need one for each color.

Color binding: say you have SolidColorBrush property on your model named BgBrush. All you need to do is declare Background property on your control (i.e. grid) as "{Binding BgBrush}"