wpf ListBox看起来像datagrid？

Question

我的应用中有一个列表框控件。 我想将他的风格改为看起来像Datagrid（边框，列，行......）。 我不想使用标准数据网格 - 因为它的控件不能绑定itemtemplte。 我试着这样做：

 <ListBox 
                    ItemsSource="{Binding Items}" 
                    HorizontalContentAlignment="Stretch"
                    VerticalContentAlignment="Stretch"
                    Name="listBox1"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch" >
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                    <Border BorderThickness="1" BorderBrush="Black">
                                        <TextBlock   Text="{Binding Id}" Margin="5"/>
                                    </Border>
                                    <Border BorderThickness="1" BorderBrush="Black">
                                        <TextBlock   Text="{Binding Name}" Margin="5"/>
                                    </Border>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

但它看起来并不好 - 如下：

这是我想要实现的目标：

Answer 1

使用Grid.IsSharedSizeScope

结果

我相信您希望根据字符串长度重新调整列的大小，因此Grid.IsSharedSizeScope是您的选择

示例xaml

    <ListBox ItemsSource="{Binding Items}"
             Grid.IsSharedSizeScope="True">
        <ListBox.Resources>
            <Style TargetType="ListBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <ContentPresenter />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.Resources>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition SharedSizeGroup="name" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Border BorderThickness="1"
                            BorderBrush="Black">
                        <TextBlock Text="{Binding Name}"
                                     Margin="5" />
                    </Border>
                    <Border BorderThickness="1"
                            Grid.Column="1"
                            BorderBrush="Black">
                        <TextBlock   Text="{Binding Id}"
                                     Margin="5" />
                    </Border>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

如果您将SharedSizeGroup移动到id，如下所示

<Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition SharedSizeGroup="id" />
</Grid.ColumnDefinitions>

结果

将ListView与GridView一起使用

您可以选择使用带有网格视图的列表视图，它具有与网格相同的外观，并具有列表的灵活性

例如

    <ListView ItemsSource="{Binding SourceItems}">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Column1"
                                DisplayMemberBinding="{Binding Column1}" />
                <GridViewColumn Header="Column2"
                                DisplayMemberBinding="{Binding Column2}" />
            </GridView>
        </ListView.View>
    </ListView>

GridViewColumn允许您修改CellTemplate，HeaderTemplate，HeaderContainerStyle，HeaderStringFormat等。

Answer 2

我相信你可以使用网格控件实现这一点（它支持绑定和其他所有内容）

要解决您的问题，您必须为堆叠面板内的两个边框指定固定宽度，然后您的列表框项目看起来像网格控件。

<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                    <Border Width="150" BorderThickness="1" BorderBrush="Black">
                                        <TextBlock   Text="{Binding Id}" Margin="5"/>
                                    </Border>
                                    <Border Width="50" BorderThickness="1" BorderBrush="Black">
                                        <TextBlock   Text="{Binding Name}" Margin="5"/>
                                    </Border>
                                </StackPanel>

请告诉我们您使用GridControl时遇到的问题，也许我们也可以解决这个问题

编辑。如果您使用的是DataGrid，则模板看起来像

<DataGrid ItemsSource="{Binding Items}" AutoGenerateColumns="False" HeadersVisibility="None">
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="" Width="SizeToCells" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text={Binding Id}/>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
<DataGridTemplateColumn Header="" Width="SizeToCells" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text={Binding Name}/>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

请注意，我已将HeaderVisibility设置为false，因此它看起来不像数据网格，而是看起来像列表