I'm trying to achieve what I think is probably quite simple but as I'm new to Xamarin & Databinding I think I'm getting in a spin.
I have a very simple ContentPage that just has a Databinding to my viewModel for this page and my ContentView, TotalsTemplate.
<ContentPage.BindingContext>
<vm:DealsTodayViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout>
<template:TotalsTemplate></template:TotalsTemplate>
</StackLayout>
</ContentPage.Content>
My viewmodel has a public property of my class, Totals, which has basic int,string,decimal props.
public class DealsTodayViewModel
{
Public string ViewModelPeriod;
public PeriodTotals Totals;
public DealsTodayViewModel()
{
ViewModelPeriod = "TODAY";
Totals = new PeriodTotals
{
Period = "DAILY",
ClientServices_Deals_Chicago = 1,
ClientServices_Deals_Manchester_Na = 1,
ClientServices_Deals_Manchester_Uk = 1,
ClientServices_Ramp_Chicago = 1.2m,
ClientServices_Ramp_Manchester_Na = 1.3m,
ClientServices_Ramp_Manchester_Uk = 1.4m
};
}
}
Now in my TotalsTemplte ContentView I have a Grid with following inside.
<Label Text="{***Binding ViewModelPeriod***}" FontAttributes="Bold"/>
<Frame OutlineColor="Black" Grid.Row="0" Grid.Column="1">
<Label Text="{Binding ***Totals.Period***}" FontAttributes="Bold"/>
</Frame>
My String property on the DealsTodayViewModel is visible in my ContentView but not the Perod property from inside my Totals property, am I binding incorrectly to this?
From the document, data-binding should binding between properties instead of field:
Data binding is the technique of linking properties of two objects so
that changes in one property are automatically reflected in the other
property. Data binding is an integral part of the Model-View-ViewModel
(MVVM) application architecture.
So the solution is change the fields in your vm to properties:
public class DealsTodayViewModel
{
public string ViewModelPeriod { get; set; }
public PeriodTotals Totals { get; set; }
public DealsTodayViewModel()
{
...
}
}
Refer: field and property
Related
I have problem with binding complex list objects to listview's itemssource in xaml page.
Code is not writen in english so i will try to mock up my problem!This is list which is used as itemssource
public ObservableCollection<Order> orderList { get; set; } = new ObservableCollection<Order>();
My Order class has istance of OrderState class, and my OrderState class has instance of State class.
State class has property named Name and this property I am trying to access so i could bind it to label in xaml page.
public class Order
{
public virtual ICollection<OrderState> OrderState { get; set; }
}
public class OrderState
{
public virtual ICollection<State> State { get; set; }
}
public partial class State
{
public string Name{ get; set; }
}
So if i want to access Name property from Order class I need to go OrderState-> State-> name
<ListView ItemsSource="{Binding orderList}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10" Margin="5" Orientation="Horizontal" >
//dont know how to access Name property here
//I tried with OrderState.State.Name and State.Name but i only get empty text
<Label Text="{Binding Name}"
d:Text="Item descripton"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="13" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
orderList has all data needed to display Name property, just dont know which path to use to get to it!
Any help is appreciated!!
Thank you for your time!
Main question solved , update question
var query = _context.Set<Database.Order>().AsQueryable();
query = query.Include("OrderState").Include("OrderState.State");
how could i write this query so i can order OrderState by desc and take top 1 row???
Thank you for your time again!!!!!
I'm attempting to get my head around MVVM with XamarinForms and I'm slightly confused with regards to proper partitioning of functionality:
I have a main page, MainPage.xaml, which includes a stacklayout:
<StackLayout x:Name="MainPageStackLayout">
...
</StackLayout>
Within this stacklayout I have Picker which is bound as follows:
<Picker Title="Select a background colour"
TitleColor="Black"
TextColor="Black"
ItemsSource="{Binding MyColours}"
ItemDisplayBinding="{Binding Name}"
SelectedItem="{Binding selectedBackGroundColour}" SelectedIndexChanged="BackGroundColourPicker_SelectedIndexChanged"/>
Following the article from microsoft (https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-monkeyapppicker/):
I have a "View" which basically defines the layout of my page.
A "ViewModel" which holds an IList "MyColours" and a variable "SelectedBackGroundColour".
A "Model" which defines the MyColour class. A MyColour has a string name and a Xamarin.Forms.Color (from a hex value, both populated on start up).
This all works fine. I can start up the app and the Picker populates with the colours I add to "MyColours". If I change the index then my SelectedBackGroundColour also updates, has the correct name and a different RGB value.
However, I'm lost as to where I would tie in the updating of the actual background colour of the MainPageStackLayout. The View (MainPage.xaml.cs) picks up the "BackGroundColourPicker_SelectedIndexChanged" event but what is the standard practice for reading from the view model (where SelectedBackGround colour is actual defined ?)
I have a feeling I can bind Background colour in the MainPageStackLayout xaml view so I wont have to catch the selected index change event.
Thanks all.
According to your description, I guess that you want to change MainPage StackLayout BackGround color by Picker value, am I right?
If yes, please follow the steps below.
Firstly, please confirm that you implement INotifyPropertyChanged interface to notify SelectedBackGroundColour changed.
Then there are full code, please take a look:
<StackLayout x:Name="MainPageStacklayout" BackgroundColor="{Binding selectedBackGroundColour.color}">
<Picker
x:Name="picker1"
Title="Select a background colour"
ItemDisplayBinding="{Binding name}"
ItemsSource="{Binding MyColours}"
SelectedItem="{Binding selectedBackGroundColour}"
TextColor="Black"
TitleColor="Black" />
</StackLayout>
public partial class Page5 : ContentPage, INotifyPropertyChanged
{
public ObservableCollection<MyColour> MyColours { get; set; }
private MyColour _selectedBackGroundColour;
public MyColour selectedBackGroundColour
{
get { return _selectedBackGroundColour; }
set
{
_selectedBackGroundColour = value;
RaisePropertyChanged("selectedBackGroundColour");
}
}
public Page5()
{
InitializeComponent();
MyColours = new ObservableCollection<MyColour>()
{
new MyColour(){name="red",color=Color.Red},
new MyColour(){name="gray",color=Color.Gray},
new MyColour(){name="BlueViolet",color=Color.BlueViolet}
};
selectedBackGroundColour = MyColours[0];
this.BindingContext = this;
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class MyColour
{
public string name { get; set; }
public Color color { get; set; }
}
The screenshot:
I am new to Xamarin. I have a requirement where I have to implement a ListView or say tableView that have multiple different type-size cells.
And I also have to add Header for a particular section of cells, and some of my custom cells have a horizontal scroll in it.
I have done this thing in iOS native UITableView before, but don't know how this done in Xamarin cross platform, can anyone help me out this?
You are looking for DataTemplateSelector, which is very well documented in the official Xamarin.Forms documentation.
The basics are that you create your own DataTemplateSelector class:
public class MyDataTemplateSelector : DataTemplateSelector
{
}
In that class you override OnSelectTemplate:
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
}
By checking the type of the item argument, you should be able to figure out which template to return.
So lets say you have a ViewModel for Dog and one for Cat and want to show a different DataTemplate for each of those. You would do something like:
public class DogCatTemplateSelector : DataTemplateSelector
{
public DataTemplate DogTemplate { get; set; }
public DataTemplate CatTemplate { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
if (item is DogViewModel)
return DogTemplate;
return CatTemplate;
}
}
Then you can consume this in your XAML:
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="dogTemplate">
<ViewCell>
... <---- define your look of dog template here
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="catTemplate">
<ViewCell>
... <---- define your look of cat template here
</ViewCell>
</DataTemplate>
<local:DogCatTemplateSelector x:Key="dogCatTemplateSelector"
DogTemplate="{StaticResource dogTemplate}"
CatTemplate="{StaticResource catTemplate}" />
</ResourceDictionary>
</ContentPage.Resources>
Then simply set the ItemTemplate to your dogCatTemplateSelector instance you've defined in the resources on your ListView:
<ListView ItemsSource="{Binding DogsCatsCollection}" ItemTemplate="{StaticResource dogCatTemplateSelector}" />
Your ViewModel would then look something like:
public class Animal : INotifyPropertyChanged
{
}
public class DogViewModel : Animal
{
}
public class CatViewModel : Animal
{
}
public class MainViewModel : INotifyPropertyChanged
{
public ObservableCollection<Animal> DogsCatsCollection { get; }
= new ObservableCollection<Animal>();
}
Then you just populate DogsCatsCollection with instances of dogs and cats.
Is there a way to choose what layout initialize depending on one condition? I have a Grid for football stats but if myViewModel.Sport == Sports.Basketball I'd like to load a completely different layout.
I tried something like this with Datatrigger in each View but it seems a mess for me:
<Label Text="{Binding Goals}"
Grid.Row="1" Grid.Column="0">
<Label.Triggers>
<DataTrigger TargetType="Label"
Binding="{Binding Sport}"
Value="1">
<Setter Property="Text"
Value="{Binding Points}"/>
</DataTrigger>
</Label.Triggers>
</Label>
I show "goals" but if the Sports enum value is 1 (Sports.Basketball) I change to "points". I want to do this with lots of Labels and even Images so I need a proper way to do it.
Could someone help me? I need to load a different Grid depending on the Sport Property of my ViewModel.
Another thing you could do is place each separate sport into it's own view, add all the views to your page and set their IsVisible property depending on which sport you want to show.
An example would look like this in pseudo-code:
<Page>
<Grid>
<BasketballView IsVisible="{Binding IsBasketball}">
<SoccerView IsVisible="{Binding IsSoccer}">
<FootballView IsVisible="{Binding IsFootball}">
</Grid>
</Page>
Then set the appropriate boolean values from the ViewModel.
To use DataTemplateSelector to solve this, as mentioned by #StephaneDelcroix, you'll want a custom class that has ItemsSource and ItemTemplate properties.
I haven't thought through / tested how DataTemplateSelector would be used with this; anyone is welcome to add that to this answer.
using System.Collections;
using Xamarin.Forms;
namespace YourNamespace
{
// From https://forums.xamarin.com/discussion/19874/listview-inside-stacklayout-a-height-problem/p2, #maxx313.
public class TemplatedStack : StackLayout
{
public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create("ItemsSource", typeof(IList), typeof(TemplatedStack), propertyChanged: OnItemsSourceChanged);
public IList ItemsSource
{
get { return (IList)GetValue(ItemsSourceProperty); }
set { SetValue(ItemsSourceProperty, value); }
}
private static void OnItemsSourceChanged(BindableObject pObj, object pOldVal, object pNewVal)
{
var layout = pObj as TemplatedStack;
if (layout != null && layout.ItemTemplate != null)
{
layout.BuildLayout();
layout.ForceLayout();
}
}
public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create("ItemTemplate", typeof(DataTemplate), typeof(TemplatedStack), propertyChanged: OnItemTemplateChanged);
public DataTemplate ItemTemplate
{
get { return (DataTemplate)GetValue(ItemTemplateProperty); }
set { SetValue(ItemTemplateProperty, value); }
}
private static void OnItemTemplateChanged(BindableObject pObj, object pOldVal, object pNewVal)
{
var layout = pObj as TemplatedStack;
if (layout != null && layout.ItemsSource != null)
layout.BuildLayout();
}
private void BuildLayout()
{
Children.Clear();
foreach (var item in ItemsSource)
{
var view = (View)ItemTemplate.CreateContent();
view.BindingContext = item;
Children.Add(view);
}
}
protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
{
return base.OnMeasure(widthConstraint, heightConstraint);
}
}
}
In your XAML, do
<yourXmlns:TemplatedStack .../>
where yourXmlns must be an xmlns declaration at top of your XAML.
Usage of ItemsSource and ItemTemplate properties is similar to how you would bind an items collection and template to a ListView.
(The reason NOT to use a ListView here, is that ListView may interfere with touch events, and adds extra layout cost.)
Bind to this a collection containing a single item.
E.g. for this question, that item would be the specific sport being viewed.
I am trying to learn XAML with WINRT and I have a question about binding and viewmodels.
I have an two classes EmployeeList and DownloadableEmployee:
public sealed class EmployeeList
{
public IReadOnlyList<DownloadableEmployee> DownloadableEmployees { get; }
}
public sealed class DownloadableEmployee
{
public System.Boolean IsSelected { get; set; }
public System.String Name { get; }
//method
public IAsyncOperation<IRandomAccessStreamWithContentType> GetEmployeePicAsync();
}
I have binded the EmployeeList to a Multi Selectable ListView displaying employee Names and Pictures. A user can now select / deselect individual employee in the ListView.
To achieve that, I've have created a DownloadableItem class that acts as a ViewModel which is binded to my listview EmployeeLV.
public class DownloadableItemVM
{
public string Name
{
get;
private set;
}
public IRandomAccessStreamWithContentType EnmployeePic
{
get;
private set;
}
public DownloadableItem(string name, IRandomAccessStreamWithContentType thumbnail)
{
Name = name;
Thumbnail = thumbnail;
}
}
ObservableCollection<DownloadableItemVM> employeesToDownload = new ObservableCollection<DownloadableItemVM>();
// set source to ListView
EmployeeLV.ItemsSource = employeesToDownload;
foreach (DownloadableEmployee item in EmployeeList.DownloadableEmployees)
{
IRandomAccessStreamWithContentType stream = await item.GetEmployeePicAsync();
employeesToDownload.Add(new DownloadableItemVM(item.Name, stream));
}
My List View
<ListView x:Name="employeeLV" SelectionMode="Multiple" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Thumbnail}"/>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Question XAML experts:
My ListView already binds to my custom View Model class DownloadableItemVM and properly displays the name and photo of each employee.
But now I have a problem because I need to "bind" each selected item in My ListView back to DownloadableEmployee.IsSelected such that when a user selects an employee, their "IsSelected" gets set to true and vice versa when they deselect.
How should I go about doing this?
Why not to have all DownloadableEmployee object inside your DownloadableItemVM, and bind to name, picture, etc. through this object ? E.g.
public class DownloadableItemVM
{
...
public DownloadableEmployee Employee
{
get;
private set;
}
...
public DownloadableItem(DownloadableEmployee employee, IRandomAccessStreamWithContentType thumbnail)
{
Employee= employee;
Thumbnail = thumbnail;
}
...
}
<ListView x:Name="employeeLV" SelectionMode="Multiple" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Thumbnail}"/>
<TextBlock Text="{Binding Employee.Name}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
With this approach you can reach your IsSelected prop through Employee object. Is this suitable for you ?