Binding Image Source URL с Json Key

Question

Вот мой 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"]; 

T он значение 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 связывания.

Answer 1

Попробуйте изменить в коде, как показано ниже:

В XAML файле ниже

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

В стороне кода добавьте ниже код

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

Edit:

Пут в 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> 

Put в .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>