首页 > 解决方案 > 使用 UniformGrid 在 ListView 中嵌套绑定和布局

问题描述

我是 WPF/XAML 的新手,并且在数据绑定和布局方面遇到了一些不错的问题。我试图实现的目标:具有单行网格单元(仅文本和背景颜色)和一些文本块下方的列表。我的 XAML 看起来像这样:

    <Window.Resources>
    <DataTemplate x:Key="GridLayoutTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Rectangle Grid.Row="0" Grid.Column="0" Fill="{Binding RowData.RowColor}" />
            <TextBlock Text="{Binding RowData.RowText}" />
        </Grid>
    </DataTemplate>


    <DataTemplate x:Key="ListLayoutTemplate">
        <StackPanel VerticalAlignment="Stretch">
            <ItemsControl ItemTemplate="{StaticResource GridLayoutTemplate}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Rows="1" Columns="9"></UniformGrid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl> 
            <Grid Background="Green">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Rectangle Grid.Row="0" Grid.Column="0" Fill="{Binding TileColor}" />
                <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding TileText}" />
            </Grid>
        </StackPanel>
    </DataTemplate>
</Window.Resources>
<ListView ItemTemplate="{StaticResource ListLayoutTemplate}" Name="lvDataBinding">
</ListView>

后面的代码:

public Test()
        {
            InitializeComponent();
            List<DataObject> items = new List<DataObject>();
            List<Row> rowItem = new List<Row>();
            rowItem.Add(new Row()
            {
                RowColor = "Red",
                RowText = "Text1"
            });
            rowItem.Add(new Row()
            {
                RowColor = "Blue",
                RowText = "Text2"
            });


            items.Add(new DataObject()
            {
                TileColor = "Black",
                TileText = "Blibb",
                RowData = rowItem
            });

            items.Add(new DataObject() { TileColor = "Yellow", TileText = "Blubb", RowData=rowItem });
            items.Add(new DataObject() { TileColor = "Red", TileText = "Blabb", RowData=rowItem });
            this.lvDataBinding.ItemsSource = items;
        }
    }

    public class DataObject
    {
        public string TileText { get; set; }
        public string TileColor { get; set; }
        public List<Row> RowData { get; set; }
    }

    public class Row
    {
        public string RowText { get; set; }
        public string RowColor { get; set; }
    }

如果我运行它,它只显示列表视图的行而不是统一网格。listview 项目的绑定是好的,但我不知道uniformgrid,布局也可能是错误的。令人困惑。

标签: c#wpfxamldata-binding

解决方案


绑定to的ItemsSource属性并移除“RowData”。从中的绑定路径:ItemsControlRowDataGridLayoutTemplate

<DataTemplate x:Key="GridLayoutTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Rectangle Grid.Row="0" Grid.Column="0" Fill="{Binding RowColor}" />
        <TextBlock Text="{Binding RowText}" />
    </Grid>
</DataTemplate>


<DataTemplate x:Key="ListLayoutTemplate">
    <StackPanel VerticalAlignment="Stretch">
        <ItemsControl ItemsSource="{Binding RowData}" ItemTemplate="{StaticResource GridLayoutTemplate}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Rows="1" Columns="9"></UniformGrid>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
        <Grid Background="Green">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Rectangle Grid.Row="0" Grid.Column="0" Fill="{Binding TileColor}" />
            <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding TileText}" />
        </Grid>
    </StackPanel>
</DataTemplate>

推荐阅读