グリッドを使用したデータテンプレートのフォーマット

Question

データテンプレートの要素を整列するためにデータテンプレート内でグリッドを使用できますか？

私はwpfで非常に新しく、データテンプレートを使用してリストボックスのプレゼンテーションをフォーマットしようとしています。私はデータ・テンプレート内にグリッドを定義しましたが、私が定義したテキストブロックは、私が期待した列に配置されていないようです。

私は3列1行のグリッドを定義し、それぞれの列内の各要素を配置する計画が、私が得た結果は次のようになります。私は、要素が適切に整列見て期待していた

私が指定した列に私は何を間違ってやったのですか？

私はイラスト

<Window x:Class="TestWPF.MainWindow" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:local="clr-namespace:TestWPF" 
        mc:Ignorable="d" 
        Title="MainWindow" 
        Height="350" 
        Width="525"> 
     <StackPanel> 
      <ListBox x:Name='FruitList'> 
       <ListBox.ItemTemplate> 
        <DataTemplate> 
         <Grid> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width='10*' /> 
           <ColumnDefinition Width='10*' /> 
           <ColumnDefinition Width='1*' /> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="*" /> 
          </Grid.RowDefinitions> 
          <TextBlock Text='{Binding FruitName}' 
               Grid.Column='0' /> 
          <TextBlock Text='{Binding FruitColor}' 
               Grid.Column='1' /> 
          <CheckBox IsChecked='{Binding Selected}' 
               Grid.Column='2' /> 
         </Grid> 
        </DataTemplate> 
       </ListBox.ItemTemplate> 
      </ListBox> 
     </StackPanel> 
    </Window> 

のための私のXAMLを添付しており、背後に私のコード：データバインディングと

namespace TestWPF 
{ 
    /// <summary> 
    /// Interaction logic for MainWindow.xaml 
    /// </summary> 
    public partial class MainWindow : Window 
    { 
     public MainWindow() 
     { 
      InitializeComponent(); 
      FruitList.ItemsSource = Fruits.getAllFruit(); 
     } 
    } 
} 

：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 

namespace TestWPF.Models 
{ 
    public class Fruit 
    { 
     public string FruitName { get; set; } 
     public string FruitColor { get; set; } 
     public bool Selected { get; set; } 

    } 
} 


namespace TestWPF.Models 
{ 
    public class Fruits 
    { 
     private static List<Fruit> _fruitList; 

     static Fruits() 
     { 
      _fruitList = new List<Fruit>(); 
      _fruitList.Add(new Fruit 
      { 
       FruitName = "Mango", 
       FruitColor = "Yellow", 
       Selected = false 
      }); 
      _fruitList.Add(new Fruit 
      { 
       FruitName = "Mango", 
       FruitColor = "Yellow", 
       Selected = false 
      }); 
      _fruitList.Add(new Fruit 
      { 
       FruitName = "Water Melon", 
       FruitColor = "Green", 
       Selected = false 
      }); 
      _fruitList.Add(new Fruit 
      { 
       FruitName = "Apple", 
       FruitColor = "Red", 
       Selected = false 
      }); 
      _fruitList.Add(new Fruit 
      { 
       FruitName = "Banana", 
       FruitColor = "Yellow", 
       Selected = false 
      }); 
      _fruitList.Add(new Fruit 
      { 
       FruitName = "Orange", 
       FruitColor = "Orange", 
       Selected = false 
      }); 
     } 
     public static List<Fruit> getAllFruit(bool bSelected = false) 
     { 
      var result = (bSelected ? 
             _fruitList.Where(x => x.Selected = true).ToList<Fruit>() 
             : _fruitList.ToList<Fruit>()); 
      return result; 
     } 
    } 
} 

Answer 1

IsSharedSizeScopeは、外側メインtrueに設定されていますグリッドと内部データテンプレートSharedSizeGroupが3列に適用されます。任意の名前を付けることができます。それらの列には同じ幅が適用されます。

<Grid IsSharedSizeScope="True"> 
    <ListBox x:Name='FruitList' HorizontalContentAlignment="Stretch"> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="Auto" SharedSizeGroup="A" /> 
         <ColumnDefinition Width="Auto" SharedSizeGroup="B" /> 
         <ColumnDefinition Width="*" /> 
        </Grid.ColumnDefinitions> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="*" /> 
        </Grid.RowDefinitions> 
        <TextBlock Text="{Binding FruitName}" Margin="5" 
             Grid.Column="0" /> 
        <TextBlock Text="{Binding FruitColor}" Margin="5" 
             Grid.Column="1" /> 
        <CheckBox IsChecked="{Binding Selected}" Margin="5" HorizontalAlignment="Right" 
             Grid.Column="2" /> 
       </Grid> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 
</Grid>