wpf ListBox 看起来像数据网格？

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，因此它看起来不像数据网格，而是看起来像列表