Windows Phone - 自定义GridView最大列数

Question

我是Windows Phone编程新手。我想创建一个GridView类似如下：

我已经做了<DataTemplate>，所以我已经做过的项目和他们的按钮。但我无法使用MaximumRowsOrColumns为网格设置2列，因为它仅限于2行的网格（可以是有限的行，但我只需要2列）。 编码下面是我做的最接近：

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

编辑：添加<DataTemplate>代码：

<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> 

有什么建议？

顺便说一句，任何想法如何改变GridViewItem的背景颜色？我正在考虑一个几何系列，就像第一个项目是橙色的，以下内容 - 总是以两个数字计算 - 将会是绿色，然后是橙色。但我不知道如何实施它。

Answer 1

如果您有DataTemplate正确完成，那么您不需要ItemsPanel模板。你能显示DataTemplate的代码吗？因为有了它，你几乎可以做任何事情。

对于颜色。在您的ViewModel上声明画笔，然后将其分配给您的类。然后只绑定背景。每种颜色只需要一个。

颜色绑定：假设您在名为BgBrush的模型上有SolidColorBrush属性。所有你需要做的是在你的控件（即网格）上声明Background属性"{Binding BgBrush}"

Answer 2

那么，因为我找不到使用XAML的方法，所以我在C＃中完成了它。以下是我的解决方案，如果有人需要类似如下的东西：

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; 
    }