I am developing a Windows phone app where the rss link is given in the app. The news result is displayed properly but the images are not being displayed. This is how i displayed the image in xaml
<ListBox Name="feedListBox" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible" Height="528" HorizontalAlignment="Left" Margin="9,97,0,0" VerticalAlignment="Top" Width="439" SelectionChanged="feedListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<Image Name="img" Source="{Binding ImageUri}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0" />
<StackPanel VerticalAlignment="Top">
<TextBlock TextDecorations="Underline" FontSize="24" Name="feedTitle" TextWrapping="Wrap" Margin="12,0,0,0" HorizontalAlignment="Left" Foreground="{StaticResource PhoneAccentBrush}" Text="{Binding Title.Text, Converter={StaticResource RssTextTrimmer}}" />
<TextBlock Name="feedSummary" TextWrapping="Wrap" Margin="12,0,0,0" Text="{Binding Summary.Text, Converter={StaticResource RssTextTrimmer}}" />
<TextBlock Name="feedPubDate" Foreground="{StaticResource PhoneSubtleBrush}" Margin="12,0,0,10" Text="{Binding PublishDate.DateTime}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and in .cs this is how i retrieve
img = feed.ImageUrl;
feedListBox.ItemsSource = feed.Items;
how do i get the images in my app?
Thanx
You can't directly do img = image as it's a template for each list item, not a certain image on a screen. Try to use a converter to transform Url from your feed into an Uri object:
public class UrlToUriConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return new Uri(value.toString(), UriKind.Absolute);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return null;
}
}
Edit: More info:
Create an UrlToUriConverter converter as above.
Insert that converter into your page resources:
<phone:PhoneApplicationPage.Resources>
<src:UrlToUriConverter x:Key="UrlToUri"/> </phone:PhoneApplicationPage.Resources>
src is a namespace of the converter and it should be added in <phone:PhoneApplicationPage tag, eg. xmlns:src="clr-namespace:TestProject"
Use that converter in Image.Source binding:
<Image Source="{Binding LineOne, Converter={StaticResource UrlToUri}}" >
Related
My windows phone 8 application should work in two languages English and Arabic.
In this application i used text block control in many places i.e. in List Boxes and also as individual for Page Headers.
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" VerticalAlignment="Center">
<TextBlock x:Name="title" Text="{Binding LocalizedResources.CategoriesText, Source={StaticResource LocalizedStrings}}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" FontWeight="Bold" FontSize="40" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Fonts/nazli.ttf#nazli"/>
</StackPanel>
Now in List Box also i have text block.
<Grid x:Name="ContentPanel" Grid.Row="2" Background="White">
<ListBox x:Name="categoriesList"
SelectionChanged="categoriesList_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="categoryGrid" Height="60" Margin="0,0,0,0" MinWidth="480" Background="{Binding Converter={StaticResource RowColour}}" >
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<!--<RowDefinition Height="10"/>-->
</Grid.RowDefinitions>
<StackPanel x:Name="dataRow" Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock x:Name="category" Text="{Binding CategoryName}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="28" MinWidth="420"/>
<Image x:Name="arrow" Stretch="Fill" Margin="0,0,0,0" Source="{Binding ArrowImageName}" Height="20" HorizontalAlignment="Right"/>
</StackPanel>
<!--<Image x:Name="line" Grid.Row="1" Width="460" HorizontalAlignment="Center" Source="Images/separator.png" />-->
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
By default the application is in English language. So I want to use the default Font Family Segoe WP for all Text Blocks when the application is in English.
When the user changes the Application's Language from English to Arabic, then I want to use the embedded Font nazli.ttf for all Text Blocks in the application.
So for that I embedded one external font in my application and set the content type to Copy Always. The font is nazli.ttf.
Blow is the external style which works for English. But I need an External resource which should work for both English and Arabic Languages.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<Style x:Key="NormalTextStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="30"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontFamily" Value="Segoe WP"/>
<Setter Property="Foreground" Value="Yellow"/>
</Style>
</ResourceDictionary>
So how should be the external resource file to satisfy the above requirement.
One way would be to use a converter on the TextBlocks:
<TextBlock FontFamily="{Binding Converter={StaticResource FontConverter}}">some text</TextBlock>
converter:
public class FontConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (culture.Name.StartsWith("ar"))
{
return new FontFamily("/MyApp;Component/Fonts/Fonts.zip#fontName");
}
else
{
return new FontFamily("Segoe WP");
}
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Adjust the paths above as appropriate.
And the converter declared somewhere as:
<converters:FontConverter x:Key="FontConverter" />
I am attempting to reference a class in my ViewModel within the xaml of my view, and I am getting an error saying Object reference not set to an instance of an object. THe error occurs when attemping to set the ViewModel as the Resource for a ListBox. Also, when attempting to set the ItemsSource property of my ListBox, another error results stating The resource "effects" could not be resolved.
MainPage.xaml
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.Resources>
//Error occurs here!
<vm:EffectItems x:Key="effects"/>
</Grid.Resources>
//The ItemsSource property thus contains an error as well
<ListBox Name="ListBoxEffects" SelectionMode="Single" ItemsSource="{StaticResource effects}" SelectionChanged="ListBox_SelectionChanged"
toolkit:TiltEffect.IsTiltEnabled="True"
ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" ItemWidth="152" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="14,0,0,10" >
<Image Source="{Binding Thumbnail}" Width="128" Height="128" />
<TextBlock Text="{Binding Name}" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I have also tried the following setup which results in the same errors on the same items
<ListBox Name="ListBoxEffects" SelectionMode="Single" ItemsSource="{StaticResource effects}" SelectionChanged="ListBox_SelectionChanged"
toolkit:TiltEffect.IsTiltEnabled="True"
ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.Resources>
<vm:EffectItems x:Key="effects"/>
</ListBox.Resources>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" ItemWidth="152" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="14,0,0,10" >
<Image Source="{Binding Thumbnail}" Width="128" Height="128" />
<TextBlock Text="{Binding Name}" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
ViewModel class
public class EffectItems : ObservableCollection<EffectItem>
{
public EffectItems()
{
Add(new EffectItem(new BlackWhiteEffect(), "data/icons/BlackWhite.png"));
Add(new EffectItem(new SepiaEffect(), "data/icons/Sepia.png"));
Add(new EffectItem(new TiltShiftEffect { UpperFallOff = 0.2f, LowerFallOff = 1.0f }, "data/icons/TiltShift.png"));
Add(new EffectItem(new PolaroidEffect { Tinting = 0.8f }, "data/icons/PolaYellow.png", "Pola"));
}
}
At the top of my page I have xmlns:vm="clr-namespace:AppName.ViewModels" which contains no errors.
You can bind your ViewModel to a View by setting the views DataContext. The straight forward way is to set it in the constructor of the code behind:
// Constructor
public MainPage()
{
InitializeComponent();
DataContext = new EffectItems();
}
Then you can set the ItemsSource of your List to the DataContext by using the default binding:
ItemsSource="{Binding}"
I want change the color os background of the border each listboxitem increase.
<ListBox.ItemTemplate>
<DataTemplate>
<border x:name: border>
<ListBoxItem ItemSource={Binding Example}>
</ListBoxItem>
</border>
Any Ideas?
First check this link, on how to use converters.
Then in your XAML, write your border like this
<Border BorderBrush="{Binding Converter=ColorConverter}">
....
<Border>
Modify your converter code to something like this
public class ColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
//Define some random colors
Color[] colors = { Colors.Blue, Colors.Brown, Colors.Cyan, Colors.Green, Colors.Magenta, Colors.Orange, Colors.Purple, Colors.Yellow, Colors.LightGray };
return colors[(new Random()).Next(8)];
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
}
}
So, this code dynamically returns one of the colors. And there is the chance for getting same color continuously. Btw, I didn't test the above code.
The TypeConverter for "IValueConverter" does not support converting
when i put the border like above causes this error.
here is my complete code
<ItemsControl x:Name="listaAdd" ItemsSource="{Binding sample}" Grid.Row="0" Margin="0,221,0,0" Foreground="White" Background="#FF5B5B5B" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" Grid.Row="1" Width="480" >
<Border x:Name="borda" BorderBrush="{Binding Converter=ColorConverter}" >
<ListBoxItem x:Name="listSelected" Foreground="White" IsSelected="True" VerticalAlignment="Center" FontSize="{StaticResource PhoneFontSizeLarge}" Content="{Binding Nome}" Background="{x:Null}" HorizontalContentAlignment="Left" Height="80" DoubleTap="listSelected_DoubleTap">
</ListBoxItem>
</Border>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="subMenulist">
<Button Grid.Column="1" Content="delete" BorderThickness="0" Margin="0" Background="White" Foreground="#FF1A739D" FontSize="32" HorizontalContentAlignment="Left">
</Button>
<Button Grid.Column="1" Content="compartilhar" Margin="0,0,0,0" x:Name="btnShare" BorderThickness="0" Background="White" Foreground="#FF1A739D" FontSize="32" HorizontalContentAlignment="Left">
</Button>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I have a listbox that I'm doing some databinding. As you can see I have some images associated with the data that I'm displaying... Everything is working great, except that when I change themes I need to change my image to the black images. I can't seem to figure out how to change the images when they are bound like this.
Any ideas?
<ListBox x:Name="lbPharm" ItemsSource="{Binding col}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="DataTemplateStackPanel" Orientation="Horizontal">
<TextBlock FontFamily="Segoe WP Semibold" FontWeight="Bold" FontSize="30" VerticalAlignment="Top" Margin="20,10">*</TextBlock>
<StackPanel>
<TextBlock x:Name="ItemText" Text="{Binding name}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock x:Name="ItemNumber" Text="{Binding number}" FontSize="{StaticResource PhoneFontSizeNormal}"/>
</StackPanel>
<Image Source="Images/phone.png" Margin="20,0" x:Name="phone" Visibility="Visible">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="GestureListener_Tap_Phone"/>
</toolkit:GestureService.GestureListener>
</Image>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You should create a binding for the image source instead of setting it explicitly in XAML.
<ListBox x:Name="lbPharm" ItemsSource="{Binding col}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="DataTemplateStackPanel" Orientation="Horizontal">
<TextBlock FontFamily="Segoe WP Semibold" FontWeight="Bold" FontSize="30" VerticalAlignment="Top" Margin="20,10">*</TextBlock>
<StackPanel>
<TextBlock x:Name="ItemText" Text="{Binding name}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock x:Name="ItemNumber" Text="{Binding number}" FontSize="{StaticResource PhoneFontSizeNormal}"/>
</StackPanel>
<!-- Image source is bound to a property -->
<Image Source="{Binding ImageSource}" Margin="20,0" x:Name="phone" Visibility="Visible">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="GestureListener_Tap_Phone"/>
</toolkit:GestureService.GestureListener>
</Image>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Now, just update the property in your view model as needed, as long as the class containing the property implements INotifyPropertyChanged the new image will show up in your ListBox.
The ImageSource property may have to be a BitmapImage instead of a string. XAML must use a converter to convert your path string when it is used as a literal but I think it doesn't do this if you use a binding. Or you could use your own converter. Either way, construct a BitmapImage as follows:
new BitmapImage( new Uri( "/path/to/image.png", UriKind.Relative ) )
EDIT
Adding an example:
<DataTemplate x:Key="LongListSelectorItemTemplate">
<StackPanel VerticalAlignment="Top"
Orientation="Horizontal">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="OnTap" />
</toolkit:GestureService.GestureListener>
<Image Source="{Binding ImageSource}"
MinHeight="32"
MinWidth="32"
MaxHeight="48"
MaxWidth="48" />
<StackPanel>
<TextBlock Text="{Binding Name}"
Style="{StaticResource PhoneTextExtraLargeStyle}"
Margin="12,10,12,0" />
<TextBlock Text="{Binding Parent}"
Foreground="{StaticResource PhoneAccentBrush}"
Style="{StaticResource PhoneTextSubtleStyle}"
Margin="24,0,12,10" />
</StackPanel>
</StackPanel>
</DataTemplate>
Corresponding view model:
public class Item : INotifyPropertyChanged
{
#region Private Members
private string _name = null;
private string _imageSource = null;
private string _parent = null;
#endregion
public string Name
{
get
{
return _name;
}
set
{
if( value != _name ) {
_name = value;
NotifyPropertyChanged( "Name" );
}
}
}
public string Parent
{
get
{
return _parent;
}
set
{
if( value != _parent ) {
_parent = value;
NotifyPropertyChanged( "Parent" );
}
}
}
public string ImageSource
{
get
{
return _imageSource;
}
set
{
if( value != _imageSource ) {
_imageSource = value;
NotifyPropertyChanged( "ImageSource" );
}
}
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged( String propertyName )
{
PropertyChangedEventHandler handler = PropertyChanged;
if( null != handler ) {
handler( this, new PropertyChangedEventArgs( propertyName ) );
}
}
#endregion
}
This is code from a project I'm working on, it is similar to your case except I'm displaying the image with a LongListSelector instead of a ListBox. And it looks like I mislead you earlier about not being able to use a string directly for the image source, I'm doing exactly that and it works. Sorry about that.
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)