將網格內容轉換為ListView或其他內容以用於MVVM模式

Question

我有一個5 X 4網格（下面的代碼），可以根據我的數據形狀進行選擇。 最近，我發現幾乎不可能將網格從視圖模型傳遞到視圖並將其綁定到XAML中的另一個網格，並且仍然保持MVVM模式-這是我的目標。

這里的挑戰在於，我的演示文稿要求將孩子分組到單個單元格中，每個單元格具有1張圖像和2個textblock UI元素。

DataTable，DataSet，GridView，List等似乎都缺乏向單個行/列單元格添加多個子元素以進行顯示的功能。 不幸的是，這不僅僅是將圖像粘貼在列標題中。

有人找到類似的其他選擇嗎？

謝謝，

格倫

下面是示例網格和結果視圖的圖像。

public void FormatGridCell()
{
   Random random = new Random();
   List<int> randomNumList = new List<int>();
   for (int i = 0; i < 50; i++)
      randomNumList.Add(random.Next(50));

   List<string> columHeader = new List<string>();
   columHeader.Add("Pitts");
   columHeader.Add("Vans");
   columHeader.Add("Lancair");
   columHeader.Add("Epic");

   List<string> rowHeader = new List<string>();
   rowHeader.Add("NORTH");
   rowHeader.Add("SOUTH");
   rowHeader.Add("EAST");
   rowHeader.Add("WEST");
   rowHeader.Add("CANADA");

   for (int x = 1; x < 5; x++)
   {
      var engineType= new TextBlock { Text = columHeader[x - 1] };
      engineType.SetValue(Grid.RowProperty, 0);
      engineType.SetValue(Grid.ColumnProperty, x);
      engineType.HorizontalAlignment = HorizontalAlignment.Center;
      this.airplaneGrid.Children.Add(engineType);

      for (int r = 1; r < 6; r++)
      {
         var dealerService = new TextBlock { Text = rowHeader[r - 1] };
         dealerService.SetValue(Grid.RowProperty, r);
         dealerService.SetValue(Grid.ColumnProperty, 0);
         dealerService.HorizontalAlignment = HorizontalAlignment.Center;
         this.airplaneGrid.Children.Add(dealerService);

         for (int i = 1; i < 6; i++)
         {
            // Bitmap path will be based on Type
            var modelImage = new Image { Width = 20, Height = 20 };
            var bitmapImage = new BitmapImage(new Uri(@"c:\personal\temp\dog.jpg"));
            modelImage.Source = bitmapImage;
            modelImage.SetValue(Grid.RowProperty, r);
            modelImage.SetValue(Grid.ColumnProperty, i);
            modelImage.HorizontalAlignment = HorizontalAlignment.Left;
            modelImage.VerticalAlignment = VerticalAlignment.Top;

            var mfgName = new TextBlock { Text = "Lancair IV" };
            mfgName.SetValue(Grid.RowProperty, r);
            mfgName.SetValue(Grid.ColumnProperty, i);
            mfgName.HorizontalAlignment = HorizontalAlignment.Center;

            var price = new TextBlock { Text = "$" + randomNumList[r + i] };
            price.SetValue(Grid.RowProperty, r);
            price.SetValue(Grid.ColumnProperty, i);
            price.HorizontalAlignment = HorizontalAlignment.Left;
            price.VerticalAlignment = VerticalAlignment.Center;
            price.Margin = new Thickness(30, 0, 0, 0);

            this.airplaneGrid.Children.Add(modelImage);
            this.airplaneGrid.Children.Add(mfgName);
            this.airplaneGrid.Children.Add(price);
          }
       }
    }
 }

此功能不是我的。 抱歉，忘記了命名的積分，但是為此論壇提供了一個stackoverflow的小貼士。

 public static class RandomExtensions
 {
    public static int NextDouble(
                    Random random,
                    double minValue,
                    double maxValue)
    {
       return random.Next(10, 50);
    }
 }

抱歉，我在圖騰柱上的位置太低，無法提交圖像，但是運行它以完全了解預期的布局。

這是支持以上內容的XAML。

 <Grid x:Name="airplaneGrid" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition Height="60"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="60"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="175"/>
            <ColumnDefinition Width="175"/>
            <ColumnDefinition Width="175"/>
            <ColumnDefinition Width="175"/>
            <ColumnDefinition Width="175"/>
        </Grid.ColumnDefinitions>
    </Grid>

Answer 1

您可以在每個單元格中使用另一個Grid（或stackpanel或任何類型的面板）作為子元素，然后將子元素添加到該面板中

Answer 2

好。 我將您的解決方案並排放置。 看起來像這樣：

誠然，它需要更多的調整，但是您可以理解主要思想。

 <ListView ItemsSource="{Binding}" Grid.Column="1">
            <ListView.Resources>
                <DataTemplate x:Key="CellContentTemplate">
                    <Border BorderBrush="LightGray" BorderThickness="1">
                        <DockPanel>
                            <Image Height="20" Width="20" Source="{Binding ImageSource}" Margin="2"
                               DockPanel.Dock="Left"/>
                            <StackPanel>
                                <TextBlock Text="{Binding Value, StringFormat='${0}'}" Margin="2"/>
                                <TextBlock Text="{Binding Name}" Margin="2"/>
                            </StackPanel>
                        </DockPanel>
                    </Border>

                </DataTemplate>
            </ListView.Resources>
            <ListView.View>
                <GridView>
                    <GridViewColumn Header=""  DisplayMemberBinding="{Binding Name}"/>
                    <GridViewColumn Header="Pitts">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <ContentPresenter Content="{Binding Pitts}" ContentTemplate="{StaticResource CellContentTemplate}"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="Vans">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <ContentPresenter Content="{Binding Vans}" ContentTemplate="{StaticResource CellContentTemplate}"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="Lancair">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <ContentPresenter Content="{Binding Lancair}" ContentTemplate="{StaticResource CellContentTemplate}"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="Epic">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <ContentPresenter Content="{Binding Epic}" ContentTemplate="{StaticResource CellContentTemplate}"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>

背后的代碼（只是隨機數據）：

 Random random = new Random();

        public GridSample() //Window Constructor
        {
            InitializeComponent();

            var names = new[] {"NORTH","SOUTH","EAST","WEST"};


            DataContext = names.Select(x => new GridViewModel()
                                                {
                                                    Name = x,
                                                    Epic = CreateRandomCell(),
                                                    Lancair = CreateRandomCell(),
                                                    Pitts = CreateRandomCell(),
                                                    Vans = CreateRandomCell()
                                                });
        }

        private CellViewModel CreateRandomCell()
        {
            return new CellViewModel
                       {
                           Name = "Cell" + random.Next(0, 100),
                           ImageSource = "/ChessPieces/BlackBishop.png",
                           Value = (decimal) random.Next(0, 100)
                       };
        }

ViewModels：

  public class GridViewModel
    {
        public string Name { get; set; }

        public CellViewModel Pitts { get; set; }

        public CellViewModel Vans { get; set; }

        public CellViewModel Lancair { get; set; }

        public CellViewModel Epic { get; set; }
    }

    public class CellViewModel
    {
        public string Name { get; set; }

        public string ImageSource { get; set; }

        public decimal Value { get; set; }
    }

看到？ 純MVVM，干凈美觀的解決方案。