wp7 Error in Binding Data of ListBox - windows-phone-7

I am trying to use a collection of checkboxes (created in runtime) within a ListBox. The XAML I am writing is
<ListBox DataContext="{Binding}" Name="cuisineList">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="45" Name="grid1" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="230*" />
<ColumnDefinition Width="230*" />
</Grid.ColumnDefinitions>
<CheckBox Content="{Binding content}" Name="{Binding name}" Grid.Column="0"/>
<CheckBox Content="{Binding content}" Name="{Binding name}" Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and the code is
public ObservableCollection<Cuisine> Items = new ObservableCollection<Cuisine>();
public Search()
{
InitializeComponent();
for (int i = 0; i < 100; i++)
{
Items.Add(new Cuisine());
}
cuisineList.DataContext = Items;
}
But when I run my app, I don't see any check box. Please point out the mistake and help me rectify it. Thanks in advance!

You need to set the itemsource of the listbox as follows
<ListBox ItemsSource="{Binding Items}" Name="cuisineList">
<Grid Height="45" Name="grid1" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="230*" />
<ColumnDefinition Width="230*" />
</Grid.ColumnDefinitions>
<CheckBox Content="{Binding content}" Name="Check1" Grid.Column="0"/>
<CheckBox Content="{Binding content}" Name="Check2" Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
Also is there any restriction to write Items in *.xaml.cs file ??
If not write in a view model say PageViewModel.cs file
then Set Viewmodel class object as page.xaml data context.
(
this.DataContext = new PageViewModel();
Write the this statement in the constructor of Page.xaml.cs file)
Also verify that the Cuisine has public property Content

you need to set the items source on the listbox.
<ListBox ItemsSource="{Binding}" Name="cuisineList">

Related

Unable to access Grid inside ListBox

Ok so my issue is that I have Grid inside DataTemplate inside ListBox. I need to change the column definitions of the grid when I change the orientation but unfortunately when I assign x:Name to the Grid I cannot access it in the code behind....Is there a specific way to do this?
I need to set the column definitions of the Grid with name "test".
There is the code:
<Grid x:Name="EmployeesGrid" Grid.Row="1" Height="550" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="280"/>
<ColumnDefinition Width="195"/>
</Grid.ColumnDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" Grid.ColumnSpan="2" Margin="0,0,0,0">
<ListBox Height="605" HorizontalAlignment="Left" Margin="0,6,0,0" Name="listBox1" VerticalAlignment="Top" Width="480">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="test">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="280"/>
<ColumnDefinition Width="195"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding FullName}" FontSize="20" Grid.Column="0" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding BranchName}" FontSize="20" Grid.Column="1" HorizontalAlignment="Center"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
Try this....
var grid = (Grid)listBox1.FindName("test");
If accessing from a tapped event on the ListBox use this....
var listBox = (ListBox)sender;
var grid = (Grid)listBox.FindName("test");
If you want to go one further and get the TextBlock from the Grid use this....
var grid = (Grid)listBox1.FindName("test");
var textBlock = (TextBlock)grid.FindName("textBox's Name")
Hope that helps

How to bind data in gridview format in windows phone?

