Why does adding datatemplate stop the display of itemsource? - xamarin

This code results in a display of the same line of the table name for every one of the 230 records in the table but not the fields:
ListView lv = new ListView();
lv.ItemsSource = await App.Database.GetItemsAsync();
StackLayout sl = new StackLayout();
Label ln = new Label();
ln.SetBinding(Label.TextProperty, nameof(ContactsModel.LastName));
Label fn = new Label();
fn.SetBinding(Label.TextProperty, nameof(ContactsModel.FirstName));
sl.Children.Add(ln);
sl.Children.Add(fn);
sl.Children.Add(lv);
Content = sl;
But adding the datatemplate results in a blank screen
ListView lv = new ListView();
lv.ItemsSource = await App.Database.GetItemsAsync();
var template = new DataTemplate(typeof(ViewCell));
lv.ItemTemplate = template;
StackLayout sl = new StackLayout();
Label ln = new Label();
ln.SetBinding(Label.TextProperty, nameof(ContactsModel.LastName));
Label fn = new Label();
fn.SetBinding(Label.TextProperty, nameof(ContactsModel.FirstName));
sl.Children.Add(ln);
sl.Children.Add(fn);
sl.Children.Add(lv);
Content = sl;

first, this would be easier to do in XAML. But if you need to do it in code
var template = new DataTemplate(() =>
{
Label ln = new Label();
ln.SetBinding(Label.TextProperty, nameof(ContactsModel.LastName));
Label fn = new Label();
fn.SetBinding(Label.TextProperty, nameof(ContactsModel.FirstName));
var stack = new StackLayout();
stack.Children.Add(ln);
stack.Children.Add(fn);
return new ViewCell { View = stack };
});
lv.ItemTemplate = template;

Related

how to add button n times on xamarin

