用Json键绑定图片源url

本文关键字：url 绑定 Json | 更新日期: 2023-09-27 18:18:37

这是我的XAML Code 

<phone:PivotItem Header="Categories" Margin="12,0,12,8">
    <ListBox x:Name="ImageList">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Width="420">
                    <StackPanel Height="325" VerticalAlignment="Top">
                        <Image x:Name="eventImage" Source="{Binding category_image}" VerticalAlignment="Top"/>
                    </StackPanel>
                </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
    </ListBox>
</phone:PivotItem>

这里我将图像与我在Category类中使用的变量绑定，该变量如下所示:

public class Post
{
    public string post_id { get; set; }
    public string category { get; set; }
    public string category_image { get; set; }
}
public class RootObject
{
    public int success { get; set; }
    public string message { get; set; }
    public List<Post> posts { get; set; }
}

我得到category_image的值如下:

 JArray categories = (JArray)post["posts"];

categories值如下

[
    {
        "post_id": "5",
        "category": "Hospitals",
        "category_image": "http://right.mydomain.com/deal_img/hospitals.png"
    },
    {
        "post_id": "2",
        "category": "Play Schools",
        "category_image": "http://right.mydomain.com/deal_img/playschool.png"
    },
    {
        "post_id": "4",
        "category": "Fitness",
        "category_image": "http://right.mydomain.com/deal_img/gym.png"
    },
    {
        "post_id": "7",
        "category": " Salon & Spa",
        "category_image": "http://right.mydomain.com/deal_img/BEAUTY.png"
    },
    {
        "post_id": "12",
        "category": "Food & Drink",
        "category_image": "http://right.mydomain.com/deal_img/restaurants.png"
    },
    {
        "post_id": "13",
        "category": "Car Care",
        "category_image": "http://right.mydomain.com/deal_img/carwash.png"
    }
]

现在我被困在这里，接下来我要做的是，在URL绑定的帮助下动态显示图像

用Json键绑定图片源url

尝试在代码中修改如下:

在XAML文件下面

<ListBox x:Name="ImageList" DataContext="{Binding}">

在代码侧添加下面的代码

JArray categories = (JArray)post["posts"];
DataContext = categories
编辑:

输入XAML:

<phone:Pivot x:Name="pivotItem">
    <phone:PivotItem Header="Categories" DataContext="{Binding}" FontSize="10">
        <ListBox x:Name="ImageList" ItemsSource="{Binding Path=posts}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Width="Auto">
                        <StackPanel Height="323" VerticalAlignment="Top">
                            <Image x:Name="Image" Source="{Binding Path=category_image}" 
                                   VerticalAlignment="Top" Height="323" />
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </phone:PivotItem>
</phone:Pivot>

放入。cs文件:

RootObject Item = JsonConvert.DeserializeObject<RootObject>(JStr);
DataContext = Item;

最后编辑:

输入XAML:

<Grid x:Name="LayoutRoots" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <!--Pivot Control-->
        <phone:Pivot x:Name="pivotItem" Title="Test Category">          
            <!--Pivot item one -->
            <phone:PivotItem Header="Categories" DataContext="{Binding}" FontSize="10">
                <Grid>
                    <phone:LongListSelector x:Name="llsCategoriesList" Grid.Row="0"
                                            Background="Transparent"
                                            LayoutMode="List"
                                            IsGroupingEnabled="False"
                                            HideEmptyGroups="true"
                                            ItemsSource="{Binding Path=posts}">
                        <phone:LongListSelector.ItemTemplate>
                            <DataTemplate>
                                <StackPanel>
                                    <Grid Width="Auto">
                                        <StackPanel Height="323" VerticalAlignment="Top">
                                            <Image x:Name="Image" Source="{Binding Path=category_image}" 
                                                   VerticalAlignment="Top" Height="323" />
                                        </StackPanel>
                                    </Grid>
                                </StackPanel>
                            </DataTemplate>
                        </phone:LongListSelector.ItemTemplate>
                    </phone:LongListSelector>
                </Grid>
            </phone:PivotItem>
        </phone:Pivot>
    </Grid>
</Grid>
相关文章：