Windows Phone 8应用程序中的图像绑定

Question

我要在这里做的是，如果在Longlist中选择了一个项目，则它应该基于分配给该项目的imageurl显示相应的图像，但是该图像未显示在DetailsPage.xaml中，我不知道我在哪里犯了错误请指导我

MainPage.xaml.cs

namespace PivotApp1
{
public partial class MainPage : PhoneApplicationPage
{

    public MainPage()
    {
        InitializeComponent();


        DataContext = App.ViewModel;

    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        if (!App.ViewModel.IsDataLoaded)
        {
            App.ViewModel.LoadData();
        }
    }

    private void MainLongListSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (MainLongListSelector.SelectedItem == null)
            return;

        NavigationService.Navigate(new Uri("/DetailsPage.xaml?selectedItem=" + (MainLongListSelector.SelectedItem as ItemViewModel).ID, UriKind.Relative));


        MainLongListSelector.SelectedItem = null;

    }


}

}

DetailsPage.xaml.cs

namespace PivotApp1
{    
public partial class DetailsPage : PhoneApplicationPage
{
    public DetailsPage()
    {
        InitializeComponent();


        DataContext = App.ViewModel;

    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        if (!App.ViewModel.IsDataLoaded)
        {
            App.ViewModel.LoadData();
        }
    }


}

}

MainViewModel.cs

namespace PivotApp1.ViewModels
{
public class MainViewModel : INotifyPropertyChanged
{
    public MainViewModel()
    {
        this.Items = new ObservableCollection<ItemViewModel>();
    }

    public ObservableCollection<ItemViewModel> Items { get; private set; }

    private string _sampleProperty = "Sample Runtime Property Value";

    public string SampleProperty
    {
        get
        {
            return _sampleProperty;
        }
        set
        {
            if (value != _sampleProperty)
            {
                _sampleProperty = value;
                NotifyPropertyChanged("SampleProperty");
            }
        }
    }

    public string LocalizedSampleProperty
    {
        get
        {
            return AppResources.SampleProperty;
        }
    }

    public bool IsDataLoaded
    {
        get;
        private set;
    }







    public void LoadData()
    {

        this.Items.Add(new ItemViewModel() { ID = "0", LineOne = "Shri Ganesh Aarti", LineThree = "/images/icons/durgamaa.jpg" });
        this.Items.Add(new ItemViewModel() { ID= "1", LineOne = "Shri Hanuman Aarti", LineThree = "/images/icons/GaneshJi.jpg" });
        this.Items.Add(new ItemViewModel() { ID= "2", LineOne = "Maa Durga Aarti",  LineThree = "/images/icons/icons/Sheravaalimaa.jpg" });



        this.IsDataLoaded = true;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (null != handler)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}






    }

ItemViewModel.cs

namespace PivotApp1.ViewModels
{
public class ItemViewModel : INotifyPropertyChanged
{

    private string _id;

    public string ID
    {
        get
        {
            return _id;
        }
        set
        {
            if (value != _id)
            {
                _id = value;
                NotifyPropertyChanged("ID");
            }
        }
    }


    private string _lineOne;

    public string LineOne
    {
        get
        {
            return _lineOne;
        }
        set
        {
            if (value != _lineOne)
            {
                _lineOne = value;
                NotifyPropertyChanged("LineOne");
            }
        }
    }


    private string _lineThree;

    public string LineThree
    {
        get
        {
            return _lineThree;
        }
        set
        {
            if (value != _lineThree)
            {
                _lineThree = value;
                NotifyPropertyChanged("LineThree");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (null != handler)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

}

Page.xaml

<phone:PhoneApplicationPage
x:Class="PivotApp1.DetailsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:System="clr-namespace:System;assembly=mscorlib"
d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent" d:DataContext="{Binding Items[0]}>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="5,10,0,0" Height="429" Width="470" VerticalAlignment="Top" HorizontalAlignment="Left">

        <Image Source="{Binding Path=LineThree}" VerticalAlignment="Top" HorizontalAlignment="Left" Width="390" Height="400"></Image>
      <!--  <Image Source="/images/icons/GaneshJi.jpg"></Image>-->
    </Grid>
</Grid>

Answer 1

导航到它时，您似乎没有将DataContext设置为“详细信息”页面上的所选项目。 尝试改变OnNavigatedTo方法在DetailsPage.xaml.cs下面的代码。

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
     string selectedItem = null;

     if (this.NavigationContext.QueryString.ContainsKey("SelectedItem"))
     {
          selectedItem = this.NavigationContext.QueryString["SelectedItem"];
     }

     if (selectedItem != null)
     {
          DataContext = App.ViewModel.Items.Where(p => string.Compare(selectedItem, p.ID) == 0).FirstOrDefault();
     }
}

您还需要删除行DataContext = App.ViewModel; 来自DetailsPage.xaml.cs构造函数。