First of all i have seen few topics about that but didnt helped i typed thoose in xamarin.
i add a button in that way
Button desk = new Button
{
Text = desknumber.ToString(),
Font = Font.SystemFontOfSize(NamedSize.Large),
BorderWidth = 1,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.CenterAndExpand
};
so i have to run this command in loop or in a method like that
public void masaekle(int masasayisi)
{
Button desknumber = new Button
{
Text = masasayisi.ToString(),
Font = Font.SystemFontOfSize(NamedSize.Large),
BorderWidth = 1,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.CenterAndExpand
};
this.Content = new StackLayout
{
Children =
{
desknumber,
}
};
it doesnt work in any variable type so i stuck here i cant give a variable name to the button
every time you assign Content it overwrites what is already there
var sl = new StackLayout();
// some loop conditions
for(;;)
{
var button = new Button { ... };
sl.Children.Add(button);
}
this.Content = sl;

Xamarin - binding to variable in datatemplate

How do I bind a value from my object property to a variable so that I can pass it as an argument/parameter for my method "setFavoriteProduct(id_product, favnumber) which is triggered by my button "choiceButton". I require the property value "id_product".
When I bind it to Label "id_productLabel" then I can see it in the View just fine but I need to use the string value in my "setFavoriteProduct" function.
listView.ItemTemplate = new DataTemplate(() =>
{
Image productImage = new Image();
productImage.SetBinding(Image.SourceProperty, "imageURL");
//productImage.HeightRequest = 60;
productImage.HeightRequest = 120;
//productImage.WidthRequest = 60;
productImage.WidthRequest = 120;
productImage.Aspect = Aspect.AspectFit;
Label nameLabel = new Label();
nameLabel.SetBinding(Label.TextProperty, "name");
Label id_productLabel = new Label();
id_productLabel.SetBinding(Label.TextProperty, "id_product");
id_productLabel.IsVisible = true;
Button choiceButton = new Button();
choiceButton.Text = "Vali";
choiceButton.Clicked += (sender, args) => setFavoriteProduct(
id_product,
favnumber
);
return new ViewCell
{
View = new StackLayout
{
Padding = new Thickness(0, 5),
Orientation = StackOrientation.Horizontal,
Children = { productImage, id_productLabel , nameLabel, choiceButton }
}
};
the simplest way to do this is to get the BindingContext from the sender (button) and then get the property from that
choiceButton.Clicked += (sender, args) => {
var context = (MyClass)((Button)sender).BindingContext;
var id = context.id_product;
setFavoriteProduct(id,favnumber);
};
alternately, you could use the Button's Command and CommandParameter properties instead of the Clicked event

xamarin Forms - Is it possible to get Grid row selection event?

How do i get row id of grid row selection? I want to add row unique id and i want it on tapped or on clicked. please suggest me if anyone have any idea.
I want to do some thing like this, if i click on the row and i get id. with this id i will fetch another records and send user on another page. for this i need unique id of the row.
i have grid like bellow:
Below is the code i use:
public BusList(Common busdata)
{
InitializeComponent();
this.BindingContext = this;
List<BusDetail> Bus = new List<BusDetail>
{
...
new BusDetail("Nita Travel","Mumbai", "Navsari",new DateTime(2017, 3, 9), "10:15 AM", "09:15 AM")
};
Label header = new Label
{
Text = "GridView Demo",
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
HorizontalOptions = LayoutOptions.Center
};
var controlGrid = new Grid
{
RowSpacing = 2,
ColumnSpacing = 2,
Margin = new Thickness(5, Device.OnPlatform(5, 0, 0), 5, 5)
};
controlGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(30) });
for (int i = 0; i < Bus.Count(); i++)
{
controlGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(30) });
}
controlGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
controlGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
controlGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
controlGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
Bus = Bus.Where(x => x.FromDest.ToLower().Contains(busdata.FromDest.ToLower()) && x.FromDate == busdata.FromDate).ToList();
controlGrid.Children.Add(new Label { Text = "ID", Font = Font.SystemFontOfSize(NamedSize.Large).WithAttributes(FontAttributes.Bold), BackgroundColor = Color.Gray }, 0, 0);
controlGrid.Children.Add(new Label { Text = "Travel Name", Font = Font.SystemFontOfSize(NamedSize.Large).WithAttributes(FontAttributes.Bold), BackgroundColor = Color.Gray }, 1, 0);
controlGrid.Children.Add(new Label { Text = "Arr Time", Font = Font.SystemFontOfSize(NamedSize.Large).WithAttributes(FontAttributes.Bold), BackgroundColor = Color.Gray }, 2, 0);
controlGrid.Children.Add(new Label { Text = "Dep Time", Font = Font.SystemFontOfSize(NamedSize.Large).WithAttributes(FontAttributes.Bold), BackgroundColor = Color.Gray }, 3, 0);
for (int i = 0; i < Bus.Count(); i++)
{
var clickableRow = new ContentView();
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.SetBinding(TapGestureRecognizer.CommandProperty, "RowTappedCommand");
tapGestureRecognizer.SetBinding(TapGestureRecognizer.CommandParameterProperty, i.ToString());
clickableRow.GestureRecognizers.Add(tapGestureRecognizer);
clickableRow.BindingContext = i.ToString();
controlGrid.Children.Add(clickableRow, 0, i);
Grid.SetColumnSpan(clickableRow, 3);
controlGrid.Children.Add(new Label { Text = Bus[i].TravelName, BindingContext = Bus[i].TravelName, BackgroundColor = Color.LightGray, VerticalTextAlignment = TextAlignment.Center }, 1, i + 1);
controlGrid.Children.Add(new Label { Text = Bus[i].ArrivalTime, BindingContext = Bus[i].ArrivalTime, BackgroundColor = Color.LightGray, VerticalTextAlignment = TextAlignment.Center }, 2, i + 1);
controlGrid.Children.Add(new Label { Text = Bus[i].DepartureTime, BindingContext= Bus[i].DepartureTime, BackgroundColor = Color.LightGray, VerticalTextAlignment = TextAlignment.Center }, 3, i + 1);
}
this.Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5);
this.Content = new StackLayout
{
Children =
{
header,
controlGrid
}
};
}
public void RowTappedCommand(string index)
{
var tappedRow = int.Parse(index);
}
You could add a ContentView to each row on the first column and span it across all columns by using the ColumnSpan property. Then you'd handle the taps with a TouchGestureListener. When creating the Command, you'd also include a CommandParameter which contains the index of the row in question.
Outside the constructor, define this:
public ICommand RowTappedCommand { get; private set; }
Then add the following code somewhere after InitializeComponent:
RowTappedCommand = new Command<string>(RowTapped);
Then create the clickable ContentView controls for each row:
var clickableRow = new ContentView {
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
}
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.SetBinding(TapGestureRecognizer.CommandProperty, "RowTappedCommand");
var binding = new Binding();
binding.Source = i.ToString();
tapGestureRecognizer.SetBinding(TapGestureRecognizer.CommandParameterProperty, binding); // This is the index of the row
clickableRow.GestureRecognizers.Add(tapGestureRecognizer);
controlGrid.Children.Add(clickableRow, 0, 0);
Grid.SetColumnSpan(clickableRow,3);
You also need to define the method that matches the name defined in the CommandProperty. If you have a view model defined for the view you need to do it there. Otherwise, you'll need to add the method to your view's code behind file (xaml.cs).
void RowTapped(string index)
{
var tappedRow = int.Parse(index);
// Do something with the value
}
Remember to set the BindingContext correctly so that your command gets called. Here's more information about Commands in Xamarin.Forms:
Update: There were a few mistakes that needed to be fixed.
Command wasn't defined correctly.
The binding for the command property needs to be pointing to a static value
Simplifying Events with Commanding

Google Maps V.3 custom icons

How can I make a similar script for custom marker with Google Maps 3? Just like this with v.2 :
var iconBlue = new GIcon();
iconBlue.image = 'images/cell1.png';
iconBlue.shadow = '';
iconBlue.iconSize = new GSize(32, 32);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(3, 16);
iconBlue.infoWindowAnchor = new GPoint(15, 15);
var iconRed = new GIcon();
iconRed.image = 'images/cell3.png';
iconRed.shadow = '';
iconRed.iconSize = new GSize(32, 32);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(15, 2);
iconRed.infoWindowAnchor = new GPoint(15, 15);
var iconGreen = new GIcon();
iconGreen.image = 'images/cell2.png';
iconGreen.shadow = '';
iconGreen.iconSize = new GSize(32, 32);
iconGreen.shadowSize = new GSize(22, 20);
iconGreen.iconAnchor = new GPoint(-9, 2);
iconGreen.infoWindowAnchor = new GPoint(20, 15);
var customIcons = [];
customIcons["60"] = iconBlue;
customIcons["240"] = iconRed;
customIcons["350"] = iconGreen;
I wrote the following in Version 3 and the marker is not shown.
var cellone = new google.maps.MarkerImage("images/cell1.png",
new google.maps.Size(20, 34), new google.maps.Point(0,0),
new google.maps.Point(3, 16));
var celltwo = new google.maps.MarkerImage("images/cell2.png",
new google.maps.Size(20, 34), new google.maps.Point(0,0),
new google.maps.Point(-9, 2));
var cellthree = new google.maps.MarkerImage("images/cell3.png",
new google.maps.Size(20, 34), new google.maps.Point(0,0),
new google.maps.Point(15, 2));
var customIcons = [];
customIcons["60"] = cellone;
customIcons["240"] = celltwo;
customIcons["350"] = cellthree;
I've recently just did this icon stuff myself. And I initially used the same type of code you used, but that didn't work. Apparently new GIcon() was not functioning properly.
There is a very simple way to change icon though and it doesn't use variables.
This is what I did.
Declare markerVariable as a global variable.
When you create new markers, one of the lines should say icon : ...
Here is a sample of my code. Of course, you will have to change certain lines to have it working for your program (and you can't use marker with labels unless you change certain functions).
Lastly, icon : ... can be a link or location on your computer.
var iconArray = [
["http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/purple-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/ltblue-dot.png"]
];
function getMarkers() {
for (i = 0; i < locations.length; i++) {
marker[i] = new MarkerWithLabel({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
draggable: false,
map: map,
icon: new google.maps.MarkerImage(iconArray[i]),
//icon: new google.maps.MarkerImage("http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png"),
//labelContent: locations[i][3],
labelAnchor: new google.maps.Point(30, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
}
}
function initialize() {
getMarkers();
}
Translated version of Mike Williams' v2 "category" example

Problems with deleting items from a listbox

The behaviour Im trying to achieve is to press and hold a listbox item and I should be able to delete the item.
I have created the listbox through code. Everylistitem has a stackpanel which holds two textblocks, ie a date and a string.
How can i get press and hold event for a selectedlistitem?? I have not used binding anywhere.
C#:
for (int i = 0; i < iHistCount; i++)
{
TextBlock dateText = new TextBlock();
TextBlock durationText = new TextBlock();
TextBlock spacer = new TextBlock();
TextBlock spacer2 = new TextBlock();
dateText.FontFamily = (FontFamily)App.Current.Resources["CicleFina"];
durationText.FontFamily = (FontFamily)App.Current.Resources["CicleFina"];
dateText.FontSize = 25;
durationText.FontSize = 25;
dateText.TextAlignment = TextAlignment.Right;
durationText.TextAlignment = TextAlignment.Left;
dateText.VerticalAlignment = System.Windows.VerticalAlignment.Center;
durationText.VerticalAlignment = System.Windows.VerticalAlignment.Center;
spacer.Width = 30;
dateText.Width = 130;
spacer2.Width = 50;
durationText.Width = 170;
DateTime dtHist = pCycMan.GetHistoryDate(i);
strDisplay = dtHist.ToString("dd-MMM-yyyy");
dateText.Text = strDisplay;
if( condition)
{
// logic
durationText.Text = strDisplay;
}
StackPanel st = new StackPanel();
st.Height = 50;
st.Orientation = System.Windows.Controls.Orientation.Horizontal;
st.Children.Add(spacer);
st.Children.Add(dateText);
st.Children.Add(spacer2);
st.Children.Add(durationText);
listboxHistory.Items.Add(st);
}
XAML
<ListBox x:Name="listboxHistory" Height="280" Canvas.Left="60" Canvas.Top="232" Width="360" Foreground="Gray">
Assuming you're using the Silverlight toolkit for a context menu, this link is a good example, and has how to create the menu in code-behind.
http://windowsphonegeek.com/articles/WP7-ContextMenu-in-depth--Part1-key-concepts-and-API
For example here:
StackPanel st = new StackPanel();
st.Height = 50;
st.Orientation = System.Windows.Controls.Orientation.Horizontal;
st.Children.Add(spacer);
st.Children.Add(dateText);
st.Children.Add(spacer2);
st.Children.Add(durationText);
listboxHistory.Items.Add(st);
ContextMenu cm = new ContextMenu();
MenuItem delete = new MenuItem()
{
Header = "Delete",
Tag= "Delete" //you could also put the item itself here, would be a good reference
};
delete.Clicked += //your event handler
MenuItem edit = new MenuItem()
{
Header = "Edit",
Tag = "Edit", //you could also put the item itself here, would be a good reference
};
edit.Clicked += //your event handler
//add the items to the context menu.
cm.Items.Add(delete);
cm.Items.Add(edit);
ContextMenuService.SetContextMenu(st, cm);

Resources