Silverlight для Windows Phone 7 ItemsControl Data Binding - PullRequest
Новая
       40

Silverlight для Windows Phone 7 ItemsControl Data Binding

0 голосов
/ 14 июля 2011

Я работаю над приложением для WP7. У меня есть коллекция объектов, каждый из которых имеет некоторые свойства, которые мы должны показать на экране. Я извиняюсь, но чтобы действительно объяснить это, это будет тяжелым кодом.

MyGrouping Class: 

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

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 ) );
    }
}

Теперь для 2 отдельных пользовательских элементов управления в 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;
    }
}

И элемент пользовательского интерфейса, который он использует: 

    <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 кнопки, но они пусты. Я вижу только две синие кнопки. Я уверен, что пропускаю что-то глупое в коде, но просто не могу найти его вообще.

Есть идеи по этому поводу? Я все еще довольно новичок в связывании данных и у меня проблемы с некоторыми деталями реализации. Любая помощь будет отличной. Заранее спасибо.

1 Ответ

0 голосов
/ 14 июля 2011

Прежде всего, вы не предоставили весь код. В коде xaml есть ссылки на объект EntityGroup, и я понятия не имею, что это такое. Но есть несколько замечаний, которые могут вам помочь:

  • вы реализуете какой-то MVVM, а я не видел виртуальную машину. первые два фрагмента кода являются предложениями, принадлежащими модели, а последующие 2 - представлением

  • Чтобы ваш код работал, создайте экземпляры в промежуточном классе для объектов класса и используйте привязку для привязки к ним. Привязка работает с экземплярами объектов, а не с определениями классов. Вот модель представления, которую вы можете использовать: 

    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>

  • тогда вы должны указать DataContext в файле xaml: 

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource ViewModel}}">

  • и затем вы можете привязать к свойствам ViewModel: 

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

И вот оно у вас есть. Привязка работает просто отлично.

НТН, JP

...