在WP7中使用转换器绑定图像

Question

I'm developing Windows phone apps using VS2012 and C#(Windows 8.0 SDK) and I'm new to it, I'm using the below code to bind PNG image using Converter

xmlns:myproject="clr-namespace:SolutionName.Converters"

 <UserControl.Resources>
    <myproject:LoginHistoryImageConverter x:Key="LoginHistoryImageConverter"/>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="{StaticResource pivotBackground}">
        <ListBox x:Name="listBoxLogs">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid MinWidth="480" Height="88" Margin="12,0,12,0" HorizontalAlignment="Stretch">
                        <Image Width="80" Height="80" Source="{Binding device, Converter={StaticResource LoginHistoryImageConverter}}"/>
                        <StackPanel Orientation="Vertical" HorizontalAlignment="Left" Margin="85,0,0,0" VerticalAlignment="Center">
                            <TextBlock FontSize="25" Text="{Binding date}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Left"/>
                            <TextBlock FontSize="25" Text="{Binding ip_address}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Left" MaxWidth="200"/>
                        </StackPanel>
                        <StackPanel Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,38,0">
                            <TextBlock FontSize="18" Text="{Binding time}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Right"/>
                            <TextBlock FontSize="18" Text="{Binding location}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Right" MaxWidth="200"/>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

you can observe I'm binding image

<Image Width="80" Height="80" Source="{Binding device, Converter={StaticResource LoginHistoryImageConverter}}"/>

I'm getting device as string "M" or "PC", by using converter, I returned BitmapImage

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
        String text = (String)value;                        
        if (text.Equals("M"))
        {
            return new BitmapImage(new Uri("Resources/Assets/mobile.png",UriKind.Relative));
        }
        else
        {
            return new BitmapImage(new Uri("Resources/Assets/pc.png", UriKind.Relative));
        }
 }

when i get string "M" i need to display mobile image else PC image But when i navigate to my page it fires an XamlParseException at "InitializeComponent()" , Please observe image

Even i tried below code for binding image, but no luck

<Image Width="80" Height="80">
    <Image.Source>
        <BitmapImage UriSource="{Binding device, Converter={StaticResource LoginHistoryImageConverter}}"/>
    </Image.Source>
</Image>

Did I miss something. Please help me

Full XAML Code

<phone:PhoneApplicationPage
    x:Class="SampleProject.Views.Settings.Logs.LoginHistory"
    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:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:myproject="clr-namespace:SampleProject.Converters"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">

    <UserControl.Resources>
        <myproject:LoginHistoryImageConverter x:Key="LoginHistoryImageConverter"/>
    </UserControl.Resources>

        <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="{StaticResource pivotBackground}">
        <ListBox x:Name="listBoxLogs">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid MinWidth="480" Height="88" Margin="12,0,12,0" HorizontalAlignment="Stretch">
                        <Image Width="80" Height="80" Source="{Binding device, Converter={StaticResource LoginHistoryImageConverter}}"/>
                        <StackPanel Orientation="Vertical" HorizontalAlignment="Left" Margin="85,0,0,0" VerticalAlignment="Center">
                            <TextBlock FontSize="25" Text="{Binding date}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Left"/>
                            <TextBlock FontSize="25" Text="{Binding ip_address}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Left" MaxWidth="200"/>
                        </StackPanel>
                        <StackPanel Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,38,0">
                            <TextBlock FontSize="18" Text="{Binding time}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Right"/>
                            <TextBlock FontSize="18" Text="{Binding location}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Right" MaxWidth="200"/>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

</phone:PhoneApplicationPage>

Answer 1

First, there's a few issues in the XAML code you provided. The pivotBackground and MessageListForeground resources aren't defined but maybe you defined them at a global level, for instance in the App.xaml , in which case it should fine.

Otherwise, your code should work. You can get more information on the precise cause of failure by checking the details of the exception: when the exception occurs, like you showed in your screenshot, click on "View details", then expand and check the value of the Message and InnerException properties: