0

我有一个枢轴控件，项目是从列表中绑定的，我想让枢轴标题看起来像一个页码，看起来像这样：(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?"));
        }

最新文章.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; }
    }
4

1 回答 1

0

您必须将标题的文本绑定到您的文章对象上的属性。该属性将是文章的页面索引。

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

另一种选择是使用值转换器。此选项将要求您以某种方式访问​​最新文章。

<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();
    }
}
于 2013-07-17T04:19:41.193 回答