Hi i am developing windows phone 8 app.i want to display image on grid view format and i am using listbox inside grid but i didn't get any changes in my output.my code is given below,I want display data on grid view format.
<Grid x:Name="ContentPanel" Margin="0,115,0,0" Background="#424340" Grid.RowSpan="5" />
<StackPanel Margin="0,0,0,0.083" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Center" Grid.RowSpan="2">
<ListBox x:Name="List12" ItemsSource="{Binding}" VerticalAlignment="Top" SelectionChanged="NotchsList12_SelectionChanged"
Margin="0,0,0,0" HorizontalAlignment="left" Width="Auto" Grid.RowSpan="2">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Titles}" Foreground="Black" Width="189" Height="34" TextWrapping="Wrap" Padding="0,0,0,0"></TextBlock>
<Image Source="{Binding Images}" Width="189" Height="195" Name="value" Stretch="Fill" VerticalAlignment="Top" ></Image>
<TextBlock Text="Text1" Margin="0,0,10,0" HorizontalAlignment="Stretch" Grid.Column="0" Grid.Row="1" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
XDocument xmlDoc = XDocument.Parse(dataInXmlFile);
var query = from l in xmlDoc.Descendants("Category")
select new Class
{
Titles = l.Attribute("title").Value,
Images = l.Attribute("image").Value,
Articles = l.Element("SubCategory").Elements("Subcategory")
.Select(article => new Subclass
{
name = article.Attribute("name").Value,
Subimage = article.Attribute("subimage").Value,
Product = article.Element("Product").Elements("product")
.Select(articles => new Product
{
Price = articles.Element("productprice").Value,
ProductName = articles.Attribute("name").Value,
ProductImage = articles.Element("productimage").Value,
Shortdescription = articles.Element("productshortdiscription").Value
}).ToList(),
})
.ToList(),
};
foreach (var result in query)
{
Console.WriteLine(result.Titles);
Console.WriteLine(result.Images);
}
List12.DataContext = query;
I got out put like given below
1.Door 2.window 3.table 4.chair
I need out put like given below image
1.Door 2.window
3.table 4.chair
make ur stackPanel Orientation Vertical instead of Horizontal
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
Dont use grid, instead use LongListSelector using LayoutMode=Grid
Example:
<phone:LongListSelector ItemsSource="{Binding Categories}" LayoutMode="Grid" GridCellSize="200,200">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Border Background="#e67e22" Height="190" Width="190" Margin="6,0,0,0" Tap="Border_Tap" >
<TextBlock Text="{Binding Name}"></TextBlock>
</Border>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

Issue with binding itemsource using MVVM in WP7

I am using MVVM pattern and I am trying to bind a public ObservableCollection Friends property to LongListSelector
<toolkit:LongListSelector
ItemsSource="{Binding Friends}"
GroupHeaderTemplate="{StaticResource movieGroupHeader}"
ListHeaderTemplate="{StaticResource movieListHeader}">
<toolkit:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid Margin="12,8,0,8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" VerticalAlignment="Top">
<TextBlock Text="{Binding MyBoxName}" Style="{StaticResource PhoneTextLargeStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="12,-12,12,6"/>
<TextBlock Text="{Binding MyBoxID}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Status:" Style="{StaticResource PhoneTextSmallStyle}"/>
<TextBlock Text="{Binding Status}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</toolkit:LongListSelector.ItemTemplate>
</toolkit:LongListSelector>
Now issues is when i try to add
_friends.Add(new Model.Friends
{
MyBoxID = e.RosterItem.Jid,
MyBoxName = e.RosterItem.Name,
Status = Matrix.Xmpp.PresenceType.unavailable
})
it gives InvalidCastException so i tried List instead of ObservableCollection. Now i don't get exception but nothing is displayed in LLS. How can i bind My ObservableCollection property to LLS with Grouping.
For LongListSelector you need not just a collection, but some more complex structure to support grouping
Look at LongListCollection. It's great class that should help you
Usage:
var list = new LongListCollection<Event, string>(Events, x => x.Date.ToLongDateString());

Get content of control inside listbox item when it was clicked

I have a ItemTemplate like this
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Button Grid.Row="0">
<Button.Template>
<ControlTemplate>
<Border BorderBrush="AntiqueWhite" BorderThickness="1">
<StackPanel Orientation="Horizontal" Background="Gray" Width="465">
<Image Margin="2,0,10,0" Source="{Binding StateImage}" Stretch="None"/>
<TextBlock Name="txt" Text="{Binding DateLabel}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
<Custom:Interaction.Triggers>
<Custom:EventTrigger EventName="Click">
<mx:EventToCommand Command="{Binding VisibilityListboxCommand}"
CommandParameter="{Binding EementName=txt, Path=Text}"
/>
</Custom:EventTrigger>
</Custom:Interaction.Triggers>
</Button>
<ListBox Grid.Column="1" ItemsSource="{Binding WhatsonList, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="0,0,0,1" Padding="0,0,0,10">
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="360"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<Button>
.....
</Button>
<CheckBox Template="{StaticResource CheckboxImageTemplate}" Margin="0,5,0,0"/>
</StackPanel>
<ListBox Grid.Column="1">
.....
</ListBox>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
When I click on button inside listboxitem datatemplate I want to get content of textblock txt to find out what listbox item was clicked to trace back index in the List(model) that listbox bind from.
But from commandparameter I cannot get anything because there are many textblock named txt I think.
Please help me !
A better way to solve this is by binding the CommandParameter to 'thing' in the DataContext of the item like this:
<Custom:Interaction.Triggers>
<Custom:EventTrigger EventName="Click">
<mx:EventToCommand Command="{Binding VisibilityListboxCommand}"
CommandParameter="{Binding}" />
</Custom:EventTrigger>
</Custom:Interaction.Triggers>
This way the binding does not rely on a particular control being present and having a specific name.

