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}"/>
Related
I have a pivot control, the items are binded from a list, I want to make the pivot header look like a page number, look like this : (1/20) (2/20) (3/20) .... This is my xaml:
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush ImageSource="/Images/PivotBackground.png"/>
</Grid.Background>
<!--Pivot Control-->
<controls:Pivot x:Name="newsPivot" ItemsSource="{Binding LatestArticles}" Margin="0,68,0,0">
<!--Pivot item one-->
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="1" FontSize="30" Foreground="White" TextWrapping="Wrap"/>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<ScrollViewer>
<Grid>
<StackPanel>
<TextBlock Text="{Binding title}" FontSize="30" Foreground="Black" TextWrapping="Wrap"
Grid.Row="1"
Grid.Column="0"
Width="425"
Margin="10,0,0,0"/>
</StackPanel>
<StackPanel>
<Image delay:LowProfileImageLoader.UriSource="{Binding thumbnail, StringFormat='http://digitaledition.philstar.com/newsrepository/newsarticles/thumbs/images/\{0\}'}"
Margin="18,100,0,0"
Grid.Column="0"
Grid.Row="2"
HorizontalAlignment="Left"
Width="150"
Height="175"
Stretch="UniformToFill" />
</StackPanel>
<StackPanel>
<TextBlock Text="{Binding author, StringFormat='By \{0\}'}" TextWrapping="Wrap" FontSize="22"
Grid.Column="1"
Width="220"
Foreground="Gray"
Margin="120,135,0,0"/>
</StackPanel>
<StackPanel>
<TextBlock Text="{Binding dateFormatted}" TextWrapping="Wrap" FontSize="20"
Grid.Column="1"
Width="240"
Foreground="Gray"
Margin="140,210,0,0"/>
</StackPanel>
<StackPanel>
<TextBlock Text="{Binding content}" TextWrapping="Wrap" FontSize="24"
Grid.Column="1"
Width="425"
Foreground="Black"
Margin="10,325,0,0"/>
</StackPanel>
</Grid>
</ScrollViewer>
</DataTemplate>
</controls:Pivot.ItemTemplate>
<!--Pivot item two-->
</controls:Pivot>
</Grid>
Spent hours of searching on google but no solution found. Please someone help me with my project. thanks in advance!
Code behind Xaml:
public NewsPivot()
{
InitializeComponent();
var y = new WebClient();
Observable
.FromEvent<DownloadStringCompletedEventArgs>(y, "DownloadStringCompleted")
.Subscribe(r =>
{
var des =
JsonConvert.DeserializeObject<List<LatestArticles>>(r.EventArgs.Result);
newsPivot.ItemsSource = des.Where(s=> s.category_id == "1");
});
y.DownloadStringAsync(
new Uri("http://sample.json.com/mobile/articles?"));
}
LatestArticle.cs :
public class LatestArticles
{
public string id { get; set; }
public string title { get; set; }
public string thumbnail { get; set; }
public string hits { get; set; }
public string thumbCaption { get; set; }
public string category_id { get; set; }
public string dateFormatted { get; set; }
public string author { get; set; }
}
You would have to Bind the Text of the Header to a property on your Articles object. This propery would be the page index of the article.
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding PageNumber}" FontSize="30" Foreground="White" TextWrapping="Wrap"/>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
You would then need to set the page number of the Article when it is added to the LatestArticles collection.
LatestArticles.Add(article);
article.PageNumber = LatestArticles.Count +1;
Another option is to use a value converter. This option would require you to have access to the LatestArticles somehow.
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Converter={StaticResource PageNumberConverter}}" FontSize="30" Foreground="White" TextWrapping="Wrap"/>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
The ValueConverter is very simple
public class PageNumberConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
// Assumes that the App.xaml.cs class has a static ViewModel property
return App.ViewModel.LatestArticles.IndexOf(value) + 1;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
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.
while programming for windows phone 7, I created a listbox and using DataTemplate which contains a textblock and a textbox. The textbox is hided by default.
The XAML:
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<Canvas Width="460" Height="60" Background="{StaticResource PhoneAccentBrush}">
<TextBlock Text="{Binding data}" FontSize="30" Margin="10,10,10,0"/>
<TextBox Height="60" Width="460" Visibility="Collapsed"/>
</Canvas>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The effect I wanna accomplish is : Tap textblock to hide textblock while show textbox.
CODE BEHIND:
private void TextBlock_Tap(object sender, GestureEventArgs e)
{
TextBlock.Visibilty = Visibility.Collapsed;
TextBox.Visibilty = Visibility.Visible;
}
However, obviously the selector isn't correct. I tried to add Name for textbox and textblock, but Name seems does not work in Data Template. Is there anyone who can tell me how can i select the textblock and textbox in a Data Template please? Many Thanks!!!
Try this :
<ListBox Name="lst" >
<ListBox.ItemTemplate>
<DataTemplate>
<Canvas Width="460" Height="60" Background="{StaticResource PhoneAccentBrush}" Tap="Canvas_Tap">
<TextBlock Text="{Binding}" FontSize="30" Margin="10,10,10,10"/>
<TextBox Height="60" Width="460" Visibility="Collapsed" Text="text"/>
</Canvas>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And in code behind:
private void Canvas_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
var m = (sender as Canvas).Children;
foreach (UIElement x in m)
{
if ((x as TextBlock) != null)
(x as TextBlock).Visibility = Visibility.Collapsed;
if ((x as TextBox) != null)
(x as TextBox).Visibility = Visibility.Visible;
}
}
Setting the Name on the template does work, but you can't access it directly!
Instead, try it like this:
<ListBox x:Name="MyListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<Canvas Width="460" Height="60" Background="{StaticResource PhoneAccentBrush}">
<TextBlock x:Name="MyTextBlock" Text="{Binding data}" FontSize="30" Margin="10,10,10,0" Tap="MyTextBlock_Tap" />
<TextBox x:Name="MyTextBox" Height="60" Width="460" Visibility="Collapsed"/>
</Canvas>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And the code:
private void MyTextBlock_Tap(object sender, GestureEventArgs e)
{
var elem = (FrameworkElement)sender;
var myTextBlock = (TextBlock)elem.FindName("MyTextBlock");
var myTextBox = (TextBox)elem.FindName("MyTextBox");
myTextBlock.Visibility = Visibility.Collapsed;
myTextBox.Visibility = Visibility.Visible;
}
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)