Databases
StackOverflow2013
Postsdbo
POBinding image using converter in wp7
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBinding image using converter in wp7
    text
    copied!<p>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 <code>Converter</code></p> <pre class="lang-xml prettyprint-override"><code>xmlns:myproject="clr-namespace:SolutionName.Converters" &lt;UserControl.Resources&gt; &lt;myproject:LoginHistoryImageConverter x:Key="LoginHistoryImageConverter"/&gt; &lt;/UserControl.Resources&gt; &lt;Grid x:Name="LayoutRoot" Background="{StaticResource pivotBackground}"&gt; &lt;ListBox x:Name="listBoxLogs"&gt; &lt;ListBox.ItemTemplate&gt; &lt;DataTemplate&gt; &lt;Grid MinWidth="480" Height="88" Margin="12,0,12,0" HorizontalAlignment="Stretch"&gt; &lt;Image Width="80" Height="80" Source="{Binding device, Converter={StaticResource LoginHistoryImageConverter}}"/&gt; &lt;StackPanel Orientation="Vertical" HorizontalAlignment="Left" Margin="85,0,0,0" VerticalAlignment="Center"&gt; &lt;TextBlock FontSize="25" Text="{Binding date}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Left"/&gt; &lt;TextBlock FontSize="25" Text="{Binding ip_address}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Left" MaxWidth="200"/&gt; &lt;/StackPanel&gt; &lt;StackPanel Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,38,0"&gt; &lt;TextBlock FontSize="18" Text="{Binding time}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Right"/&gt; &lt;TextBlock FontSize="18" Text="{Binding location}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Right" MaxWidth="200"/&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; &lt;/DataTemplate&gt; &lt;/ListBox.ItemTemplate&gt; &lt;/ListBox&gt; &lt;/Grid&gt; </code></pre> <p>you can observe I'm binding image </p> <pre><code>&lt;Image Width="80" Height="80" Source="{Binding device, Converter={StaticResource LoginHistoryImageConverter}}"/&gt; </code></pre> <p>I'm getting <code>device</code> as string "M" or "PC", by using converter, I returned <code>BitmapImage</code></p> <pre><code>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)); } } </code></pre> <p>when i get string <code>"M"</code> i need to display <code>mobile</code> image else <code>PC</code> image But when i navigate to my page it fires an <code>XamlParseException</code> at <code>"InitializeComponent()"</code>, Please observe image <img src="https://i.stack.imgur.com/kk9a7.png" alt="enter image description here"></p> <p>Even i tried below code for binding image, but no luck</p> <pre><code>&lt;Image Width="80" Height="80"&gt; &lt;Image.Source&gt; &lt;BitmapImage UriSource="{Binding device, Converter={StaticResource LoginHistoryImageConverter}}"/&gt; &lt;/Image.Source&gt; &lt;/Image&gt; </code></pre> <p>Did I miss something. Please help me</p> <p>Full XAML Code</p> <pre><code>&lt;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"&gt; &lt;UserControl.Resources&gt; &lt;myproject:LoginHistoryImageConverter x:Key="LoginHistoryImageConverter"/&gt; &lt;/UserControl.Resources&gt; &lt;!--LayoutRoot is the root grid where all page content is placed--&gt; &lt;Grid x:Name="LayoutRoot" Background="{StaticResource pivotBackground}"&gt; &lt;ListBox x:Name="listBoxLogs"&gt; &lt;ListBox.ItemTemplate&gt; &lt;DataTemplate&gt; &lt;Grid MinWidth="480" Height="88" Margin="12,0,12,0" HorizontalAlignment="Stretch"&gt; &lt;Image Width="80" Height="80" Source="{Binding device, Converter={StaticResource LoginHistoryImageConverter}}"/&gt; &lt;StackPanel Orientation="Vertical" HorizontalAlignment="Left" Margin="85,0,0,0" VerticalAlignment="Center"&gt; &lt;TextBlock FontSize="25" Text="{Binding date}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Left"/&gt; &lt;TextBlock FontSize="25" Text="{Binding ip_address}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Left" MaxWidth="200"/&gt; &lt;/StackPanel&gt; &lt;StackPanel Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,38,0"&gt; &lt;TextBlock FontSize="18" Text="{Binding time}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Right"/&gt; &lt;TextBlock FontSize="18" Text="{Binding location}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Right" MaxWidth="200"/&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; &lt;/DataTemplate&gt; &lt;/ListBox.ItemTemplate&gt; &lt;/ListBox&gt; &lt;/Grid&gt; &lt;/phone:PhoneApplicationPage&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload