通过数据绑定到ItemsControl自动生成内容

时间:2013-10-10 13:33:32

标签: c# .net wpf xaml visual-studio-2012

我需要一些关于wpf的帮助。我基本上想要做的是使用ItemsControls的集合(来自数据绑定)填充扩展器,其中包含2个图像和一个文本框。 我无法得到预期的结果。有人可以帮帮我吗?

这是我的XAML:

<Expander Name="OnlineExpander"
          HorizontalAlignment="Stretch"
          Header="Online Friends"
          IsExpanded="True">
  <Expander.Content>
    <Grid>
      <ItemsControl Height="50"
                    VerticalAlignment="Top">
        <ItemsControl.ItemTemplate>
          <DataTemplate>
            <Grid Height="30"
                  VerticalAlignment="Top"
                  Background="Brown"
                  Name="itemGridTemp">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="61*"
                                  Name="PictureColumn" />
                <ColumnDefinition Width="271*"
                                  Name="NameColumn" />
                <ColumnDefinition Width="33*"
                                  Name="StatusColumn" />
              </Grid.ColumnDefinitions>
              <Image Height="30"
                     Width="30"
                     Source="{Binding Path=Image}"
                     Grid.ColumnSpan="1"
                     MouseEnter="Image_MouseEnter"></Image>
              <TextBox Name="txtName"
                       Grid.ColumnSpan="2"
                       Text="{Binding Name}"
                       Width="271"
                       Foreground="#FFEEB8B8"></TextBox>
            </Grid>
          </DataTemplate>
        </ItemsControl.ItemTemplate>
      </ItemsControl>
    </Grid>
  </Expander.Content>
</Expander>

和代码隐藏:

private List<Friend> _Friends;
public List<Friend> Friends { get { return _Friends; } }
private void Window_Loaded(object sender, RoutedEventArgs e) {
  Image img = new Image();
  img.RenderSize = new Size(30, 30);
  img.OpacityMask = Brushes.CadetBlue;
  _Friends = new List<Friend> {
            new Friend{Name="John Smith",IsOnline=true,Image=img},
            new Friend{Name="Name Surname",IsOnline=true,Image=img},
            new Friend{Name="Name2 surname2", IsOnline=false,Image=img}
            };
  OnlineExpander.DataContext = Friends;
}

我有一个名为Friend的课程:

public class Friend {
  private Image _Image;
  private String _Name;
  private bool _IsOnline;

  public Image Image { get { return _Image; } set { _Image = value; } }
  public string Name { get { return _Name; } set { _Name = value; } }
  public bool IsOnline { get { return _IsOnline; } set { _IsOnline = value; } }
}

我希望有人可以帮助我。抱歉我的英语不好;)

2 个答案:

答案 0 :(得分:2)

将ItemsControl上的ItemsSource设置为

      <ItemsControl Height="50" VerticalAlignment="Top" ItemsSource="{Binding}">

这将生成您的物品

答案 1 :(得分:1)

您的ItemsControl需要知道它有哪些项目。除非您设置ItemsSource(在代码隐藏或标记中),否则它不会这样做。试试这个:

XAML(ItemsControl现在有一个名字):

<Expander Name="OnlineExpander"
          HorizontalAlignment="Stretch"
          Header="Online Friends"
          IsExpanded="True">
  <Expander.Content>
    <Grid>
      <ItemsControl Height="50"
                    VerticalAlignment="Top"
                    Name="OnlineItemsControl">
        <ItemsControl.ItemTemplate>
          <DataTemplate>
            <Grid Height="30"
                  VerticalAlignment="Top"
                  Background="Brown"
                  Name="itemGridTemp">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="61*"
                                  Name="PictureColumn" />
                <ColumnDefinition Width="271*"
                                  Name="NameColumn" />
                <ColumnDefinition Width="33*"
                                  Name="StatusColumn" />
              </Grid.ColumnDefinitions>
              <Image Height="30"
                     Width="30"
                     Source="{Binding Path=Image}"
                     Grid.ColumnSpan="1"
                     MouseEnter="Image_MouseEnter"></Image>
              <TextBox Name="txtName"
                       Grid.ColumnSpan="2"
                       Text="{Binding Name}"
                       Width="271"
                       Foreground="#FFEEB8B8"></TextBox>
            </Grid>
          </DataTemplate>
        </ItemsControl.ItemTemplate>
      </ItemsControl>
    </Grid>
  </Expander.Content>
</Expander>

Codebehind(ItemsSource设置为_Friends):

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    Image img = new Image();
    img.RenderSize = new Size(30,30);
    img.OpacityMask = Brushes.CadetBlue;
    _Friends = new List<Friend> {
        new Friend{Name="John Smith", IsOnline=true, Image=img},
        new Friend{Name="Name Surname", IsOnline=true, Image=img},
        new Friend{Name="Name2 surname2", IsOnline=false, Image=img}
    };
    OnlineItemsControl.ItemsSource = _Friends;
}