wpf 列表框和带有网格的数据模板

wpf listbox and datatemplate with grid inside

提问by MistyK

I have a following question. I want to have ListBoxwith DataTemplateas Grid. This grid has 2 two columns. I want to set first column width to 3*and another to *. How to do this? I will copy my code.

我有以下问题。我希望能有ListBox与DataTemplate作为Grid。该网格有 2 个两列。我想将第一列宽度设置为3*，另一列宽度设置为*。这该怎么做？我会复制我的代码。

<ListBox x:Name="commandListbox" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="3*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Column="0" Text="{Binding}"/>
                <TextBlock Grid.Column="1" Text="icon" />
           </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>                
</ListBox>

回答by Anatoliy Nikolaev

Better to store the template in resources:

最好将模板存储在资源中：

<Window.Resources>
  <DataTemplate x:Key="DefaultTemplate">
    <Grid x:Name="GridItem" Width="200">
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="Auto" />
           <ColumnDefinition Width="Auto" />
       </Grid.ColumnDefinitions>

       <TextBlock x:Name="Parameter" Grid.Column="1" Text="{Binding Path=Name}" Margin="5,1,0,0" />
       <TextBlock x:Name="Value" Grid.Column="2" Text="{Binding Path=Age}" Margin="85,1,0,0" />

       <Line x:Name="Separator" X1="0" X2="0" Y1="0" Y2="20" SnapsToDevicePixels="True" Grid.Column="1" Stroke="Black" StrokeThickness="2" Margin="50,0,0,0" HorizontalAlignment="Left" />
   </Grid>
 </DataTemplate>
</Window.Resources>

ListBox define:

列表框定义：

<ListBox Name="MyListBox" ItemTemplate="{StaticResource DefaultTemplate}" />

In code C#:

在代码 C# 中：

public class Person
{
  public string Name
  {
    get;
    set;
  }

 public int Age
 {
   get;
   set;
 }
}

Define ObservableCollection:

定义 ObservableCollection：

private ObservableCollection<Person> MyListBoxData = new ObservableCollection<Person>();

And add items on collection:

并在集合上添加项目：

MyListBoxData.Add(new Person()
{
  Name = "Nick",
  Age = 21,
});

MyListBoxData.Add(new Person()
{
  Name = "Adam",
  Age = 11,
});

MyListBox.ItemsSource = MyListBoxData;

EDITED:

编辑：

Then set Width="3*", Width="*" and Margin="-WidthGrid" of the first TextBlock:

然后设置第一个 TextBlock 的 Width="3*"、Width="*" 和 Margin="-WidthGrid"：

<Grid x:Name="GridItem" Width="300">
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="3*" />
  <ColumnDefinition Width="*" />
 </Grid.ColumnDefinitions>

 <TextBlock x:Name="Parameter" Grid.Column="1" Text="{Binding Path=Name}" Margin="-220,0,0,0" />
 <TextBlock x:Name="Value" Grid.Column="2" Text="{Binding Path=Age}" Margin="0,0,0,0" />
</Grid>

回答by Leon van der Walt

Use IsSharedSizeScope to share column sizing across the generated grids, for Auto widths (can't be done for * sizing):

使用 IsSharedSizeScope 在生成的网格中共享列大小，用于自动宽度（不能用于 * 大小）：

via http://wpftutorial.net/DataTemplates.html

通过http://wpftutorial.net/DataTemplates.html

<ListBox ItemsSource="{Binding}" BorderBrush="Transparent" 
     Grid.IsSharedSizeScope="True"
     HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid Margin="4">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="Key" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="{Binding Name}" FontWeight="Bold"  />
            <TextBox Grid.Column="1" Text="{Binding Value }" />
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>

See MSDN remarks

见 MSDN 备注

Columns and rows participating in size sharing do not respect Star sizing. In this scenario, Star sizing is treated as Auto. Grid size sharing does not work if IsSharedSizeScope is set to true within a resource template, and a SharedSizeGroup is defined outside of that template.

参与大小共享的列和行不遵循 Star 大小。在这种情况下，Star sizing 被视为 Auto。如果 IsSharedSizeScope 在资源模板中设置为 true，并且在该模板之外定义了 SharedSizeGroup，则网格大小共享不起作用。

回答by Harish

<ListBox x:Name="commandListbox" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.75*" />
                    <ColumnDefinition Width="0.25*" />
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Column="0" Text="{Binding}"/>
                <TextBlock Grid.Column="1" Text="icon" />
           </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>                
</ListBox>

If I understand you correctly, you are looking for 3/4th space for 1st column and 1/4th space for 2nd column. Setting the width in the above format must be solving the problem.

如果我理解正确，您正在寻找第一列的 3/4 空间和第二列的 1/4 空间。以上面的格式设置宽度一定是解决问题了。

Hope it solves.

希望能解决。