使用来自 JSON 的图像更改评级

Question

我有一个这样的 JSON：

我想使用下图在 gridview 中显示数据的“评级”：

例如评分值为5，会显示如下：

如果评分为3，则显示如下：

如果评分为0，则显示如下：

代码：

    try
                            {
                                loading.Visibility = Visibility.Visible;
                                string urlPath1 = "http://.../results.json?module=listing&page=1&token=3f63-dc43-c8d5-eb45-8cbf-b72d-9d98-800f";
                                var httpClient1 = new HttpClient(new HttpClientHandler());

                                var values1 = new List<KeyValuePair<string, string>>
                                {

                                };
                                HttpResponseMessage response1 = await httpClient1.GetAsync(urlPath1);
                                response1.EnsureSuccessStatusCode();

                                if (!response1.IsSuccessStatusCode)
                                {
                                    busyIndicator.IsActive = false;
                                    RequestException();
                                }
                                string jsonText1 = await response1.Content.ReadAsStringAsync();
                                JsonObject jsonObject1 = JsonObject.Parse(jsonText1);
                                JsonArray jsonData1 = jsonObject1["data"].GetArray();

                                foreach (JsonValue groupValue1 in jsonData1)
                                {
                                    JsonObject groupObject2 = groupValue1.GetObject();
string title = groupObject2["title"].GetString();
    double rating = groupObject2["rating"].GetNumber();


                                    ListingClass file1 = new ListingClass();
                                    file.Title = title;
                                    file1.Rating = Convert.ToInt32(rating);

                                    listingDatasource.Add(file1);
                                }
                                itemGridView.ItemsSource = listingDatasource;
                                busyIndicator.IsActive = false;
                            }

                            catch (HttpRequestException ex)
                            {
                                busyIndicator.IsActive = false;
                                RequestException();
                            }

如何使用图片显示评分？

注意： 评分最大值为5

Answer 1

看来你应该可以使用第三方控件了，比如the UWP-Composition-Rating-Control。

W 应该能够将您的图像设置为 Rating 控件的 FilledImage 和 EmptyImage 属性。然后我们可以将ListingClass类中Rating的编号绑定到Rating控件的Value上。

例如：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <GridView  Name="itemGridView">
        <GridView.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock  Text="{Binding Title}"></TextBlock>
                    <controls:Rating x:Name="Devils"
                     Value="{Binding Rating}"
                     Maximum="5"
                     ItemHeight="60"
                     ItemPadding="24"
                     StepFrequency="1"
                     EmptyImage="ms-appx:///Assets/empty.png"
                     FilledImage="ms-appx:///Assets/filled.png" />
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>