Binding list Collection from a list collection in Window Phone 7

How to Binding list Collection from a list collection in Window Phone 7 while i am able to bind from a single list collection
First of all have item template in your Xaml.
Add Binding to it.
Define that binding property in your code.
Assign values to the defined property.
I am having a item template in my Xaml like this :
<Grid.RowDefinitions>
<RowDefinition Height="367*" />
</Grid.RowDefinitions>
<ListBox HorizontalAlignment="Stretch" Name="lstbNewOrders" Grid.Row="1" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="itemTemplate" Background="Transparent" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<TextBlock FontSize="30" Name="txtEbeln" Text="{Binding ebeln}" Grid.Row="0" Grid.Column="0" FontWeight="Bold" />
<TextBlock FontSize="25" Name="txtCName" Text="{Binding cname}" Grid.Row="1" Grid.Column="0" />
<TextBlock FontSize="25" Name="txtDate" Text="{Binding date}" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" TextAlignment="Right"/>
<StackPanel Height="30" Name="stkPanel01" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="1">
<TextBlock FontSize="25" Name="txtNetw" Text="{Binding netw}" HorizontalAlignment="Right" TextAlignment="Right"/>
</StackPanel>
<TextBlock FontSize="25" Name="txtVName" Text="{Binding vname}" Grid.Row="2" Grid.Column="0" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
In my code file i will define the binding like this:
public class itemListForListBox
{
public string ebeln { get; set; }
public string cname { get; set; }
public string vname { get; set; }
public string netw { get; set; }
public string date { get; set; }
}
And provide values like this:
void fillList()
{
List<itemListForListBox> itemListbox = new List<itemListForListBox>();
itemListForListBox listItem;
for (int i = 0; i < 5;i++ )
{
listItem = new itemListForListBox();
listItem.ebeln = "Name "+i;
listItem.date = "Date "+i;
listItem.vname = "VName "+i;
listItem.netw = "Amount "+ i;
listItem.cname = "CName "+i;
itemListbox.Add(listItem);
}
lstbNewOrders.ItemsSource = itemListbox;
}
Hope this might help you.
Thanks.
You can use the code below,
<ListBox Name="RouteListBox" ItemContainerStyle="{StaticResource RouteListBoxItemStyle}" SelectedItem="{Binding Model.SelectedRoute,Mode=TwoWay}" ItemsSource="{Binding RouteListCollection}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<command:EventToCommand Command="{Binding RouteItemSelectedCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding RouteName}" Style="{StaticResource RoutesStyle}" Grid.Column="1" />
<Border Style="{StaticResource RouteCountBorder}" Visibility="Collapsed" Grid.Column="2">
<TextBlock Style="{StaticResource RoutesCount}" Visibility="Collapsed" Text="{Binding ShopCount,Mode=TwoWay}"></TextBlock>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate></ListBox>
I take it you mean you have a collection of collections? In this case, you can nest your ItemsControls (or ListBox):
<ItemsControl ItemsSource={Binding Path=???}>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- here is your nested itemscontrol -->
<ItemsControl ItemsSource={Binding Path=???}>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- your content goes here -->
</DataTemplate>
<ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Let say we have a ListBox lstbx and a collection lets say
List <String> listdata = new List<String>();
we can add items to the collection by Add()
Ex-
listdata.Add("Nazi 1");
or
forloop(expression)
{
listdata.Add("vale")
}
then we can assign assign the collection directly to the listbox' item Source
ex.
lstbx.ItemSource=listdata;
//make sure if u are storing more than one variable in a single item of the collection ,you should create custom data template for the ListBox Item Template. !

Resources