使用网格

Question

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

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

我定义了一个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>