0

我有一个 5 X 4 网格（下面的代码），它可以根据我的数据形状工作。我最近发现几乎不可能将网格从视图模型传递到视图并将其绑定到 XAML 中的另一个网格并仍然保持 MVVM 模式——这是我的目标。

这里的挑战是我的演示文稿要求将孩子分组在单个单元格中，每个单元格具有 1 个图像和两个文本块 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>
4

2 回答 2

0

好的。我将您的解决方案和我的解决方案并排放置。它看起来像这样：

在此处输入图像描述

诚然，它需要更多的调整，但你明白了主要思想。

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

视图模型：

  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，干净，漂亮的解决方案。

于 2013-04-16T02:24:53.847 回答
0

您可以使用另一个 Grid（或 stackpanel，或任何类型的面板）作为每个单元格中的子元素，然后将子元素添加到该面板

于 2013-04-15T23:55:51.493 回答