Setting image from data binding windows mobile c#? - windows-phone-7

Hello everyone i am new to windows mobile. I am usuing a LongListSelector. I have my class Menu.cs which have the follwing setter and getter :
public Uri Picture
{
get { return picture; }
set
{
if (value != picture)
{
picture = value;
NotifyDataHasChanged("Picture");
}
}
}
And on my page where i have my LongListSelector :
this.menu.Add(new Menu() { Name = "ccc", Picture = new Uri("/Assets/GFX/menuHeaderCO3.png", UriKind.Relative) });
longListMenuSlide.ItemsSource = menu;
And XAML:
<phone:LongListSelector x:Name="longListMenuSlide" HorizontalAlignment="Left" Height="594" Margin="0,102,0,0" VerticalAlignment="Top" Width="370" Grid.RowSpan="2">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,0">
<Image Source="{Binding Picture}" Height="78" Width="370"
HorizontalAlignment="Left" Stretch="UniformToFill"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
Its not working .. I cannot see any images. But If i hard code the image source:
<Image Source="/Assets/GFX/menuCO5.png" Height="78" Width="370"
HorizontalAlignment="Left" Stretch="UniformToFill"/>
this works. Any help? I am new to Windows Mobile.

FYI: Setting the picture property to a string would also work, The image control binding should take care of this.
Have you set the image "menuHeaderCO3.png" Build Action to "Content"?
If this is does not work, set the image failed event on the control to see what you get for debugging and append the message to the question
<Image ImageFailed="ImageFailed" Source="{Binding Picture}" />
c#
private void ImageFailed(object sender, ExceptionRoutedEventArgs e)
{
MessageBox.Show(e.ErrorException.Message);
}

Related

Xamarin Image not Loading

I am trying to display a list of images with different sizes and i want to display them with there full height and width, but the images are not loading on the screen if i didn't specified the height in the image control.
code :
<Grid>
<CollectionView ItemsSource="{Binding ImgList}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*">
<Label>Image:</Label>
<Image Grid.Row="1" Grid.ColumnSpan="2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" Source="{Binding .}"></Image>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
note: ImgList is an observableCollection of Images name string.
You could refer to the code below. You could check the image location and binding. I put the image in Android Resource/Drawable folder.
Xaml: The same xaml with yours.
Code behind:
public ObservableCollection<string> ImgList { get; set; }
public Page10()
{
InitializeComponent();
ImgList = new ObservableCollection<string>() { "image.jpeg", "image.jpeg" };
this.BindingContext = this;
}
Can you please make sure if you load images from your code project than you need to give Whole Path from root.
Can you please also check that Build Action of images.

Changing ListBox feeds into Pivot (SyndicationItem message instead of text)

