Search code examples
c#windows-phone-8data-bindingpivotitem

wp8 bind every PivotItem to different List


I have created WP8 application with Pivot controll. There are 5 PivotItems and 3 of them should be bound to 3 lists or to one list with different filtered data. How to do this?

XAML:

<phone:Pivot Name="PControl" Grid.Row="1" Style="{StaticResource PivotStyle}">
                <phone:PivotItem>
                    <phone:PivotItem.Header>
                        <Grid Height="80">
                            <TextBlock Text="offer" FontSize="45" Height="80" />
                        </Grid>
                    </phone:PivotItem.Header>
                    <phone:LongListSelector Margin="0,0,0,0" ItemsSource="{Binding lstOffer}">
                        <phone:LongListSelector.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Margin="0,0,0,17">
                                    <TextBlock Text="some binding" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource TextBlockMnuTekst}"/>
                                </StackPanel>
                            </DataTemplate>
                        </phone:LongListSelector.ItemTemplate>
                    </phone:LongListSelector>
                </phone:PivotItem>
  </phone:Pivot>
.
.
.

<phone:PivotItem>
                    <phone:PivotItem.Header>
                        <Grid Height="80">
                            <TextBlock Text="services" FontSize="45" Height="80" />
                        </Grid>
                    </phone:PivotItem.Header>
                    <phone:LongListSelector Margin="0,0,0,0" ItemsSource="{Binding lstServices}">
                        <phone:LongListSelector.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Margin="0,0,0,17">
                                    <TextBlock Text="some binding" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource TextBlockMnuTekst}"/>
                                </StackPanel>
                            </DataTemplate>
                        </phone:LongListSelector.ItemTemplate>
                    </phone:LongListSelector>
                </phone:PivotItem>

C#:

public class clsPivotData
    {
        public string Name { get; set; }
        public List<clsPivotItemList> PivotItemList { get; set; }

        public clsPivotData()
        {
            PivotItemList = new List<clsPivotItemList>();
        }
    }

    public class clsPivotItemList
    {
        public string id { get; set; }
        public string ssubname { get; set; }
        public string visible { get; set; }
        public string icon { get; set; }
        public string itemType { get; set; }
        public string url { get; set; }
        public string desc { get; set; }

    }
    
    public partial class MainPage : PhoneApplicationPage
    {
        public ObservableCollection<clsPivotData> Items { get; set; }
        public static MainPage CurrentMainPage;

        public List<clsPivotData> lstOffer { get; set; }
        public List<clsPivotData> lstServices { get; set; }
        public List<clsPivotData> lstInfo { get; set; }

        // Constructor
        public MainPage()
        {
            InitializeComponent();

            CurrentMainPage = this;

            // Set the data context of the listbox control to the sample data
            DataContext = App.ViewModel;

            lstOffer = new List<clsPivotData>(from i in Items where i.Name == "offer" select i);
            lstServices = new List<clsPivotData>(from i in Items where i.Name == "services" select i);
            lstInfo = new List<clsPivotData>(from i in Items where i.Name == "info" select i);
.
.
.

I get correct data in lstOffer and lstServices and didn't show loading data, that is not the problem. I don't know how to bind TextBlock from LongListSelector (Text=some binding) to property ssubname which is the property of clsPivotItemList class and List is the property of clsPivotData class.


Solution

  • I finally found an answer. I put next code in MainViewModel class:

    public ObservableCollection<clsPivotData> Items { get; set; }
            
    public ObservableCollection<clsPivotData> lstOffer { get; set; }
    public ObservableCollection<clsPivotData> lstServices { get; set; }
    public ObservableCollection<clsPivotData> lstInfo { get; set; }
    
    // Constructor
      public MainViewModel()
      {
        this.Items = new ObservableCollection<clsPivotData>();
    
        LoadData();
        lstOffer = Items.Where(o => o.Name == "offer").FirstOrDefault().PivotItems;
        lstServices = Items.Where(o => o.Name == "service").FirstOrDefault().PivotItems;
        lstInfo = Items.Where(o => o.Name == "info").FirstOrDefault().PivotItems;    }

    In XAML I inserted ListBox on this way:

    <ListBox Margin="0,0,0,0" ItemsSource="{Binding lstOffer}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                 <ItemsControl>
                      <StackPanel Margin="0,0,0,17">
                           <TextBlock Text="{Binding ssubname}" TextWrapping="Wrap" Margin="12,0,12,0" Style="{StaticResource TextBlockMnuTekst30}"/>
                      </StackPanel>
                  </ItemsControl>
            </DataTemplate>
       </ListBox.ItemTemplate>
      </ListBox>
    
    .
    .
    .
    In previous solution, lstOffer, lstServices and lstInfo wasn't in MainVewModel but in MainPage and MainPage's DataContext was set to MainViewModel ViewModel object. This new solution gives me result I've expected, that means that ListBox is populated.