Binding list Collection from a list collection in Window Phone 7 - windows-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. !

Related

How to put usercontrol in itemsControl in wpf prism

I want to insert user control to itemscontrol in wpf using prism.
The user control is printed, but I don't know how to do data binding.
ViewA.xaml
<Grid>
<ItemsControl ItemsSource="{Binding People}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl Grid.Row="1" Margin="10"
prism:RegionManager.RegionName="PersonDetailsRegion"
prism:RegionManager.RegionContext="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
ViewAViewModel.cs
private ObservableCollection<Person> _people;
public ObservableCollection<Person> People
{
get { return _people; }
set { SetProperty(ref _people, value); }
}
public ViewAViewModel()
{
CreatePeople();
}
private void CreatePeople()
{
var people = new ObservableCollection<Person>();
for (int i = 0; i < 10; i++)
{
people.Add(new Person()
{
FirstName = String.Format("First {0}", i),
LastName = String.Format("Last {0}", i),
Age = i
});
}
People = people;
}
insert a menu item into viewA.
MenuItem.xaml
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- First Name -->
<TextBlock Text="First Name:" Margin="5" />
<TextBlock Grid.Column="1" Margin="5" Text="{Binding FirstName}" />
<!-- Last Name -->
<TextBlock Grid.Row="1" Text="Last Name:" Margin="5" />
<TextBlock Grid.Row="1" Grid.Column="1" Margin="5" Text="{Binding LastName}" />
<!-- Age -->
<TextBlock Grid.Row="2" Text="Age:" Margin="5"/>
<TextBlock Grid.Row="2" Grid.Column="1" Margin="5" Text="{Binding Age}"/>
</Grid>
![The current situation is as follows.][1]
https://i.stack.imgur.com/1VBai.png
How to do data binding? please help me
thanks you
This won't work like this. You have to create the region on the "outside", i.e. on the ItemsControl and remove the ItemsSource binding. Then navigate multiple times to the items control-region to populate it.
<ItemsControl prism:RegionManager.RegionName="PersonDetailsRegion"/>
Alternatively, keep the binding of ItemsSource and remove the ContentControl inside and put DataTemplates somewhere for your views. Then populate it by putting the view models into the items source.
<DataTemplate DataType={x:Type Person}"><PersonView /></DataTemplate>
...
<ItemsControl ItemsSource="{Binding People}"/>
Personally, I'd prefer the second variant most of the time, because you evade the added complexity of packing your persons' information in navigation parameters and getting them back, not to speak of the much simpler PersonViewModel...

Xamarin Forms CollectionView TapGestureRecognizer not firing on label

I have a XF app with the following collection view defined. The 2nd label has a TapGestureRecognizer that doesn't fire DoSomethingInteresting in the model when I tap the label (trying this on Android). Can someone see what the issue is please?
A working sample can be cloned from here.
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SampleApp"
x:Class="SampleApp.MainPage">
<StackLayout>
<CollectionView ItemsSource="{Binding GaugeSites}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Label Grid.Column="0"
Text="{Binding Description}"
FontSize="20"
Margin="10"
TextColor="Black"
FontAttributes="Bold" />
<Label Grid.Column="1"
Margin="10"
FontSize="20"
Text="Click Me!">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding DoSomethingInteresting}" />
</Label.GestureRecognizers>
</Label>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage>
Model
namespace SampleApp
{
public class MainPageModel : FreshBasePageModel
{
public MainPageModel() : base()
{
GaugeSites = new List<GaugeSite>();
for (var index = 1; index <= 5; index++)
{
GaugeSites.Add(new GaugeSite()
{
Description = $"Gauge Site {index}"
});
}
}
public List<GaugeSite> GaugeSites { get; set; }
public Command DoSomethingInteresting
{
get
{
return new Command(() =>
{
});
}
}
}
[AddINotifyPropertyChangedInterface]
public class GaugeSite
{
public string Description { get; set; }
}
}
Maybe this is redundant but I will take my chances. As other answers indicated you need to set the source within your TapGestureRecognizer to the name of the CollectionView. However, it is probably useful to know which GaugeSite instance was associated with the CollectionView item whose TabGestureRecognizer was tapped. To add this info add a CommandParamter, i.e.
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.DoSomethingInteresting,
CommandParameter="{Binding}"
Source={x:Reference YourCollectionName}}" />
</Label.GestureRecognizers>
When it comes to the command you could use
DoSomethingInteresting = new Command<GaugeSite>((a) => DoSomething(a));
in your viewmodels contructor. And the method referenced by the lambda would be
void DoSomething(GaugeSite gaugeSite)
{
// ....
}
Hope this helps
I have download your sample, please take a look the following step.
1.Binding MainpageModel for MainPage bindingContext, add this line in MainPage.cs.
this.BindingContext = new MainPageModel();
2.Name Collectionview as collection1, then modify label command.
<CollectionView x:Name="collection1" ItemsSource="{Binding GaugeSites}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Label
Grid.Column="0"
Margin="10"
FontAttributes="Bold"
FontSize="20"
Text="{Binding Description}"
TextColor="Black" />
<Label
Grid.Column="1"
Margin="10"
FontSize="20"
Text="Click Me!">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.DoSomethingInteresting, Source={x:Reference collection1}}" />
</Label.GestureRecognizers>
</Label>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Then you can try again.

Windows 8 - XAML - Conditional background for row in ListView

I have a data source with items in it. Each item has a boolean called "IsAvailable".
I want to render the datasource in a ListView. The background of each row must be green if "IsAvailable" = true or red if "IsAvailable" = false.
How can I do it?
Thanks
-- Marco
This is the code:
<ListView x:Name="frItemlistView" Margin="10,40,666,10" SelectionMode="None" ItemsSource="{Binding Source={StaticResource availableItemsViewSource}}" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="frItemlistView_ItemClick_1" Grid.Row="1" DoubleTapped="frItemlistView_DoubleTapped_1" RightTapped="frItemlistView_RightTapped_1" BorderThickness="35,0,35,35" Grid.RowSpan="2">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="110" Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Volume}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
<TextBlock Text="{Binding IsAvailable}" Style="{StaticResource BodyTextStyle}" MaxHeight="60" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can use converter to do conditional formatting of DataTemplate. You need to bind IsAvailable property to background of StackPanel, converter will give appropriate color.
Add a class with this definition.
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Media;
using Windows.UI;
public class AvailabilityToColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
var Availability = (bool)value;
var color = Availability ? new SolidColorBrush(Colors.Green) : new SolidColorBrush(Colors.Red);
return color;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
XAML
local is the XAML namespace reference of AvailabilityToColorConverter class, which is in <Page />
<Page.Resources>
<local:AvailabilityToColorConverter x:Key="AvailabilityToColor" />
</Page.Resources>
<ListView x:Name="frItemlistView" Margin="10,40,666,10" SelectionMode="None" ItemsSource="{Binding Source={StaticResource availableItemsViewSource}}" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="frItemlistView_ItemClick_1" Grid.Row="1" DoubleTapped="frItemlistView_DoubleTapped_1" RightTapped="frItemlistView_RightTapped_1" BorderThickness="35,0,35,35" Grid.RowSpan="2">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="110" Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0" Background="{Binding IsAvailable, Converter={StaticResource AvailabilityToColor}}">
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Volume}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
<TextBlock Text="{Binding IsAvailable}" Style="{StaticResource BodyTextStyle}" MaxHeight="60" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

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>

wp7 Error in Binding Data of ListBox

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">

Resources