So, I found a way of creating RSS feed app for Windows Phone. It binds SyndicationFeed items into Listbox template. And it works great!
However, I wanted to make an app, that handles a bit different. I thought, that changing Listbox template into Pivot would be quite easy. The problem is, that instead of articles I get only "System.ServiceModel.Syndication.SyndicationItem".
I am out of ideas how to fix that, could anyone help me?
Xaml:
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Popup Name="myPopup" IsOpen="True" Width="Auto">
<ProgressBar Height="Auto" IsIndeterminate="True" Width="480" />
</Popup>
<controls:Pivot Name="FeedPivot" Loaded="loadFeed">
<controls:Pivot.Title>
<TextBlock FontSize="56"> Komorkomania </TextBlock>
</controls:Pivot.Title>
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock>test1</TextBlock>
</Grid>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.DataContext>
<DataTemplate>
<StackPanel>
<TextBlock>test</TextBlock>
<!--
<TextBlock FontWeight="Bold" FontSize="28" Name="feedTitle" TextWrapping="Wrap" Margin="12,0,0,0" HorizontalAlignment="Left" Foreground="{StaticResource PhoneAccentBrush}" Text="{Binding Title.Text, Converter={StaticResource RssTextTrimmer}}" Width="430" />
<TextBlock Name="feedSummary" FontSize="24" TextWrapping="Wrap" Margin="12,0,0,0" Text="{Binding Summary.Text, Converter={StaticResource RssTextTrimmer}}" Width="430" />
<TextBlock Name="feedPubDate" Foreground="{StaticResource PhoneSubtleBrush}" Margin="12,0,0,10" Text="{Binding PublishDate.DateTime}" Width="430" />
-->
</StackPanel>
</DataTemplate>
</controls:Pivot.DataContext>
</controls:Pivot>
</Grid>
Code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.IO;
using System.ServiceModel.Syndication;
using System.Xml;
using Microsoft.Phone.Tasks;
using Microsoft.Phone.Shell;
using System.ComponentModel;
using System.Windows.Controls.Primitives;
namespace KomorkomaniaRss
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
myPopup.IsOpen = true;
}
// Co robimy jak już w końcu się ściągnie?
private void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error != null)
{
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
MessageBox.Show(e.Error.Message);
});
}
else
{
// Save the feed into the State property in case the application is tombstoned.
this.State["feed"] = e.Result;
UpdateFeedList(e.Result);
myPopup.IsOpen = false;
}
}
// This method determines whether the user has navigated to the application after the application was tombstoned.
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
// First, check whether the feed is already saved in the page state.
if (this.State.ContainsKey("feed"))
{
// Get the feed again only if the application was tombstoned, which means the ListBox will be empty.
// This is because the OnNavigatedTo method is also called when navigating between pages in your application.
// You would want to rebind only if your application was tombstoned and page state has been lost.
if (FeedPivot.Items.Count == 0)
{
UpdateFeedList(State["feed"] as string);
}
}
}
// This method sets up the feed and binds it to our ListBox.
private void UpdateFeedList(string feedXML)
{
// Load the feed into a SyndicationFeed instance.
StringReader stringReader = new StringReader(feedXML);
XmlReader xmlReader = XmlReader.Create(stringReader);
SyndicationFeed feed = SyndicationFeed.Load(xmlReader);
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
// Bind the list of SyndicationItems to our ListBox.
FeedPivot.ItemsSource = feed.Items;
});
}
public void feedLoader()
{
myPopup.IsOpen = true;
WebClient webClient = new WebClient();
webClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webClient_DownloadStringCompleted);
webClient.DownloadStringAsync(new System.Uri("http://komorkomania.pl/feed/rss2"));
}
private void runBrowser(object sender)
{
ListBox listBox = sender as ListBox;
if (listBox != null && listBox.SelectedItem != null)
{
// Get the SyndicationItem that was tapped.
SyndicationItem sItem = (SyndicationItem)listBox.SelectedItem;
// Set up the page navigation only if a link actually exists in the feed item.
if (sItem.Links.Count > 0)
{
// Get the associated URI of the feed item.
Uri uri = sItem.Links.FirstOrDefault().Uri;
// Create a new WebBrowserTask Launcher to navigate to the feed item.
// An alternative solution would be to use a WebBrowser control, but WebBrowserTask is simpler to use.
WebBrowserTask webBrowserTask = new WebBrowserTask();
webBrowserTask.Uri = uri;
webBrowserTask.Show();
}
}
}
// The SelectionChanged handler for the feed items
private void feedListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
runBrowser(sender);
}
private void loadFeed(object sender, RoutedEventArgs e)
{
feedLoader();
if (!App.ViewModel.IsDataLoaded)
{
App.ViewModel.LoadData();
}
}
}
}
There are some "leftovers" for handling another actions. Please ignore them, I didn't get to it yet. The biggest focus is to make it show text after app is loaded.
I bealive that I fixed that. There was a problem with Pivot concept. This is how I fixed that:
<controls:Pivot Name="FeedPivot" Loaded="loadFeed" ScrollViewer.VerticalScrollBarVisibility="Visible" Tap="feedPivotTap" Margin="0,88,0,0" LoadedPivotItem="getPivotItem">
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock FontWeight="Bold" FontSize="28" Name="feedTitle" TextWrapping="Wrap" Margin="12,0,0,0" HorizontalAlignment="Left" Foreground="#FF5DBA00" Text="{Binding Title.Text, Converter={StaticResource RssTextTrimmer}}" Width="430" />
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<ScrollViewer>
<StackPanel>
<TextBlock Name="feedSummary" FontSize="24" TextWrapping="Wrap" Margin="12,0,0,0" Text="{Binding Summary.Text, Converter={StaticResource RssTextTrimmer}}" Width="430" />
<TextBlock Name="feedPubDate" Foreground="{StaticResource PhoneSubtleBrush}" Margin="12,0,0,10" Text="{Binding PublishDate.DateTime}" Width="430" />
</StackPanel>
</ScrollViewer>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>

How to show list of items when click on button in wp7?

