I have the page:
public partial class MenuPage : ContentPage
{
public MenuPage ()
{
StackLayout menu = new StackLayout { };
menu.Children.Add(new ListView
{
HorizontalOptions = LayoutOptions.Center,
ItemsSource = new string[]
{
"Settings",
"About"
}
});
Content = menu;
}
}
I'm trying to align by center the content of ListView items (with HorizontalOptions = LayoutOptions.Center), but the option has no effect (whatever values I set for HorizontalOptions - I will reach alignment just to the left side). How to center the contents of cells correctly?
As Jason said , you need to set the HorizontalOptions of each items in ListView . It is easier to define it in xaml .If you do want to implement it in code behind , you could check the following code .
You could define a custom cell
public CustomCell()
{
//instantiate each of our views
StackLayout horizontalLayout = new StackLayout() {
HorizontalOptions=LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand
};
Label Content = new Label();
//set bindings
Content.SetBinding(Label.TextProperty, ".");
Content.HorizontalOptions = LayoutOptions.CenterAndExpand;
Content.TextColor = Color.Red;
horizontalLayout.Children.Add(Content);
View = horizontalLayout;
}
StackLayout menu = new StackLayout { };
var listview = new ListView
{
ItemsSource = new string[]
{
"Settings",
"About"
}
};
listview.ItemTemplate = new DataTemplate(typeof(CustomCell));
menu.Children.Add(listview);
Content = menu;
Related
Without using XAML does anyone have an example where they create a ControlTemplate for an element?
Example:
<ControlTemplate>
<Grid>
<//Inner grid elements>
</Grid>
</ControlTemplate>
to C# code
var grid = new Grid();
//This isnt how you do it Im stuck here
var ControlTemplate = new ControlTemplate(grid)
You could refer to the code below.
public class Page1 : ContentPage
{
public Page1()
{
ControlTemplate controlTemplate = new ControlTemplate(typeof(Grid1));
ControlTemplate = controlTemplate;
}
}
public class Grid1 : ContentView
{
public Grid1()
{
Grid grid = new Grid()
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
RowDefinitions =
{
new RowDefinition{Height =GridLength.Auto},
new RowDefinition{Height =GridLength.Auto},
},
ColumnDefinitions =
{
new ColumnDefinition{ Width= GridLength.Auto},
new ColumnDefinition{ Width= GridLength.Auto},
},
};
grid.Children.Add(new Label
{
Text = "column0,row0",
}, 0, 0);
grid.Children.Add(new Label
{
Text = "column1,row1"
}, 1, 1);
Content = grid;
}
}
I am working on a simple app that keeps track of life for a card game. I am very new to xamarin so I am starting small and just slowly adding more functionality. Currently, I have two pages; One page (the page it starts on (root page?) that has only one lifetotal number, two buttons for incrementing and decrementing, and one button to switch to a two player layout, and then a second page with two lifetotals and 4 buttons (an increment and decrement for each lifetotal). I am writing all of this in C# and I would like to keep it that way, however, I am having trouble finding a way to make it so that button that switches to the two player layout will present the second page. Everything ive googled seems to point back to xml which I want to avoid. Can anyone help me understand how to do this?
I am building off an app my buddy made for to understand how xamarin works so thats what all the weird comments are
code: (the delegate i need to fill in is at the bottom, called moreplayers)
namespace SampleApp
{
//contentpage is the base class for all pages.
//You should make a base class for this page that isn't contentpage, but inherits from content page, then you can add custom methods that extend across all pages.
//Like adding a progress spinner, or disabling all UI elements.
public class MainPage : ContentPage
{
public MainPage()
{
CreateUI();
}
private void CreateUI()
{
Stats Player1 = new Stats();
Player1.LifeTotal = 20;
//abstracting out a function to build UI is good, but breaking this down further is better.
var MainGrid = new Grid()//grids are the bread and butter of xamarin forms, the documentation has lots of good examples I won't try to replicate here.
{
HorizontalOptions = LayoutOptions.FillAndExpand,//these are on all UI elements, gotta specify them or the default values will probably screw up.
VerticalOptions = LayoutOptions.FillAndExpand
};
//I usually make a bunch of nice extensions on the Grid to add rows and columns easily
MainGrid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
MainGrid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
MainGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
//grid where life total label will live
var GridForLifeTotal = new Grid()
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
GridForLifeTotal.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
GridForLifeTotal.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
GridForLifeTotal.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
//grid where buttons will live
var GridForButtons = new Grid()
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
GridForButtons.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
GridForButtons.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
GridForButtons.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
MainGrid.Children.Add(GridForLifeTotal, 0, 0); //add items to the grid based on position
MainGrid.Children.Add(GridForButtons, 0, 1);
//Add labels
var lifeLabel = new Label()
{
Text = Player1.LifeTotal.ToString(),
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
FontSize = 60
};
GridForLifeTotal.Children.Add(lifeLabel, 0, 0);
//Add buttons
var UpButton = new Button()
{
Text = "+",
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
FontSize = 30
};
UpButton.Clicked += delegate {
//delegates are bad form but it's late and I'm tired you should put this login in a view model class and have that view model be a private property on this view.
//View (this), View Model (the logic layer) then a Model to hold the life total and any other user data?
Player1.LifeTotal += 1;
lifeLabel.Text = Player1.LifeTotal.ToString();
};
var DownButton = new Button()
{
Text = "-",
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
FontSize = 30
};
DownButton.Clicked += delegate {
//delegates are bad form but it's late and I'm tired
Player1.LifeTotal -= 1;
lifeLabel.Text = Player1.LifeTotal.ToString();
};
var MorePlayers = new Button()
{
Text = "2 Player Game",
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.End,
FontSize = 30
};
MorePlayers.Clicked += delegate
{
//need to figure out what goes here
};
GridForButtons.Children.Add(UpButton, 0, 0);
GridForButtons.Children.Add(DownButton, 1, 0);
GridForButtons.Children.Add(MorePlayers, 0, 1);
Content = MainGrid;//very important, otherwise you don't actually see anything you've built
}
}
}
first, you need to wrap MainPage in a NavigationPage when you first assign it in your App.xaml.cs
MainPage = new NavigationPage(new MainPage());
then, to navigate to the next page in your delegate
this.Navigation.PushAsync(new Page2());
I have this line of code to add the listview in the frame:
frame.Content = containerListView;
However, I also have a button inside a stacklayout that I also want to be included in the frame.
I tried this but no luck:
frame.Content = containerListView && buttonStackLayout;
frame.Content = containerListView , buttonStackLayout;
This is not the same scenario as the other stack post because the other post adds 2 stacklayouts to a viewcell. I need to add a listview and stacklayout to a frames content.
Firstly, you need to create your StackLayout and Button then add add them as the content of your
//StackLayout
StackLayout buttonStack = new StackLayout()
{
Padding = new Thickness(0, 10),
HorizontalOptions = LayoutOptions.FillAndExpand,
BackgroundColor = "Gray" ,
};
//Button
Button btn = new Button() { Text = "Button", HorizontalOptions = LayoutOptions.Center};
btn.Clicked += btn_Clicked; //don't forget to create the btn_Clicked event/method
buttonStack.Children.Add(btn);
Edit
private ListView GetListView(int index)
{
ListView listView = new ListView();
listView.ItemsSource = //your list Source
Frame frame = new Frame();
frame.Margin = new Thickness(3);
frame.Content = listView;
return listView;
}
I want to create a listview in Xamarin portable,
the item source of the listview is List<String> and my datatemplate of the listview is prepared by this function,
private DataTemplate createItemtemplate()
{
try
{
Label lbl_binding = new Label()
{
TextColor = Color.Red,
FontSize = 16,
VerticalTextAlignment = TextAlignment.Center,
HorizontalOptions = LayoutOptions.CenterAndExpand,
};
lbl_binding.SetBinding(Label.TextProperty, ".");
StackLayout stkBottom = new StackLayout()
{
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.Center,
Padding = new Thickness(0),
};
stkBottom.Children.Add(lbl_binding);
ViewCell vc = new ViewCell() {
View = stkBottom
};
DataTemplate Dp = new DataTemplate(() =>
{
return vc;
});
return Dp;
}
catch (Exception ex)
{
return null;
}
}
Now, my list view is populated, but all the labels are filled with last item, I mean the no of items are rightly populated, but all the items are filled with the last item only.
what i am doing wrong here?
lstAdmin = new ListView()
{
ItemTemplate = createItemtemplate(),
};
lstadmin.Itemsource = source;
Change your listview from List to ObservableCollection. This should do the work.
Below code useful for you as reference
Take Class members:
public class Dummy
{
public string Id { get; set; }
public string Img { get; set; }
public string Title { get; set; }
public string SubTitle { get; set; }
public string Count { get; set; }
public string Status { get; set; }
}
Create One ObservableCollectionList:
ObservableCollection<Dummy> productItems = new
ObservableCollection<Dummy>();
Add Items to the ObservableCollectionList:
productItems.Add(new Dummy() { Name = "0", Img = "Avatar.png",
Title = "Total Books", SubTitle = "Desc", Count = "50", Status =
"Total" });
productItems.Add(new Dummy() { Id = "1", Img = "Avatar.png", Title
= "Out of Stock Books", SubTitle = "Desc", Count = "40", Status =
"OutStock" });
Declare ListView:
ListView listview = new ListView()
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
SeparatorVisibility = SeparatorVisibility.None,
RowHeight = 30,
};
listview.ItemTemplate = new DataTemplate(typeof(cell));
listview.ItemSelected += listviewItemSelected;
Take ViewCell and design your UI in ViewCell and assign binding
public class cell : ViewCell
{
public cell()
{
Image img = new Image()
{
VerticalOptions = LayoutOptions.StartAndExpand,
};
img.SetBinding(Image.SourceProperty, new Binding("Img"));
Label lbltitle = new Label()
{
VerticalOptions = LayoutOptions.Start,
TextColor = Color.Black
};
lbltitle.SetBinding(Label.TextProperty, new
Binding("Title"));
Label lbldesc = new Label()
{
VerticalOptions = LayoutOptions.Start,
TextColor = Color.Black
};
lbldesc.SetBinding(Label.TextProperty, new
Binding("SubTitle"));
StackLayout lblstack = new StackLayout()
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = { lbltitle, lbldesc },
};
BoxView boxEdit = new BoxView()
{
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.End,
Color = Color.Black,
HeightRequest = 20,
WidthRequest = 10
};
tapGestureEdit.Tapped += tapGestureEditTapped;
Label lblCount = new Label()
{
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
TextColor = Color.Black
};
lblCount.SetBinding(Label.TextProperty, new
Binding("Count"));
StackLayout stackCount = new StackLayout()
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.EndAndExpand,
Children = { boxEdit, lblCount },
};
StackLayout stackMain = new StackLayout()
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = { img, lblstack, stackCount },
Orientation = StackOrientation.Horizontal,
Margin = new Thickness(10, 10, 10, 10)
};
View = stackMain;
}
}
public class AdminCell : ViewCell
{
public AdminCell()
{
Label lbl_binding = new Label()
{
TextColor = Color.FromRgb(30, 144, 255),
FontSize = 16,
VerticalTextAlignment = TextAlignment.Center,
HorizontalOptions = LayoutOptions.CenterAndExpand,
};
lbl_binding.SetBinding(Label.TextProperty, ".");
StackLayout stkBottom = new StackLayout()
{
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.Center,
Padding = new Thickness(0),
};
stkBottom.Children.Add(lbl_binding);
View = stkBottom;
}
}
this code is working for me removed the template and use this cell, i still don't understand why the data template is not working
I had the same issue and after some tests I've figured out how to not get always the last item.
You should put the Label creation ,and all the other elements you want put as ItemTemplate, inside the lambda of the DataTemplate like this (example code) :
DataTemplate itemTemplate = new DataTemplate(() =>
{
Label label = new Label()
{
Margin = new Thickness(45, 0, 0, 0),
HorizontalOptions = LayoutOptions.Start,
FontSize = (double)Xamarin.Forms.Application.Current.Resources["BodyFontSize"],
HeightRequest = 20
};
label.SetBinding(Label.TextProperty, "Name");
ViewCell templateCell = new ViewCell()
{
View = label
};
return templateCell;
});
Hope that helps (helped in my case).
I have ListView and I assigned DataTemplate to it. Now I have some controls in it like Button, Images and Labels. Now I want some actions on click event of that controls.
My ListView is like this-
listof_ingredients_and_lifestyleDiets = new ListView
{
BackgroundColor = Color.FromHex ("#CDBA96"),
ItemTemplate = preferenceTableCell,
SeparatorColor =Color.FromHex("#CDBA96"),
RowHeight=40,
HeightRequest=200
};
My DataTemplate is like this-
DataTemplate preferenceTableCell = new DataTemplate (() => {
var itemName = new Label {
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
WidthRequest=80,
FontSize=14,
TextColor=ColorResources.TextColor,
};
itemName.SetBinding (Label.TextProperty, "Name");
var radiobtn_allergen = new CircleImage {
BorderColor = ColorResources.commonButtonBackgroundColor,
HeightRequest = 25,
WidthRequest = 25,
Aspect = Aspect.AspectFill,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Source="radio_Check.png"
};
radiobtn_allergen.SetBinding(CircleImage.IsVisibleProperty,"isExcluded");
var radiobtn_preference = new CircleImage {
BorderColor = ColorResources.commonButtonBackgroundColor,
HeightRequest = 25,
WidthRequest = 25,
Aspect = Aspect.AspectFill,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Source="radio_uncheck.png",
};radiobtn_preference.SetBinding (CircleImage.IsVisibleProperty, "isExcluded");
var btnDelete=new Button{
Image="deleteBtn.png",
HorizontalOptions=LayoutOptions.EndAndExpand,
HeightRequest=50,
WidthRequest=30
};
StackLayout stacklayout = new StackLayout {
Spacing = 60,
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = { itemName,radiobtn_allergen,radiobtn_preference,btnDelete }
};
return new ViewCell { View = stacklayout };
});
Now My question is, I want implement tap gesture for image tap and button click event for button control. How to do this?
Click handler for a button
btnDelete.Clicked += ((sender, args) => {
// perform actions here
});
attach a gesture recognizer to an Image
TapGestureRecognizer tapped = new TapGestureRecognizer();
tapped.Tapped += ((o2, e2) =>
{
// perform actions here
});
img.GestureRecognizers.Add(tapped);