WPF中的ListBox和DataTemplate与内部网格

Question

我有一个问题。我想要一个带有DataTemplate的ListBox，它的模板是一个Grid，并且这个Grid有两列。我想要将第一列的宽度设置为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>

- MistyK

---

线程并不是很有帮助。实际问题并不清楚。 - shawn1874

Answer 1

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

<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 定义：

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

在 C# 代码中：

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

 public int Age
 {
   get;
   set;
 }
}

Define ObservableCollection:

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

并在集合中添加项目：

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

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

MyListBox.ItemsSource = MyListBoxData;

编辑：

然后将第一个TextBlock的Width设置为"3*"，"*"和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>

- Anatoliy Nikolaev

---

我不想设置常量值或自动值。这并不是我的问题的答案。我想要有两列，一列占屏幕的3/4，另一列占1/4。 - MistyK

Answer 2

使用IsSharedSizeScope可以在生成的网格中共享列大小，适用于自动宽度（*大小无法实现）。

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

请参阅 MSDN 备注

参与大小共享的列和行不支持星号大小。在这种情况下，星号大小被视为自动。 如果在资源模板内将 IsSharedSizeScope 设置为 true，并且在该模板之外定义了 SharedSizeGroup，则网格大小共享将无法工作。

- Leon van der Walt

Answer 3

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

如果我理解正确，您希望第一列占据3/4的空间，第二列占据1/4的空间。按照上述格式设置宽度应该可以解决问题。

希望能解决您的问题。

- Harish