locked
Advanced Databinding RRS feed

  • Question

  • Hi Pros,

    I used the grid Project template for Windows store apps and would like to expand the data model. My issue is to bring another data Level into the Item class.

    The structure then would look like:

    ->SampleDataGroup-> SampleDataItem->MyNewSubItem

    I implemented MyNewSubItem in SampleDataItem the same way SampleDataItem is implemented in SampleDataGroup. I would like to Display the new subitems inside the SampleDataItem in the GroupDetailPage. When this page is called the viewModels for the Databinding are filled in the LoadState Method:

            protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
            {
                var group = SampleDataSource.GetGroup((String)navigationParameter);
                this.DefaultViewModel["Group"] = group;
                this.DefaultViewModel["Items"] = group.Items;
            }

     

    how can i add my new subitem and add the databinding on my xaml page? Do i have to Change the implementation in my datamodel?

    I have absolutely no clue how to solve this.


    Thanks in advance for your help!

    Saturday, January 19, 2013 5:39 PM

Answers

  • Could you do the following; add your new class

        public class SubItem : Common.BindableBase
        {
            private string _title = string.Empty;
            public string Title
            {
                get { return this._title; }
                set { this.SetProperty(ref this._title, value); }
            }
        }
    

    then, add new property reference to an instance of that class into SampleDataItem

            private SubItem _subItem;
            public SubItem SubItem
            {
                get { return this._subItem; }
                set { this.SetProperty(ref this._subItem, value); }
            }
    

    Ensure that when the sample data is constructed this gets initialised.

    Then, you could change the binding in the "Standard500x130ItemTemplate" to display the subitem, i.e.

                <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                    <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
                    <TextBlock Text="{Binding SubItem.Title}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
                </StackPanel>
    

    or if your SubItem is more complicated use a ContentControl with a DataTemplate:

                <ContentControl Grid.Row="1" Content="{Binding SubItem}">
                    <ContentControl.ContentTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Title}"></TextBlock>
                        </DataTemplate>
                    </ContentControl.ContentTemplate>
                </ContentControl>
    

     

    http://babaandthepigman.spaces.live.com/blog/

    • Proposed as answer by Aaron Xue Tuesday, January 22, 2013 10:37 AM
    • Marked as answer by Aaron Xue Monday, February 4, 2013 7:19 AM
    Sunday, January 20, 2013 8:30 PM
  • Add this to the "Standard500x130ItemTemplate"

                <ItemsControl ItemsSource="{Binding SubItems}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Title}"></TextBlock>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
    


    http://babaandthepigman.spaces.live.com/blog/

    • Marked as answer by Aaron Xue Monday, February 4, 2013 7:19 AM
    Thursday, January 24, 2013 9:30 AM

All replies

  • Could you do the following; add your new class

        public class SubItem : Common.BindableBase
        {
            private string _title = string.Empty;
            public string Title
            {
                get { return this._title; }
                set { this.SetProperty(ref this._title, value); }
            }
        }
    

    then, add new property reference to an instance of that class into SampleDataItem

            private SubItem _subItem;
            public SubItem SubItem
            {
                get { return this._subItem; }
                set { this.SetProperty(ref this._subItem, value); }
            }
    

    Ensure that when the sample data is constructed this gets initialised.

    Then, you could change the binding in the "Standard500x130ItemTemplate" to display the subitem, i.e.

                <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                    <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
                    <TextBlock Text="{Binding SubItem.Title}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
                </StackPanel>
    

    or if your SubItem is more complicated use a ContentControl with a DataTemplate:

                <ContentControl Grid.Row="1" Content="{Binding SubItem}">
                    <ContentControl.ContentTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Title}"></TextBlock>
                        </DataTemplate>
                    </ContentControl.ContentTemplate>
                </ContentControl>
    

     

    http://babaandthepigman.spaces.live.com/blog/

    • Proposed as answer by Aaron Xue Tuesday, January 22, 2013 10:37 AM
    • Marked as answer by Aaron Xue Monday, February 4, 2013 7:19 AM
    Sunday, January 20, 2013 8:30 PM
  • Hi Baba,

    this works fine for one subitem per item. I would like to have n subitems per item so I implemented them as collection in the SampleDataItemClass:
            private ObservableCollection<SubItem> _subItems = new ObservableCollection<SubItem>();
            public ObservableCollection<SubItem> SubItems        {
                get { return this._subItems; }
            }
    How can I Display that in the xaml page with databinding?

    Trombone

    Wednesday, January 23, 2013 10:46 PM
  • Add this to the "Standard500x130ItemTemplate"

                <ItemsControl ItemsSource="{Binding SubItems}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Title}"></TextBlock>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
    


    http://babaandthepigman.spaces.live.com/blog/

    • Marked as answer by Aaron Xue Monday, February 4, 2013 7:19 AM
    Thursday, January 24, 2013 9:30 AM
  • Thanks, easy to use if you know how:)
    Thursday, January 24, 2013 6:50 PM