Images won't display - windows-phone-8

I am having some problems getting my app to display images from the web.
It workes fine in my sample data as can be seen:
But one the app runs on the emulate do i get this, you can see the link in the textbox:
This is my code, what am I doing wrong?
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
<!--Replace rectangle with image-->
<Image>
<Image.Source>
<BitmapImage UriSource="{Binding Image}" CreateOptions="BackgroundCreation"/>
</Image.Source>
</Image>
<StackPanel Width="311" Margin="8,-7,0,0">
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
<TextBox Text="{Binding Image}" FontSize="10" />
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>

The only reason you can see your images is that your code fails to download them.
I just created a simple app for windows phone to download images manually (just to see what exactly is going on?).
The code is pretty straightforward:
XAML:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<Image>
<Image.Source>
<BitmapImage UriSource="{Binding Image}" CreateOptions="BackgroundCreation"/>
</Image.Source>
</Image>
<Button Content="go" Click="ClickMe"/>
</StackPanel>
</Grid>
And the code-behinde:
private void ClickMe(object sender, RoutedEventArgs e)
{
//var url = "http://img7.anidb.net/pics/anime/136529.jpg";
var url = "http://img7.anidb.net/pics/anime/54893.jpg";
HttpWebRequest req = (HttpWebRequest)HttpWebRequest.Create(url);
//req.ContentType = "image/jpeg";
//req.Accept = "image/jpeg";
req.Method = "GET";
req.BeginGetResponse(Callback, req);
}
private void Callback(IAsyncResult result)
{
try
{
HttpWebRequest httpReq = (HttpWebRequest)result.AsyncState;
HttpWebResponse response = (HttpWebResponse)httpReq.EndGetResponse(result);
Stream myStream = response.GetResponseStream();
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
BitmapImage bmp = new BitmapImage();
bmp.SetSource(myStream);
var character = new Character();
character.Image = bmp;
ContentPanel.DataContext = character;
//image1.Source = bmp;
});
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
When I'm trying to download the image on WP I recive a webException with Stats code: System.Net.HttpStatusCode.Forbidden
BTW - sometimes I get this error when I'm trying to get the image using web browser. Not so often, but it happens. Most probably that website does not allow to get images.

Related

PLaying Default Video in Windows Phone 8

I have parsed RSS feed http://www.teluguone.com/videosongs/videoSongsXml.php?cat_id=6.
And displayed songpics in Horizontal List view. As shown below
When I click on a particular song it was playing in the space above.
But,here I want to get default video along with Horizontal list view.And when I click on a particular video it should be played.
How to get the default video along with List view.
XAML code:
<phone:PhoneApplicationPage
x:Class="PhoneApp1.MainPage"
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:delay="clr-namespace:Delay;assembly=PhonePerformance"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Teluguone" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Songs" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<MediaElement x:Name="player" AutoPlay="True" Margin="0,0,0,282"/>
<ScrollViewer HorizontalScrollBarVisibility="Hidden" Height="Auto" Margin="-60,411,-93,10" >
<ListBox x:Name="videosongList" ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled" Height="200" Width="1000" SelectionChanged="videosongList_SelectionChanged" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,50,0,0" Orientation="Horizontal">
<Image x:Name="img1" Source="{Binding songpic}" ></Image>
<TextBlock Text="{Binding songname}" TextWrapping="NoWrap" VerticalAlignment="Bottom"
FontSize="20" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel >
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</ScrollViewer>
</Grid>
</Grid>
Code for XAML.cs:
namespace PhoneApp1
{
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
}
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
// is there network connection available
if (!System.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable())
{
MessageBox.Show("No network connection available!");
return;
}
// start loading XML-data
WebClient downloader = new WebClient();
Uri uri = new Uri("http://www.teluguone.com/videosongs/videoSongsXml.php?cat_id=6", UriKind.Absolute);
downloader.DownloadStringCompleted += new DownloadStringCompletedEventHandler(VideosongsDownloaded);
downloader.DownloadStringAsync(uri);
}
void VideosongsDownloaded(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Result == null || e.Error != null)
{
MessageBox.Show("There was an error downloading the XML-file!");
}
else
{
// Deserialize if download succeeds
XDocument document = XDocument.Parse(e.Result);
XmlSerializer serializer = new XmlSerializer(typeof(videosongs));
videosongs videosongs = (videosongs)serializer.Deserialize(document.CreateReader());
videosongList.ItemsSource = videosongs.Collection;
}
}
private async void videosongList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
Songsdetails song = (Songsdetails)videosongList.SelectedItem;
var url = await YouTube.GetVideoUriAsync(song.songcode, YouTubeQuality.Quality480P);
player.Source = url.Uri;
}
}
}
Anybody please give me any suggestion of getting default video playing along with horizontal list view.
Many Thanks.
Did you try playing Youtube videos using the Youtube class from Codeplex.
Youtube Class
or else you could refer the sample from msdn:
Youtube Video sample

