带有网格的wpf listbox和datatemplate [英] wpf listbox and datatemplate with grid inside

问题描述

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

 < ListBox x：Name =commandListboxGrid.Row =1Grid.Column =0Grid.ColumnSpan =2Horizo​​ntalAlignment =Stretch> 
< ListBox.ItemTemplate> 
< DataTemplate> 
<网格> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =3 */> 
< ColumnDefinition Width =*/> 
< /Grid.ColumnDefinitions> 
 
< TextBlock Grid.Column =0Text ={Binding}/> 
< TextBlock Grid.Column =1Text =icon/> 
< / Grid> 
< / DataTemplate> 
< /ListBox.ItemTemplate> 
< / ListBox> 
  

解决方案

更好地将模板存储在资源中：

 < Window.Resources> 
< DataTemplate x：Key =DefaultTemplate> 
< Grid x：Name =GridItemWidth =200> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =Auto/> 
< ColumnDefinition Width =Auto/> 
< /Grid.ColumnDefinitions> 
 
< TextBlock x：Name =ParameterGrid.Column =1Text ={Binding Path = Name}Margin =5,1,0,0/> 
< TextBlock x：Name =ValueGrid.Column =2Text ={Binding Path = Age}Margin =85,1,0,0/> 
 
 < / Grid> 
< / DataTemplate> 
< /Window.Resources> 
  

ListBox定义：

 < ListBox Name =MyListBoxItemTemplate ={StaticResource DefaultTemplate}/> 
  

在代码C＃中：

  public class Person 
 {
 public string Name 
 {
 get; 
 set; 
} 
 
 public int年龄
 {
 get; 
 set; 
 
 
  

定义ObservableCollection：

  private ObservableCollection< Person> MyListBoxData = new ObservableCollection< Person>（）; 
  

并在集合中添加项目：

 MyListBoxData.Add（new Person（）
 {
 Name =Nick，
 Age = 21，
}）; 
 
 MyListBoxData.Add（new Person（）
 {
 Name =Adam，
年龄= 11，
}）; 
 
 MyListBox.ItemsSource = MyListBoxData; 
  

编辑：

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

 < Grid x：Name =GridItemWidth =300> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =3 */> 
< ColumnDefinition Width =*/> 
< /Grid.ColumnDefinitions> 
 
< TextBlock x：Name =ParameterGrid.Column =1Text ={Binding Path = Name}Margin = -  220,0,0,0/> 
< TextBlock x：Name =ValueGrid.Column =2Text ={Binding Path = Age}Margin =0,0,0,0/> 
< / Grid> 
  

I have a following question. I want to have ListBox with DataTemplate as 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 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>

解决方案

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

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

 public int Age
 {
   get;
   set;
 }
}

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

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

这篇关于带有网格的wpf listbox和datatemplate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！