WPF同步ListBox项目的大小

Question

我正在使用以下xaml：

<ListBox Name="Lst" ItemsSource="{Binding Items}"  HorizontalContentAlignment="Stretch" >            
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True" Orientation="Horizontal" Width="500" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="1" BorderBrush="Black" >
                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <Label Grid.Row="0" Grid.Column="0" Content="Id" />
                    <Label Grid.Row="0" Grid.Column="1" Content="{Binding Id}" />

                    <Label Grid.Row="1" Grid.Column="0" Content="Name" />
                    <Label Grid.Row="1" Grid.Column="1" Content="{Binding Name}" />
                </Grid>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

和代码隐藏：

public MainWindow()
{
    InitializeComponent();

    DataContext = new
    {
        Items = new object[]
        {
            new {Id = 1, Name = "John"},
            new {Id = 2, Name = "John Smith"},
            new {Id = 3, Name = "Andrew"},
            new {Id = 4, Name = "Andrew Wright"},
            new {Id = 5, Name = "Arthur"},
            new {Id = 6, Name = "Arthur Williams"},
            new {Id = 7, Name = "another name"},
            new {Id = 8, Name = "another name and surname"}
        }
    };
}

现在我得到了这个结果：

正如您所看到的，ListBox中的项目具有不同的大小，因为DataContext的属性名称不同。但是我希望这个项目的尺寸类似：

你可以帮我解决这个问题吗？预先感谢！

Answer 1

   <ListBox>
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="Width" Value="200" />
                <Setter Property="Height" Value="200" />
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>

Answer 2

您应该使用网格列SharedSizeGroup属性（msdn）。

试试这个：

<ListBox Name="Lst" ItemsSource="{Binding Items}"  HorizontalContentAlignment="Stretch" 
         Grid.IsSharedSizeScope="True">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True" Orientation="Horizontal" Width="500" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="1" BorderBrush="Black" >
                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition SharedSizeGroup="A" />
                    </Grid.ColumnDefinitions>

                    <Label Grid.Row="0" Grid.Column="0" Content="Id" />
                    <Label Grid.Row="0" Grid.Column="1" Content="{Binding Id}" />

                    <Label Grid.Row="1" Grid.Column="0" Content="Name" />
                    <Label Grid.Row="1" Grid.Column="1" Content="{Binding Name}" />
                </Grid>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 3

在ListBox上设置 Grid.IsSharedSizeScope="True" ，并为列指定 SharedSizeGroup ，以便所有列共享相同的大小（项目中的最大值）。

这会得到你想要的结果：

<ListBox Name="Lst" ItemsSource="{Binding Items}" Grid.IsSharedSizeScope="True" 
         HorizontalContentAlignment="Stretch" >
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True" Orientation="Horizontal" Width="500" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="1" BorderBrush="Black" >
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition SharedSizeGroup="A" />
                        <ColumnDefinition SharedSizeGroup="B"/>
                    </Grid.ColumnDefinitions>

                    <Label Grid.Row="0" Grid.Column="0" Content="Id" />
                    <Label Grid.Row="0" Grid.Column="1" Content="{Binding Description}" />

                    <Label Grid.Row="1" Grid.Column="0" Content="Name" />
                    <Label Grid.Row="1" Grid.Column="1" Content="{Binding Name}" />
                </Grid>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>