I just dived in to Xamarin Forms and using Azure.
I am able to successfully call the row from the database but it's displaying something into the ListView instead of what I want it to display.
My codes:
private async void generateList()
{
var clientUsers = await App.MobileService.GetTable<iSoftTicket.Model.TblUser>().Where(u => u.uc_category == "Client").ToListAsync();
lvClient.ItemsSource = clientUsers;
}
I want it to display the column with Gulfden on it. Any help is appreciated.
Thanks.
You should create your ListView's ItemTemplate(e.g. ViewCell) and then add some label to display your data like:
<ListView x:Name="MyListView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Admin}"/>
<Label Text="{Binding Tickets}"/>
<Label Text="{Binding Clients}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I notice that you have set your listview's ItemSource, please make sure your model's property names is Corresponding to the Binding name in the XAML, you can refer to my sample in code behind:
ObservableCollection<MyModel> list = new ObservableCollection<MyModel>();
for (int i=0; i<10; i++)
{
list.Add(new MyModel { Admin = "admin" + i, Clients = "client", Tickets = "tickets" });
}
MyListView.ItemsSource = list;
public class MyModel
{
public string Admin { set; get; }
public string Tickets { get; set; }
public string Clients { get; set; }
}
Related
I am trying to pull an image from an api endpoint. So far everything works an appears except the image. I am not sure if its because I am calling it as a string or if i should change it to something else.
Below is my code, if more is needed or if im missing something please let me know.
Thank you
EventsDAL.cs
public class Events
{
public string EventTitle { get; set; }
public string EventDescription { get; set; }
public DateTime EventDateAndTime { get; set; }
public string EventPosterImageURL { get; set; }
public string EventTitleReturn { get { return EventTitle; } }
public string EventDescriptionReturn { get { return EventDescription; } }
public DateTime EventDateReturn { get { return EventDateAndTime; } }
public string EventImageReturn { get { return EventPosterImageURL; } }
}
EventsPage.xaml
<ScrollView >
<ListView x:Name="lvEvent" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout VerticalOptions="Fill" >
<Label x:Name="lbTitle" HorizontalOptions="Center" Text="{Binding EventTitleReturn}" FontSize="Title"/>
<Label Text="{Binding EventDescriptionReturn}" FontSize="Large"/>
<Label Text="{Binding EventDateReturn}" HorizontalOptions="Center" FontSize="Large"/>
<Image Source="{Binding EventImageReturn}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
My controller
public ActionResult Events()
{
var umbEvents = Umbraco.Content(1056).Children<Event>().ToList();
var vmEvents = new List<EventViewModel>();
foreach (var item in umbEvents)
vmEvents.Add(new EventViewModel
{
EventTitle = item.EventTitle,
EventDescription = item.EventShortDescription,
EventDateAndTime = item.EventDateAndTime,
EventPosterImageURL = item.EventPosterImage == null ? "" : item.EventPosterImage.Url,
EventURL = item.Url
});
return Json(vmEvents, JsonRequestBehavior.AllowGet);
}
Postman
"EventTitle": "Seeing Red!",
"EventDescription": "The Ladies of Seeing Red are one of the best acoustic bands on the Memphis music scene. They provide a great variety of music for any environment. It is a fun show with a great energy level and they adapt well to any size venue. Sponsored by ProBuilt of Memphis.",
"EventDateAndTime": "/Date(1599332400000)/",
"EventURL": "/events/seeing-red/",
"EventPosterImageURL": "/media/3ablnzez/seeingred.jpg"
"EventPosterImageURL": "/media/3ablnzez/seeingred.jpg"
this is a path, not a url. If you want the image to load from the remote server, you need to return a complete url - ie, http://myserver.com/media/3ablnzez/seeingred.jpg
I want to create elements on the Xamarin forms UI based on user input but I do not know how to go about it. In the screenshot attached, I want to capture details pertaining to a user's family. Each member has a name, date of birth, phone number, and email address.
The user specifies the number of family members in the "Number of family members" field and clicks "Add", which creates the specified number of instances of the name, date of birth, phone number, and email address.
.
How can I go about this?
Just wrote a demo and achieve what jason said in the comment. Use a collectionView and update itemSource with the family member user input in the entry:
In xaml:
<StackLayout Margin="20">
<Label Text="number of familay numbers"/>
<Entry x:Name="numberEntry" Placeholder="enter the number"/>
<Button Text="add" Clicked="Button_Clicked"/>
<CollectionView x:Name="testCollectionView" ItemsSource="{Binding familyMember}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
ItemSpacing="20" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text= "name"/>
<Entry Placeholder="enter the number"/>
<Label Text= "phone"/>
<Entry Placeholder="enter the phone"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
In code behind:
public partial class MainPage : ContentPage
{
viewModel vm;
public MainPage()
{
InitializeComponent();
vm = new viewModel();
BindingContext = vm;
}
private void Button_Clicked(object sender, EventArgs e)
{
var text = numberEntry.Text;
int number = Convert.ToInt32(text);
for (int i = 0; i < number; i++)
{
PersonalInfo memberOne = new PersonalInfo() { name = "", phone = "" };
vm.familyMember.Add(memberOne);
}
}
}
public class viewModel {
public ObservableCollection<PersonalInfo> familyMember { get; set; }
public viewModel()
{
familyMember = new ObservableCollection<PersonalInfo>();
//PersonalInfo memberOne = new PersonalInfo() {name = "jack", phone="516" };
//familyMember.Add(memberOne);
}
}
public class PersonalInfo
{
public string name { get; set; }
public string phone { get; set; }
}
I uploaded a sample project here and feel free to ask me any question.
I'm trying to insert certain pieces of data of a user into a ListView, but can't seem to get any of them to show up.
This is how my code looks like so far. The issue is in the last two classes (Invite_Page.xaml.cs and Invite_Page.xaml), but I also pasted my notes from other classes which could be relevant.:
User.cs:
public class User {
public string fName { get; set; }
public string lName { get; set; }
public string uName { get; set; }
public string Pw { get; set; }
// public string cls { get; set; }
}
fName and lName are both Strings
DatabaseManager.cs:
public class DatabaseManager
{
SQLiteConnection dbConnection;
public DatabaseManager()
{
dbConnection = DependencyService.Get<IDBInterface>().CreateConnection();
}
public List<User> GetAllUsers()
return dbConnection.Query<User>("Select * From [User]");
public int SaveUser(User aUser)
{
//dbConnection.CreateTable<User>();
//return 1;
return dbConnection.Insert(aUser);
}
public List<User> GetAllNames()
return dbConnection.Query<User>("Select fName, lName From [User] ORDER BY fName;");
//.....
Invite_Page.xaml:
<ListView
x:Name="invitees"
SeparatorColor="White"
BackgroundColor="Transparent"
ItemsSource="{Binding invitees}"
IsGroupingEnabled="true"
IsPullToRefreshEnabled="true"
ItemTapped="Handle_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding}" TextColor="White"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Invite_Page.xaml.cs:
DatabaseManager DBM = new DatabaseManager();
// List<User> Invitees(String SearchText = null)
// {
// invitees.ItemsSource = DBM.GetAllNames();
// return Invitees();
// }
protected override void OnAppearing()
{
base.OnAppearing();
invitees.ItemsSource = DBM.GetAllNames();
}
In the Invite_Page.xaml.cs code, you can see that I tried inputting the data by using the code that is commented out. The result of that was that nothing showed up in the list. But with the second method which isn't commented out, the result was that "RoseySports.User" was placed in the ListView. I'm trying to make it so that the values of fName and lName are put together as one string, and are placed in the ListView.
The easiest way is to override ToString() method of the User class:
public override string ToString()
{
return fName + " " + lName;
}
The other option is to build more complicated DataTemplate as #ViralThakker mentioned.
P.S. The line ItemsSource="{Binding invitees}" in your XAML is unusable if you are assigning ItemsSource in code.
First, you have to specify what you really want from the model of User to the TextCell that you use binding. You set as ItemSource Users, but you just set TextCell Binding without any variable. Try to set Text={Binding fName} for example.
Second, try to use ViewModel to populate data. Learn more here: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/enterprise-application-patterns/mvvm
You need to create Custom List item template to display value from your object.
For example you want to display fName,lName and uName then you'll have to use below code for binding values to list item
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" Padding="10">
<Label Text="{Binding fName}" TextColor="White"/>
<Label Text="{Binding lName}" TextColor="White"/>
<Label Text="{Binding uName}" TextColor="White"/>
</StackLayout>
</ViewCell>
</DataTemplate>
The example on the Xamarin website doesn't have code that shows how to simple take a list of data objects and populate a ListView with TextCells with primary text and detail text.
My code looks like this:
var newsListings = await App.Api.News.GetNewsAsync(true);
var simpleNews = new List<TextCell>();
foreach (var newsData in newsListings.news)
{
simpleNews.Add(new TextCell() { Text = $"{newsData.displayText}", TextColor = Color.SlateGray, Detail = $"{MonthHelper.GetShortMonth(newsData.displayDate.Month,'.')} {newsData.displayDate.Day}, {newsData.displayDate.Year}", DetailColor=Color.DarkGray });
}
NewsListing.ItemsSource = simpleNews;
Simple XAML:
<ScrollView>
<ListView x:Name="NewsListing"></ListView>
</ScrollView>
The output is a ListView that says Xamarin.Forms.TextCell 27 times...
You bind a list by creating an IEnumerable and assigning to it to ItemSource, and them by using a template to specify which properties from your data to display.
public class Data {
public string Primary { get; set; }
public string Secondary { get; set; }
}
// in your page's OnAppearing
listView.ItemsSource = new List<Data>() { // initialize your list // };
// XAML
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Primary}" DetailText="{Binding Secondary}">
<DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am new to xamarin and I am stuck with a problem.
I am making a todo app, where in the listview where you see the items you could set the task to done with a switch. The switch currently displays the saved value, so it is bound to the value from the database, but I can not see how to save the state if it gets changed.
As I see somehow I need to get the object from the switch, I appreciate the help.
<ListView x:Name="MainListView"
ItemSelected="MainListView_OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Content}"></Label>
<Switch IsToggled="{Binding Done}" HorizontalOptions="EndAndExpand"></Switch>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This is my custom ViewcCel where the value is bound.
public ToDoItem() { }
[PrimaryKey, AutoIncrement]
public int Id { get; set; }
public string Content { get; set; }
public string PicturePath { get; set; }
public bool Done { get; set; }
This is the Entity.
The list is on the main page, with the page in the code behind i do other stuff, just in case here is the code https://github.com/benonymus/ToDoApp3
You can have:
<Switch x:Name="my_switch" Toggled="Switch_Toggled" />
and in page:
public MyPage()
{
my_switch.IsToggled = Done;
}
private void Switch_Toggled(object sender, ToggledEventArgs e)
{
Done = my_switch.IsToggled;
}
Edit:
You can also try:
<Switch IsToggled="{Binding Done, Mode=TwoWay}" />