Silverlight Windows Phone 7 ItemsControl数据绑定

本文关键字:ItemsControl 数据绑定 Phone Windows Silverlight | 更新日期: 2023-09-27 18:02:16

我正在开发WP7的应用程序。我有一个对象集合,每个对象都有一些属性,我们需要在屏幕上显示。我很抱歉,但要真正解释它,这将是大量的代码。

MyGrouping类:

public class MyListGrouping : INotifyPropertyChanged
{
    public MyListGrouping( )
    {
        _Title = "";
        _Group = new ObservableCollection<MyList>( );
    }
    private string _Title;
    public string Title
    {
        get { return _Title; }
        set
        {
            _Title = value;
            NotifyPropertyChanged( "Title" );
        }
    }
    private ObservableCollection<MyList> _Group;
    public ObservableCollection<MyList> Group
    {
        get { return _Group; }
        set
        {
            _Group = value;
            NotifyPropertyChanged( "Group" );
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public void NotifyPropertyChanged( string propertyName )
    {
        if ( PropertyChanged != null )
            PropertyChanged( this, new PropertyChangedEventArgs( propertyName ) );
    }
}

MyList类:

public class MyList : INotifyPropertyChanged
{
    public MyList( ){}
    private string _DisplayName;
    public string DisplayName
    {
        get{return _DisplayName;}
        set
        {
            _DisplayName = value;
            NotifyPropertyChanged( "DisplayName" );
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    public void NotifyPropertyChanged( string propertyName )
    {
        if ( PropertyChanged != null )
            PropertyChanged( this, new PropertyChangedEventArgs( propertyName ) );
    }
}

现在是两个独立的用户控件在Silverlight。

    <ScrollViewer VerticalScrollBarVisibility="Auto">
    <ItemsControl x:Name="ItemContainer" ItemsSource="{Binding Path=ListGroups}" >
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical" Margin="0,5,0,0">
                    <!--Only works if we don't bind here for some reason-->
                    <base:MyListView ListGroup="{Binding Group}" Title="{Binding Title}" />
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>
    public partial class MyListGroupingView : UserControl
{
    public static readonly DependencyProperty ListGroupsProperty = DependencyProperty.Register( "ListGroups", typeof( ObservableCollection<MyListGrouping> ), typeof( MyListGroupingView ), new PropertyMetadata( null ) );
    public MyListGroupingView( )
    {
        InitializeComponent( );
        this.DataContext = this;
    }
    public ObservableCollection<MyListGrouping> ListGroups
    {
        get { return (ObservableCollection<MyListGrouping>)GetValue( ListGroupsProperty ); }
        set { SetValue( ListGroupsProperty, value ); }
    }
    private void UserControl_Loaded( object sender, RoutedEventArgs e )
    {
        MyListGrouping aList = new MyListGrouping( ) { Title = "A" };
        aList.Group.Add( new MyList( ) { DisplayName = "Ant" } );
        aList.Group.Add( new MyList( ) { DisplayName = "Art" } );
        MyListGrouping bList = new MyListGrouping( ) { Title = "B" };
        bList.Group.Add( new MyList( ) { DisplayName = "Bob" } );
        bList.Group.Add( new MyList( ) { DisplayName = "Billy" } );
        ObservableCollection<MyListGrouping> collection = new ObservableCollection<MyListGrouping>( );
        collection.Add( aList );
        collection.Add( bList );
        ListGroups = collection;
    }
}

和它使用的UI元素:

    <Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="20*"/>
        <RowDefinition Height="80*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30*"/>
        <ColumnDefinition Width="70*"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="SectionLetterBtn" Content="{Binding Path=EntityGroup.StartingText}" Background="{StaticResource PhoneAccentBrush}" Foreground="{StaticResource PhoneForegroundBrush}" BorderBrush="Transparent" Grid.Column="0" Grid.Row="0" />
    <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
        <ItemsControl x:Name="ItemContainer" ItemsSource="{Binding Path=EntityGroup.Group}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="20*" />
                            <ColumnDefinition Width="80*" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding DisplayName}" Grid.Column="1" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>
    public partial class MyListView : UserControl
{
    public static readonly DependencyProperty TitleProperty = DependencyProperty.Register( "Title", typeof( string ), typeof( MyListView ), new PropertyMetadata( null ) );
    public static readonly DependencyProperty ListGroupProperty = DependencyProperty.Register( "ListGroup", typeof( ObservableCollection<MyList> ), typeof( MyListView ), new PropertyMetadata( null ) );
    public MyListView( )
    {
        InitializeComponent( );
        this.DataContext = this;
    }
    public ObservableCollection<MyList> ListGroup
    {
        get { return (ObservableCollection<MyList>)GetValue( ListGroupProperty ); }
        set { SetValue( ListGroupProperty, value ); }
    }
    public string Title
    {
        get { return (string)GetValue( TitleProperty ); }
        set { SetValue( TitleProperty, value ); }
    }
}

我遇到的问题是,我会看到2个按钮显示,但他们是空的。我只看到两个蓝色的按钮。我确信我在代码中遗漏了一些愚蠢的东西,但根本找不到它。

对此有什么想法吗?我对数据绑定还是个新手,在一些实现细节上遇到了麻烦。任何帮助都会很好。提前感谢。

Silverlight Windows Phone 7 ItemsControl数据绑定

首先,您没有提供所有的代码。在xaml代码中有对EntityGroup对象的绑定引用,我不知道那是什么。但是有一些观察可能会对你有所帮助:

  • 你正在实现某种MVVM,而我没有看到VM。前两个代码片段是属于模型的类后两个属于视图
  • 为了使你的代码工作,在类对象的中间类中创建实例,并使用绑定来绑定它们。绑定作用于实例化对象,而不是类定义。下面是一个你可以使用的ViewModel:

    using System;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    namespace **YourNamespace**
    {
        public class ViewModel
        {
            public MyList TheList {get; set;}
            public MyListGrouping ListGrouping {get; set;}
            public ViewModel()
            {
                TheList = new MyList();
                ListGrouping = new MyListGrouping();
                PopulateLists();
            }
            private void PopulateLists()
            {
                TheList.DisplayName = "Testing display name";
                MyList lList = new MyList();
                lList.DisplayName = "List0";
                MyList lList1 = new MyList();
                lList1.DisplayName = "List1";
                MyList lList2 = new MyList();
                lList2.DisplayName = "List2";
                ListGrouping.Title = "Testing title";
                ListGrouping.Group.Add(mList);
                ListGrouping.Group.Add(lList);
                ListGrouping.Group.Add(lList1);
                ListGrouping.Group.Add(lList2);
            }
        }
    }
    
  • 你的xaml文件相当混乱和不完整。然而,如果你想做正确的绑定,它们的头应该包含这样的行:

    ...
    xmlns:base="clr-namespace:**YourNamespace**" 
    ...
    <UserControl.Resources>
        <base:ViewModel   x:Key="ViewModel"/>
    </UserControl.Resources>
    
  • 那么你应该在xaml文件中指定DataContext:

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource ViewModel}}">
    
  • 然后你可以绑定到ViewModel的属性:

    <TextBlock Text="{Binding Path=TheList.DisplayName}" Grid.Column="1" />  
    

就是这样了。

HTH,摩根大通