How to filter an observable collection in Windows Phone 8?

I tried this How to: Filter Data in a View so i tried this approach but it didn't work for me because windows phone 8 environment couldn't find 'ListCollectionView'.
My collection is following.
//My observableCollection
ObservableCollection<ClonedWrapper> dsForProgress = new ObservableCollection<ClonedWrapper >();
//My Function which shows at first time.
private async Task CloudImages()
{
IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication();
try
{
List<MainWrapper> serverdata = new List<MainWrappe>();
serverdata = await ImageUrlAsync();//This function is returning the Deserialize object of images
if (serverdata.Count != 0)
{
foreach (var imgInfo in serverdata)
{
string folderPath = "Fagbokforlaget/Books/" + BookInfo.Id.Trim();
ClonedWrapper item = new ClonedWrapper()
{
//Name, Cover, Info, Title, IsEnableButton, IsVisibleButton,
// IsVisible are the assigned keys to the xaml page
Id = imgInfo.Id,
Name = imgInfo.Name,
Cover = await GetCoverImage(imgInfo),
Info = imgInfo.Info,
Title = imgInfo.Title,
Url = imgInfo.Url,
IsEnableButton = "True",
IsVisible = "Collapsed",
Date = Convert.ToDateTime(imgInfo.Date)
};
if (isf.DirectoryExists(folderPath))
{
item.ButtonStatus = "Read";
item.IsVisibleBookDeleteButton = "Visible";
}
else
{
item.ButtonStatus = "Download";
item.IsVisibleBookDeleteButton = "Collapsed";
}
dsForProgress.Add(item);
}
}
else
{
MessageBox.Show("You have no any downloaded books!");
}
listCloudImages.ItemsSource = dsForProgress;
}
catch (Exception exe)//I am getting exception here on extreme first run in absense of internet.
{
MessageBox.Show(exe.Message);
}
}
//My xaml page is following. It is the default page that loaded at first time. you can say it is the face of the application. User download the images. and buttonStatus convert into the Read button. so now what i am doing i will keep two buttons in appliationbar one cloud second downloaded. ON Download button click i want to show only downloaded images.
<ListBox Name="listCloudImages" Visibility="Visible" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Auto" FontFamily="Segoe UI" FontStyle="Normal" FontWeight="Thin" Margin="0,0,0,50">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<tools:WrapPanel Orientation="Horizontal">
</tools:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" Background="#151414" CornerRadius="3" Margin="3" Width="150" TextOptions.DisplayColorEmoji="True" BorderBrush="#1c1b1b">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Image x:Name="imgBookImage" Source="{Binding Cover}" Visibility="Visible" VerticalAlignment="Top" HorizontalAlignment="Center"
Width="80" Height="100" ImageOpened="imgBookImage_ImageOpened"/>
<StackPanel Orientation="Horizontal">
<TextBlock Visibility="{Binding IsVisible}" Text="{Binding ProgressPercentage}" FontFamily="Segoe UI" FontSize="18" FontWeight="ExtraBold" Foreground="White" Margin="5,0"></TextBlock>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Title}" FontFamily="Segoe UI" FontSize="13.5"
Foreground="White" TextTrimming="WordEllipsis"
VerticalAlignment="Top" HorizontalAlignment="Left"
TextWrapping="Wrap"
Width="300" Padding="2"/>
<TextBlock Text="{Binding Info}" FontSize="13.5" FontFamily="Segoe UI"
Foreground="White"
VerticalAlignment="Top" HorizontalAlignment="Left"
TextWrapping="Wrap"
Width="300" Padding="2"/>
<ProgressBar x:Name="downloadProgressBar" Foreground="Green" IsIndeterminate="True" VerticalAlignment="Center" Width="120" TextOptions.TextHintingMode="Animated" Visibility="{Binding IsVisible}" CharacterSpacing="2"/>
<Button Content="{Binding ButtonStatus}" x:Name="btnDownload" IsEnabled="{Binding IsEnableButton, Converter={StaticResource ButtonVisibilityIsEnableConverter}}"
Click="btnDownload_Click" Tag="{Binding}" Width="120" BorderThickness="1" FontSize="13.5" Margin="0,5"
FontFamily="Segoe UI" tools:SlideInEffect.LineIndex="2" HorizontalAlignment="Left" VerticalAlignment="Top"
Foreground="White">
</Button>
<Image x:Name="imgCancelImage" Source="/Assets/Tiles/CancelImage.png" Visibility="{Binding IsVisible}" VerticalAlignment="Center" Margin="97,-66,0,0"
Tap="imgCancelImage_Tap" HorizontalAlignment="Right" Width="25" Height="25" Tag="{Binding}"/>
<Button x:Name="btnDeleteImage" Click="btnDeleteImage_Click"
Tag="{Binding}" BorderThickness="1" Margin="97,-66,0,0"
Height="55" Width="55"
Visibility="{Binding ButtonStatus, Converter={StaticResource DeleteButtonVisibilityConverter}}">
<Button.Background>
<ImageBrush ImageSource="/Images/delete.png" Stretch="Fill"></ImageBrush>
</Button.Background>
</Button>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Based on your code, you can do something quite easy, if you wanna show only downloaded books try this:
private void ApplicationBarButtonShowAllDownLoaded(object sender, EventArgs e)
{
var c = (Application.Current as App).dsForProgress.Where(x => x.ButtonStatus.Equals("Download"));
listCloudImages.ItemsSource = c;
}
be sure that ObservableCollection<ClonedWrapper> dsForProgress is public
In your book model, you can pass a bool property IsDownload and when you download books you set this property to true.For your filter, just use linQ for take all books download or no dowload like this :
var noDownloadedBooks =
from b in yourObservableCollection
where b.IsDownload == false
select b;
var downloadedBooks =
from b in yourObservableCollection
where b.IsDownload == true
select b;
What you need to do is use a CollectionViewSource, this can point to your original collection and it can handle filtering!
Scott Hanselman has a great example blog post about it here... http://www.hanselman.com/blog/CollectionViewSourceIsCrazyUsefulForBindingToFilteredObservableCollectionsOnWindowsPhone8.aspx

