Question

我有一个数据透视控件，这些项目是从列表中绑定的，我想让数据透视表标题看起来像页码，如下所示：（1/20）（2/20）（3/20）。 ......这是我的xaml：

<Grid x:Name="LayoutRoot">
        <Grid.Background>
            <ImageBrush ImageSource="/Images/PivotBackground.png"/>
        </Grid.Background>
        <!--Pivot Control-->
        <controls:Pivot x:Name="newsPivot" ItemsSource="{Binding LatestArticles}" Margin="0,68,0,0">
            <!--Pivot item one-->
            <controls:Pivot.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="1" FontSize="30" Foreground="White" TextWrapping="Wrap"/>
                </DataTemplate>
            </controls:Pivot.HeaderTemplate>
            <controls:Pivot.ItemTemplate>
                <DataTemplate>
                    <ScrollViewer>
                    <Grid>
                        <StackPanel>
                            <TextBlock Text="{Binding title}" FontSize="30" Foreground="Black" TextWrapping="Wrap" 
                                   Grid.Row="1"   
                                   Grid.Column="0"
                                   Width="425"
                                   Margin="10,0,0,0"/>
                        </StackPanel>
                        <StackPanel>
                            <Image delay:LowProfileImageLoader.UriSource="{Binding thumbnail, StringFormat='http://digitaledition.philstar.com/newsrepository/newsarticles/thumbs/images/\{0\}'}" 
                                   Margin="18,100,0,0"
                                   Grid.Column="0"
                                   Grid.Row="2"
                                   HorizontalAlignment="Left"
                                   Width="150" 
                                   Height="175"  
                                   Stretch="UniformToFill" />
                        </StackPanel>
                        <StackPanel>
                            <TextBlock Text="{Binding author, StringFormat='By \{0\}'}" TextWrapping="Wrap" FontSize="22"
                                   Grid.Column="1"
                                   Width="220"
                                   Foreground="Gray"
                                   Margin="120,135,0,0"/>
                        </StackPanel>
                        <StackPanel>
                            <TextBlock Text="{Binding dateFormatted}" TextWrapping="Wrap" FontSize="20"
                                   Grid.Column="1"
                                   Width="240"
                                   Foreground="Gray"
                                   Margin="140,210,0,0"/>
                        </StackPanel>
                        <StackPanel>
                            <TextBlock Text="{Binding content}" TextWrapping="Wrap" FontSize="24"
                                   Grid.Column="1"
                                   Width="425"
                                   Foreground="Black"
                                   Margin="10,325,0,0"/>
                        </StackPanel>
                    </Grid>
                    </ScrollViewer>
                </DataTemplate>
            </controls:Pivot.ItemTemplate>
            <!--Pivot item two-->
        </controls:Pivot>
    </Grid>

花了几个小时搜索谷歌但没有找到解决方案。请有人帮助我完成我的项目。提前谢谢！

Xaml背后的代码：

public NewsPivot()
        {
            InitializeComponent();


            var y = new WebClient();
            Observable
              .FromEvent<DownloadStringCompletedEventArgs>(y, "DownloadStringCompleted")
              .Subscribe(r =>
              {
                  var des =
                    JsonConvert.DeserializeObject<List<LatestArticles>>(r.EventArgs.Result);
                  newsPivot.ItemsSource = des.Where(s=> s.category_id == "1");
              });
            y.DownloadStringAsync(
              new Uri("http://sample.json.com/mobile/articles?"));
        }

LatestArticle.cs：

public class LatestArticles
    {
        public string id { get; set; }
        public string title { get; set; }
        public string thumbnail { get; set; }
        public string hits { get; set; }
        public string thumbCaption { get; set; }
        public string category_id { get; set; }
        public string dateFormatted { get; set; }
        public string author { get; set; }
    }

Answer 1

您必须将Header的文本绑定到Articles对象上的属性。这个属性将是文章的页面索引。

<controls:Pivot.HeaderTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding PageNumber}" FontSize="30" Foreground="White" TextWrapping="Wrap"/>
    </DataTemplate>
</controls:Pivot.HeaderTemplate>

然后，您需要在将文章添加到LatestArticles集合时设置文章的页码。

LatestArticles.Add(article);
article.PageNumber = LatestArticles.Count +1;

另一种选择是使用value converter。此选项要求您以某种方式访问LatestArticles。

<controls:Pivot.HeaderTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding Converter={StaticResource PageNumberConverter}}" FontSize="30" Foreground="White" TextWrapping="Wrap"/>
    </DataTemplate>
</controls:Pivot.HeaderTemplate>

ValueConverter非常简单

public class PageNumberConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        // Assumes that the App.xaml.cs class has a static ViewModel property
        return App.ViewModel.LatestArticles.IndexOf(value) + 1;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

如何将数据透视表标题更改为页码？

1 个答案: