MVVM 패턴에서 사용하기 위해 격자 내용을 ListView 또는 기타로 변환

Question

나는 내 데이터의 모양에 대해 원하는대로 작동하는 5 X 4 격자 (아래 코드)를 가지고 있습니다. 최근에 View Model에서 그리드를 View로 전달하고이를 XAML의 다른 그리드에 바인딩하고 MVVM 패턴을 유지하는 것이 사실상 불가능하다는 것을 발견했습니다. 이것이 바로 내 목표입니다.

내 프레젠테이션에서 각 어린이가 하나의 이미지, 하나의 이미지 및 두 개의 텍스트 블록 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

당신은 각 셀의 자식 요소로 다른 그리드 (또는 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, 깨끗하고 아름다운 솔루션.