wpf ListBox looks like datagrid?

Question

I have a listbox control in my app. I want to change his style to being look like to Datagrid (borders, columns, row...). I don't want to using stantard datagrid - because its control cannot binding itemtemplte. I trying to do it:

 <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>

But it not looking good - as following:

it what i want to achieve:

Answer 1

Using Grid.IsSharedSizeScope

result

i believe you want the columns to be re-sized based on your string length, so Grid.IsSharedSizeScope is your choice here

example 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>

if you move SharedSizeGroup to id like below

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

result

Using ListView with GridView

You have an option to use list view with grid view which will have same appearance as grid with flexibility of list

eg

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

GridViewColumn offers you to modify CellTemplate, HeaderTemplate, HeaderContainerStyle, HeaderStringFormat etc.

Answer 2

I am sure you can achieve this using a grid control (It supports binding and everything else)

To fix your problem, you will have to give fixed widths to both your borders inside your stackpanel then your listbox items will look like a grid control.

<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>

Please let us know what problem you are having with GridControl and maybe we can fix that as well

Edit. If you were using a DataGrid your template would look like

<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>

Please note that I have set HeaderVisibility to false so that it doesnt look like a datagrid but instead looks like a list