i placed one button in a page .when click on that need to show 1 to 30 numbers in combobox as a popup in that page only.please tell me how to acheive this?
Edit:
I have edited the answer with design,add an image as a local content in the project
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Content="Button" Height="82" HorizontalAlignment="Left" Margin="44,59,0,0" Name="button1" VerticalAlignment="Top" Width="376" Click="button1_Click" />
<ListBox ItemsSource="{Binding item}" Width="376" Name="lst" Margin="56,128,48,76" Background="White">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" DataContext="{Binding}" BorderBrush="Black">
<StackPanel Width="376" Orientation="Vertical" Height="Auto">
<Image Margin="200,20,-75,5" Height="50" Width="50" Source="{Binding img}"></Image>
<TextBlock Margin="-200,-15,90,3" Height="50" Width="50" Name="text" Text="{Binding text}" Foreground="Black"></TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
lst.visibility = visibility.collapsed;
private void button1_Click(object sender, RoutedEventArgs e)
{
lst.visibility = visibility.visible;
List<Itemss> data = new List<Itemss>();
for (int i = 0; i < 30; i++)
{
Itemss item = new Itemss();
item.text = i.ToString();
item.img = "/images.jpg";
data.Add(item);
}
lst.ItemsSource = data;
}
public class Itemss
{
public string text { get; set; }
public string img { get; set; }
}
}
YOu can make use of the ListPicker for WP7 instead of a ComboBox for WP7.
And to show the ListPicker in a popup, Place the ListPicker in a MessagePrompt.

ListBox in wp7 doesn't work for me

I'm trying to present a listview in wp7 and for some reason it doesn't seem to work
my xaml
<!--ContentPanel - place additional content here-->
<StackPanel x:Name="ContentPanel2" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="list">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="5">
<Image Source="{Binding ImageUri}" Stretch="None"/>
<TextBlock Text="{Binding Text}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
my c# code
public class list
{
public string title { get; set; }
public string imageSource { get; set; }
}
and
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
List<list> dataSources = new List<list>();
dataSources.Add(new list() { title = "Shacharit", imageSource = "Images/shacharit.png" });
dataSources.Add(new list() { title = "Mincha", imageSource = "Images/mincha.png" });
dataSources.Add(new list() { title = "Arvit", imageSource = "Images/arvit.png" });
dataSources.Add(new list() { title = "Birkat HaMazon", imageSource = "Images/shacharit.png" });
list.ItemsSource = dataSources;
}
Thanks in advance
Try the below, change the bindings of image and text block to bind to the strings you have declared at present you are trying to bind to ImageURI and Text and they don't exist in any of your code.
<!--ContentPanel - place additional content here-->
<StackPanel x:Name="ContentPanel2" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="list" Da>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="5">
<Image Source="{Binding imageSource }" Stretch="None"/>
<TextBlock Text="{Binding title}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
To Clarify Jon D's answer, you are creating data objects with attributes of "imagePath" and "title" in your code behind
new list() { title = "Shacharit", imageSource = "Images/shacharit.png" };
but trying to bing to properties called "ImageUri" and "Text".
In your output window in VS you should see these binding errors show up.
The following 2 lines (where you are doinng the binding in the XAML) should fix things up for you...
<Image Source="{Binding imageSource }" Stretch="None"/>
<TextBlock Text="{Binding title}"/>

WP7 image binding

I have a Windows phone 7 application which contains a listbox. I want, for each item in the listbox to have a particular image.
<ListBox Height="606" HorizontalAlignment="Left" ScrollViewer.VerticalScrollBarVisibility="Visible"
Margin="20,20,0,0"
Name="listBox1" VerticalAlignment="Top" Width="414" ItemsSource="{Binding SubList, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="50" Width="50"
VerticalAlignment="Top" Margin="0,10,8,0" Source="{Binding Image, Mode = OneWay}"/>
<StackPanel Orientation="Vertical">
<HyperlinkButton Content="{Binding Cathegory, Mode=OneWay}" NavigateUri="" HorizontalAlignment="Right">
</HyperlinkButton>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And the property binded to the Source property of the Image control is an Uri.
My problem is that the image is not shown in the listbox.
I have tried using a string instead of the Uri but I get the same issue.
I kindly appreciate any help :).
This should work:
public class Item
{
public int Number { get; set; }
public Uri ImageUri { get; set; }
public Item(int number, Uri imageUri)
{
Number = number;
ImageUri = imageUri;
}
}
And the datatemplate:
<ListBox x:Name="Items">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Number}"></TextBlock>
<Image Source="{Binding ImageUri}"></Image>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Check out this other SO answer, I believe it contains the answer to your question:
Image UriSource and Data Binding
But the basics of it is that you need to convert your URI/string to a BitmapImage (either via viewmodel property, or converter)

Resources