wpf ListBox看起來像datagrid？

Question

我在我的應用程序中有一個列表框控件。 我想改變他的風格，看起來像Datagrid（邊框，列，行...）。 我不想使用stantard 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，以便它doesnt看起來像一個數據網格，而是看起來像一個列表