使用网格格式化数据模板

Question

是否可以在数据模板中使用网格来格式化以对齐数据模板的元素？

我是 wpf 的新手，我正在尝试使用数据模板来格式化列表框的显示。我在数据模板中定义了一个网格，但我定义的文本块似乎没有放在我期望的列中。

我定义了一个 3 列 1 行的网格，并计划将每个元素分别放置在每一列中，但我得到的结果如下所示：

我期待看到元素在我指定的列中正确对齐。我做错了什么？

我已附上我的 xaml 以供说明

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

还有我的代码：

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>

使用网格格式化数据模板

formatting datatemplate using grid

c#

wpf

datatemplate