【问题标题】:formatting datatemplate using grid使用网格格式化数据模板
【发布时间】:2017-04-05 02:49:25
【问题描述】:

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

我对 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;
        }
    }
}

【问题讨论】:

    标签: c# wpf datatemplate


    【解决方案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>
    

    【讨论】:

    • 感谢帕拉格的建议。我有 2 个后续问题:首先,请注意我使用的是 stackpanel,我需要将其更改为 grid 才能应用您的建议?这不是问题,只是一个奇怪的问题。其次,在我看来,我无法控制列的宽度。我使用了 '10*' 但看起来它并没有影响它的宽度。如何使内容扩展并填充整个网格或面板?右边还有很多空间。我想让复选框与最右边对齐
    • 对于复选框,设置Horizo​​ntalAlignment="Right",这样它就会向右移动。
    • Grid 用于代替 stackpanel,因为“IsSharedSizeScope”属性仅适用于“Grid”。尽管如此,如果你想要它,那么你可以将整个网格包裹在 stackpanel 中。它仍然可以工作。
    • 查看更新的答案。如果有帮助,请将其标记为有帮助。
    • 它确实有效。但是它如何知道相对于其他行要获得多少空间?关于水平对齐,请检查我是否已将 Horizo​​ntalContentAlignment 应用于拉伸。因此,复选框向右移动。
    猜你喜欢
    • 2010-11-04
    • 1970-01-01
    • 2013-07-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-24
    • 2012-12-27
    相关资源
    最近更新 更多