Windows Phone open ListPicker in Fullscreen mode on AppBarButton click

I want to open a ListPicker in Fullscreen mode on ApplicationBarButton click. The ListPicker should be opened as new popup and should not be visible in the page.
This was my try:
private void OnAppBarButtonClick(object sender, EventArgs e)
{
ListPicker listPicker = new ListPicker();
listPicker.ExpansionMode = ExpansionMode.FullScreenOnly;
this.ContentPanel.Children.Add(listPicker);
ListPickerItem item1 = new ListPickerItem() { Content = "Item1" };
ListPickerItem item2 = new ListPickerItem() { Content = "Item2" };
ListPickerItem item3 = new ListPickerItem() { Content = "Item3" };
listPicker.Items.Add(item1);
listPicker.Items.Add(item2);
listPicker.Items.Add(item3);
listPicker.Open();
}
You can accomplish this by defining the ListPicker in your xaml, setting the ExpansionMode to FullScreenOnly and making it Collapsed.
<Grid x:Name="Content"/>
<!-- other controls -->
<toolkit:ListPicker x:Name="Picker" ExpansionMode="FullScreenOnly"
Visibility="Collapsed"
FullModeHeader="SELECT"
ItemsSource="{Binding MyItems}"
SelectionChanged="OnPickerSelectionChanged">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Margin="0,20" Text="{Binding Name}"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
</Grid>
Then in your code, you open the picker.
Picker.Open();
This samples assumes you have a DataContext with a MyItems property that is a collection of items that has a Name property.
this code works for me without the need of any base code,
<toolkit:ListPicker Header="State"
x:Name="State"
ExpansionMode="FullScreenOnly">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="0 24 24 24"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextTitle2Style}" />
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
Just initialize State.ItemsSource with a list.

Change windows phone toolkit pushpin content

