datapager silverlight中的stackpanel

Question

I am developing a silverlight navigation application and got stuck on the following problem...

The guy I am developing the app wants to have a News page where you can see all published news on the left side and the clicked (or latest news if none is clicked) on the right side. He wanted to have a header, text and publishing date for each news in the news list. Also he wanted to have paging so that there won't be to many news in the list at once...

I did this:

        foreach (Model.News news in s)
        {
            StackPanel stackPanel = new StackPanel();

            HyperlinkButton hyperlinkButton = new HyperlinkButton();
            hyperlinkButton.Tag = news.Header;
            hyperlinkButton.Content = news.Header;
            hyperlinkButton.FontSize = 15;
            hyperlinkButton.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
            hyperlinkButton.Click += new RoutedEventHandler(Button_Click);

            stackPanel.Children.Add(hyperlinkButton);

            TextBlock textBlock = new TextBlock();
            textBlock.Foreground = new SolidColorBrush(Colors.Gray);
            textBlock.FontSize = 12;
            textBlock.FontFamily = new FontFamily("Verdana");
            textBlock.TextWrapping = TextWrapping.Wrap;
            textBlock.Text = news.Text;

            stackPanel.Children.Add(textBlock);

            TextBlock dateTextBlock = new TextBlock();
            dateTextBlock.Foreground = new SolidColorBrush(Colors.Gray);
            dateTextBlock.FontSize = 10;
            dateTextBlock.FontFamily = new FontFamily("Verdana");
            dateTextBlock.TextWrapping = TextWrapping.Wrap;
            dateTextBlock.FontWeight = FontWeights.Bold;
            dateTextBlock.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
            dateTextBlock.Text = news.Date.ToShortDateString();

            stackPanel.Children.Add(dateTextBlock);

            stackPanel.Children.Add(new TextBlock());
            newsStackPanel.Children.Add(stackPanel);

        }

        PagedCollectionView itemListView = new PagedCollectionView(newsStackPanel.Children);

        newsPager.Source = itemListView;

and all of it goes here

<Grid x:Name="LayoutRoot" Loaded="LayoutRoot_Loaded" MaxWidth="1100">
    <Grid.RenderTransform>
        <CompositeTransform/>
    </Grid.RenderTransform>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="2"/>
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>
    <RichTextBox Name="contentRTB"  MaxWidth="1000" Margin="10, 30, 10, 30" Grid.Column="2"
                         HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" 
                         TextWrapping="Wrap"
                         Style="{StaticResource RichTextBoxStyle}" IsReadOnly="True"/>
    <Rectangle Grid.Column="1" Margin="0,10"
               Fill="#FF0067C6"/>
    <TextBlock Name="header" Foreground="#FF0067C6" FontSize="18" FontFamily="Verdana" HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Column="0"></TextBlock>
    <sdk:DataPager x:Name="newsPager"
                        DisplayMode="FirstLastNumeric"
                        Background="#FF0067C6"
                        PageSize="3"
                        AutoEllipsis="True"
                        NumericButtonCount="3"/>
    <StackPanel Name="newsStackPanel" Grid.Column="0" Orientation="Vertical" Margin="0,50,0,0"/>
</Grid>

The newsPager displayes (correctly) 2 pages because i have currently 5 news and the pageSize is set to 3 but they are all displayed on the same page so I dont get the desired paging... how can i fix it

Answer 1

Your code is adding all the items to a StackPanel, then it is putting that StackPanel inside another StackPanel called "newsStackPanel" below the DataPager. So, right now, the DataPager has nothing to do with the display of your news articles, and you won't be seeing any paging happening.

Instead, take a look at the DataPager sample code here:

http://msdn.microsoft.com/en-us/library/system.windows.controls.datapager(VS.95).aspx#Y9406

You'll need to modify that sample code to contain a list of StackPanels like this:

    List<StackPanel> itemList = new List<StackPanel>();

Then, for each of your news items, add them to that list instead of an outer StackPanel:

    itemList.Add(stackPanel);

You'll then wrap that up and bind it to both your data pager and a new list control :

    // Wrap the itemList in a PagedCollectionView for paging functionality
    PagedCollectionView itemListView = new PagedCollectionView(itemList);

    // Set the DataPager and ListBox to the same data source.
    newsPager.Source = itemListView;
    listBox1.ItemsSource = itemListView;

The sample uses a ListBox called "listBox1". You have lots of choices there. Perhaps replace the "newsStackPanel" with a ListBox called "newsList".

OK, that should be enough to get you through this.

Now for a little more homework: You should really consider switching this to the MVVM pattern where you bind these values and template them instead of making UI controls in C#. This results in much cleaner code, enables much easier reuse, improves testability, and so on. There are a million zillion articles on the web for this. Here is one from MS:

http://msdn.microsoft.com/en-us/library/gg430869(v=PandP.40).aspx

Answer 2

I don't know if the DataPager control you're using handles the paging completely.

You could only add the news items that are on the page you want to view to the stack panel.

One easy way to do that could be to use LINQ in your for each, something like:

foreach (Model.News news in s.Skip(newsPager.PageSize * newsPager.PageIndex).Take(newsPager.PageSize))

you'd have to reinitialize the items in the pager when the page index changes then too.