How to change the content of toolkit pushpin via program dynamically?
I've put several pushpins on the maps on the initializing, and I want to change the content of the pushpin while user put a tap on it.
This is my xaml code:
<toolkit:MapExtensions.Children>
<toolkit:MapItemsControl x:Name="MapItems">
<toolkit:MapItemsControl.ItemTemplate>
<DataTemplate>
<toolkit:Pushpin GeoCoordinate="{Binding Coordinate}" Tap="PinOnTap">
<toolkit:Pushpin.Template>
<ControlTemplate TargetType="toolkit:Pushpin">
<StackPanel>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" Content="{TemplateBinding Content}" />
<Path Data="M0,0 L0,1 L1,0" Fill="{TemplateBinding Background}" Stretch="Fill" Margin="32,0" Height="12" Width="18"
Visibility="{Binding Content.Visibility, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="Left" />
<Image Source="{Binding Icon_img}" Stretch="None" HorizontalAlignment="Left"/>
</StackPanel>
</ControlTemplate>
</toolkit:Pushpin.Template>
<Border Background="White" Visibility="Collapsed" Width="200" HorizontalAlignment="Center" >
<StackPanel Orientation="Horizontal" Tap="gotoProfileFromPin">
<Image Margin="8" Source="{Binding Image}" VerticalAlignment="Top" Width="50" Height="50" />
<StackPanel>
<TextBlock Text="{Binding Uid}" Visibility="Collapsed"/>
</StackPanel>
</StackPanel>
</Border>
</toolkit:Pushpin>
</DataTemplate>
</toolkit:MapItemsControl.ItemTemplate>
</toolkit:MapItemsControl>
</toolkit:MapExtensions.Children>
And my program.cs:
private void PinOnTap(object sender, System.Windows.Input.GestureEventArgs e)
{
var popOut = ((sender as Pushpin).Content) as Border;
popOut.Visibility = System.Windows.Visibility.Visible;
var popOutImg = (popOutNew.Child as StackPanel).DataContext;
var popUser = popOutImg as UserPin;
// function to get the images by Uid
popUser.Image = new Uri(images fetch from function, UriKind.RelativeOrAbsolute);
popOutNew.Child.UpdateLayout();
e.Handled = true;
}
In PinOnTap function, I'll fetch a picture from another function and show it on the maps as toolkit:Pushpin.Content, However it can't work.
This code:
popUser.Image = new Uri(images fetch from function, UriKind.RelativeOrAbsolute);
it only change the Image source but not update the UI.
I print it's value and it source has been changed, but I donno why it didn't appear on the map (the map only show the "Border" with white background and didn't have any image inside it)
I think You will have to Implement INotifyPropertyChange as th change is not reflected on Xaml .

Load HTML contents in Silverlight RichTextBox?

see, i have a html file and i'm trying to load other than iframe and web-browser controls
so i used RichTextBox is it supportable only with XAML? if it also supports HTML.how do i implement.
i tried to load a html file but it loaded as text.
below is my code.
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"/>
<ColumnDefinition Width="580"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Canvas>
<TextBox Height="23" x:Name="txtFileName" Canvas.Left="15" Canvas.Top="40" Grid.Row="0" Grid.Column="0" Width="280" />
<Button Content="Browse" Height="23" HorizontalAlignment="Left" x:Name="btnBrowse" Canvas.Left="300" Canvas.Top="40" Grid.Row="0" Grid.Column="0" Width="75" Click="BtnBrowse_Click" />
<RichTextBox x:Name="rtxtboxHTML" Margin="3" Grid.Row="0" Grid.Column="1" Width="450" Height="400" HorizontalAlignment="Center" VerticalAlignment="Center" Canvas.Left="450" Canvas.Top="40" IsReadOnly="True" TextWrapping="Wrap"/>
</Canvas>
</Grid>
private void BtnBrowse_Click(object sender, RoutedEventArgs e)
{
OpenFileDialog openFileDialog = new OpenFileDialog();
openFileDialog.Filter = "Html files (*.html)|*.htm|All Files (*.*)|*.*";
if (openFileDialog.ShowDialog()==true)
{
txtFileName.Text = openFileDialog.File.Name;
FileInfo _File = openFileDialog.File;
using (StreamReader strReader = new StreamReader(openFileDialog.File.OpenRead()))
{
string _strTemp = string.Empty;
//var rs = Application.GetResourceStream(new Uri(openFileDialog.File.Name, UriKind.Relative));
//StreamReader sr = new StreamReader(rs.Stream);
while (!strReader.EndOfStream)
{
_strTemp = strReader.ReadToEnd();
}
strReader.Close();
rtxtboxHTML.Selection.Text = _strTemp;
}
}
}
where i went wrong...
Thank you
RichTextBox will not parse HTML for you.