Develop Reference

How can you bind a Label to a function result in Xamarin.Forms

I'm trying to bind a Label to the result of the GetPlayCount() function call. The other bindings, for Name and Category, are working as expected, but there is no output for the third label
XAML:
<ListView ItemsSource="{Binding Games}"
HasUnevenRows="true"
HeightRequest="200"
SeparatorVisibility="Default">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Margin="0" Padding="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Margin="0" Text="{Binding Name}"/>
<Label Grid.Column="1" Margin="0" Text="{Binding Category}"/>
<!--This following Label is the one not binding -->
<Label Grid.Column="2" Margin="0" Text="{Binding GetPlayCount}" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Code Behind:
public partial class CollectionPage : ContentPage
{
CollectionViewModel collectionView = new CollectionViewModel();
public CollectionPage()
{
InitializeComponent();
BindingContext = collectionView;
}
}
ViewModel:
public class CollectionViewModel : INotifyPropertyChanged
{
private ObservableCollection<Game> games;
public ObservableCollection<Game> Games
{
get { return games; }
set
{
games = value;
OnPropertyChanged("Games");
}
}
public CollectionViewModel()
{
GetGames();
}
public async void GetGames()
{
var restService = new RestService();
Games = new ObservableCollection<Game>(await restService.GetGamesAsync());
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Model:
public class Game
{
public string Name { get; set; }
public string Category { get; set; }
public async Task<int> GetPlayCount()
{
return (await new RestService().GetGamesAsync()).Where(result => result.Name == this.Name).Count();
}
}

You can bind only to the property. You may call that function from the property getter. However it is not possible to bind to the function. The app doesn't know when your function is updated, so binding wouldn't make much sense. For the property you can call PropertyChanged to signal that the property has a new value.

I will talk with code:
[NotMapped]
public decimal TotalPrice { get =>GetTotalPrice(); }
private decimal GetTotalPrice()
{
decimal result = 0;
foreach(var dpo in DetailPurchaseOrder)
{
result = result + dpo.GetTotalPurchasePrice();
}
return result;
}

Show List in xaml using ViewModel

I have a UserControl called "UserControllerIo" and this is what it has:
public ObservableCollection<string> Messages { get; set; }
public UserControllerIo()
{
Messages = new ObservableCollection<string>();
InitializeComponent();
IoComponentViewModel.Instance = new IoComponentViewModel();
Label1.DataContext = IoComponentViewModel.Instance;
Messages.Add(Label1.Text);
}
I consume this in my xml like so:
<Grid>
<Label>
<TextBlock x:Name="Label1" TextWrapping="WrapWithOverflow"
Text="{Binding Path=XState, Mode=OneWay}">
</TextBlock>
</Label>
<ListView
x:Name="ListView"
ItemsSource="{Binding Messages}" />
</Grid>
I have a view model for this control:
class IoComponentViewModel : INotifyPropertyChanged
{
public static IoComponentViewModel Instance { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
private string _xState;
public string XState
{
get { return _xState; }
set
{
_xState = value;
OnPropertyChanged($"XState");
}
}
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
And I invoke to populate the list on another class like so:
case x:
IoComponentViewModel.Instance.XState = msg;
break;
My problem is, it is not showing in my Listview although I can see it in my label. Can you please show me how. Thank you.

I don't know how much I understood your task from the provided code, but look at this implementation variant.
IoComponentViewModel:
public class IoComponentViewModel : INotifyPropertyChanged
{
public static IoComponentViewModel Instance { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
private string _xState;
public string XState
{
get { return _xState; }
set
{
if (_xState == value)
return;
XStates.Add(_xState = value);
OnPropertyChanged($"XState");
}
}
public ObservableCollection<string> XStates { get; } = new ObservableCollection<string>();
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
XAML:
<Grid x:Name="PART_Grid">
<Grid.DataContext>
<local:IoComponentViewModel/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--<Label>-->
<TextBlock x:Name="Label1" TextWrapping="WrapWithOverflow"
Text="{Binding XState, Mode=OneWay}">
</TextBlock>
<!--</Label>-->
<ListView Grid.Row="1"
x:Name="ListView"
ItemsSource="{Binding XStates}" />
</Grid>
Code Behind:
//public ObservableCollection<string> Messages { get; set; }
public UserControllerIo()
{
//Messages = new ObservableCollection<string>();
InitializeComponent();
// IoComponentViewModel.Instance = new IoComponentViewModel();
//Label1.DataContext = IoComponentViewModel.Instance;
IoComponentViewModel.Instance = (IoComponentViewModel)PART_Grid.DataContext;
//Messages.Add(Label1.Text);
}

I misread the question initially. There are two problems. Your list is not binding to the view model, so you need an element reference.
<UserControl x:Class="StackOverflow.UserControllerIo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:StackOverflow"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
x:Name="MyUserControl"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label>
<TextBlock Foreground="Black" x:Name="Label1" TextWrapping="WrapWithOverflow"
Text="{Binding Path=XState, Mode=OneWay}">
</TextBlock>
</Label>
<ListView Grid.Row="1"
x:Name="ListView"
ItemsSource="{Binding Messages, ElementName=MyUserControl}" >
</ListView>
</Grid>
Secondly, at the point where you add Label1.Text to your data binding is not ready. So you will need to wait for binding before you read the text, for example in load event like this:
public partial class UserControllerIo : UserControl
{
public ObservableCollection<string> Messages { get; set; }
public UserControllerIo()
{
Messages = new ObservableCollection<string>();
InitializeComponent();
IoComponentViewModel.Instance = new IoComponentViewModel();
Label1.DataContext = IoComponentViewModel.Instance;
IoComponentViewModel.Instance.XState = "Something";
Loaded += UserControllerIo_Loaded;
}
private void UserControllerIo_Loaded(object sender, RoutedEventArgs e)
{
Messages.Add(Label1.Text);
}
}

EDIT:
my first tests mislead me, by testing with an int property for adding values to the List on runtime.
ObservableCollection updates anyway!
The problem is how you declared the Messages Property. If you have a Property on a Control it needs to be a dependency Property to notify the UI.
replace
public ObservableCollection<string> Messages { get; set; }
with
public ObservableCollection<string> Messages
{
get { return (ObservableCollection<string>)GetValue(MessagesProperty); }
set { SetValue(MessagesProperty, value); }
}
public static readonly DependencyProperty MessagesProperty =
DependencyProperty.Register("Messages", typeof(ObservableCollection<string>), typeof(UserControllerIo), new PropertyMetadata(null));
and you should be fine.
OR
you could imlpement INotifyPropertyChanged on your UserControl class.
And don't forget to maintain #Clemens' comment about binding!!!
ItemsSource="{Binding Messages, RelativeSource={RelativeSource AncestorType=UserControl}}

C# WPF How to get binding value in code behind

I have a custom control ChatTextControl with 2 textbox and a button.
The xaml is like this :
<Grid Background="White">
<Grid.ColumnDefinitions>
<!-- Message -->
<ColumnDefinition Width="*"/>
<!-- delete message -->
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- Message content -->
<StackPanel>
<TextBlock Text="{Binding Path= Pseudo}" FontWeight="SemiBold"/>
<TextBlock Text="{Binding Path= Message}" TextWrapping="Wrap"/>
</StackPanel>
<Button Grid.Column="1" Padding="8" VerticalAlignment="Top" Width="20" Height="20" Background="{x:Null}" Click="Button_Click"/>
</Grid>
The pseudo and message come from the following class :
public class ChatListItemViewModel : BaseViewModel
{
public string Pseudo { get; set; }
public string Message { get; set; }
public int Id { get; set; }
}
ChatTextControl is called in another custom control ChatListControl:
<Grid Background="White">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:ChatTextControl />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
In my main window I call ChatListControl like so :
<local:ChatListControl x:Name="MyChat" Margin="389,10,10,38"/>
And set the DataContext in code behind :
ChatListModel chat = new ChatListModel();
MyChat.DataContext = chat;
ChatListModel :
public class ChatListModel : ChatListViewModel
{
private static int idCount = 0;
public ChatListModel()
{
Items = new List<ChatListItemViewModel>();
}
public void AddMessage(string p, string m)
{
Items.Add(new ChatListItemViewModel
{
Pseudo = p,
Message = m,
Id = idCount
});
idCount++;
}
}
The goal is to use the Button_Click event in ChatTextControl to delete the element with the corresponding id in the list.
But i don't know how to get the id in the code behind whether it's in the ChatTextControl.cs or MainWindow.cs.
If someone know how to do it or have a better idea for the delete button please let me know.

I could not verify the answer of mm8 because of the reason put in my comment, so here is the solution that I found.
After putting break point in the Button_Click event, I noticed that I could obtain the Id of ChatListItemViewModel by casting the this.DataContext in ChatTextControl and send an event like this :
public delegate void DeleteClick(int id);
public static event DeleteClick OnDeleteClick;
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
OnDeleteClick?.Invoke(((ChatListItemViewModel)this.DataContext).Id);
}
Doing so, I can get the Id and delete the item in the main window :
public ChatListModel chat;
public MainWindow()
{
InitializeComponent();
chat = new ChatListModel();
chat.AddMessage(name, "Hello World!");
MyChat.DataContext = chat;
ChatTextControl.OnDeleteClick += ChatTextControl_OnDeleteClick;
}
private void ChatTextControl_OnDeleteClick(int id)
{
chat.DelMessage(id);
MyChat.DataContext = null;
MyChat.DataContext = chat;
}

You could for example set an IsDelete property in ChatListItemViewModel when the button is clicked, raise an event and handle this event in ChatListModel. You need to use an ObservableCollecton<T> instead of a List<T> for the item to get removed in the view:
public class ChatListModel : ChatListViewModel
{
private static int idCount = 0;
public ChatListModel()
{
Items = new ObservableCollection<ChatListItemViewModel>();
AddMessage("p", "m");
}
public void AddMessage(string p, string m)
{
ChatListItemViewModel newItem = new ChatListItemViewModel
{
Pseudo = p,
Message = m,
Id = idCount
};
newItem.PropertyChanged += NewItem_PropertyChanged;
Items.Add(newItem);
idCount++;
}
private void NewItem_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
ChatListItemViewModel removedItem = (ChatListItemViewModel)sender;
removedItem.PropertyChanged -= NewItem_PropertyChanged;
Items.Remove(removedItem);
idCount--;
}
public ObservableCollection<ChatListItemViewModel> Items { get; }
}
public class ChatListItemViewModel : BaseViewModel
{
public string Pseudo { get; set; }
public string Message { get; set; }
public int Id { get; set; }
private bool _isDeleted;
public bool IsDeleted
{
get { return _isDeleted; }
set { _isDeleted = value; OnPropertyChanged(nameof(IsDeleted)); }
}
public ChatListItemViewModel()
{
DeleteCommand = new RelayCommand(_ => true, _ => IsDeleted = true);
}
public ICommand DeleteCommand { get; }
}
ChatTextControl.xaml:
<Button Grid.Column="1" Padding="8" VerticalAlignment="Top" Width="20" Height="20"
Background="{x:Null}" Command="{Binding DeleteCommand}" />

Passing ListView Items to Commands using Prism Library

I'm trying to execute methods based on listview items data. In addition to that, the button, which triggers the command, should only be enabled, if "CanExecute" method of the listview item returns true.
Both methods, "MyCommand" and "CanExecute", are included in my ViewModel.
Unfortunately I'm not sure how to pass the items information correctly to both methods in order to be conform with the PRISM 6 framework.
So my first approach was to do it like the following :
Model
public class MyModel
{
public string Name { get; set; }
public string Version { get; set; }
public int Identifier { get; set; }
}
ViewModel
public class MyViewModel : BindableBase
{
private ObservableCollection<MyModel> _models = new ObservableCollection<MyModel>();
public ObservableCollection<MyModel> Models
{
get { return _models; }
set { SetProperty(ref _models, value); }
}
public DelegateCommand VerifyCommand { get; set; }
public MyViewModel()
{
//Add test data
for (int i = 0; i < 5; i++)
{
MyModel model = new MyModel();
model.Name = "Random Text";
model.Version = "Random Text";
model.Identifier = i;
Models.Add(model);
}
//Doesn't work, because I don't reference to "Models"
//How to do that?
VerifyCommand = new DelegateCommand(DoCommand, CanExecute).ObservesProperty<string>(() => Name).ObservesProperty<string>(() => Version);
}
private bool CanExecute()
{
//Obviously this doesn't work, because "Version" and "Name"
//don't belong to the selected "Models" item of the listview
//What is the "bridge", to know which item of Models was clicked (button)
return !String.IsNullOrWhiteSpace(Version) && !String.IsNullOrWhiteSpace(Name);
}
private void DoCommand()
{
//Do something special
}
}
View
<ListView ItemsSource="{Binding Models}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="Auto" Margin="0,0,0,10">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Tag="VERSION" Text="{Binding Version, UpdateSourceTrigger=PropertyChanged}" />
<TextBox Grid.Row="1" Tag="NAME" Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" />
<Button Command="{Binding ElementName=root, Path=DataContext.VerifyCommand}" Content="Verify" Grid.Row="2">
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The link between View and ViewModel is done by using:
prism:ViewModelLocator.AutoWireViewModel="True"
in my View (this works).
So in summary:
How does it work, PRISM conform, to 1. Enable the items button only if CanExecute is true and 2. to execute "DoCommand" method and passing items information to that (root element of the button -> In this case the ListViewItem (MyModel).
Any help would be greatly appreciated.

Short answer: put the command in the item's viewmodel.
Long answer:
Here's an example of what I mean in the comment above. I've omitted the observability of the collections, if you really need an observable collection of models and an observable collection of view models, prepare yourself for a lot of boring two-way-sync-code...
Model:
internal class ItemModel
{
public string Name { get; set; }
public string Version { get; set; }
public int Identifier { get; set; }
}
ViewModels (one for the collection of items, that is, your MyViewModel, and one for the item):
internal class MyCollectionViewModel : BindableBase
{
private readonly List<ItemModel> _models = new List<ItemModel>();
public MyCollectionViewModel()
{
//Add test data
for (var i = 0; i < 5; i++)
_models.Add( new ItemModel
{
// to prove that CanExecute is actually evaluated...
Name = i == 3 ? "Random Text" : string.Empty,
Version = "Random Text",
Identifier = i
} );
}
public IReadOnlyCollection<ItemViewModel> TheCollection => _models.Select( x => new ItemViewModel( x ) ).ToList();
}
internal class ItemViewModel : BindableBase
{
public ItemViewModel( ItemModel item )
{
_item = item;
VerifyCommand = new DelegateCommand( () =>
{
/* Do something */
}, () => !string.IsNullOrWhiteSpace( Version ) && !string.IsNullOrWhiteSpace( Name ) );
}
public string Name => _item.Name;
public string Version => _item.Version;
public int Identifier => _item.Identifier;
public DelegateCommand VerifyCommand
{
get;
}
private readonly ItemModel _item;
}
View:
<ListView ItemsSource="{Binding TheCollection}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="Auto" Margin="0,0,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Text="{Binding Version, Mode=OneWay}" />
<TextBox Grid.Column="1" Text="{Binding Name, Mode=OneWay}" />
<Button Grid.Column="2" Command="{Binding VerifyCommand}" Content="Verify"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Create new object in win 8 store app

Im trying to implement a simple create-function in my win 8 app. Im trying to use the MVVM-pattern. Im trying to pass a class into my view with my view.model and then simply have a couple of textboxes that lets me create a new object. Here is the ViewModel and class:
public class CreateViewModel : ViewModelBase
{
public Place Place { get; set; }
}
public class Place
{
[PrimaryKey, AutoIncrement]
public int PlaceId { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
In an MVC-application i would have done some #Html.TextBoxFor and created a post-method.
In XAML I am not sure of how to do this.
The viewmodel gets passed in to view as it should. I can acess its properties like this:
<TextBox Grid.Row="0" Text="{Binding Path=Place.Title}"/>
<TextBox Grid.Row="0" Text="{Binding Path=Place.Description}"/>
But i do not understand how I can "post" new values back to the ViewModel and create a new object?
EDIT:
From what I can see this is a way to have commands in my ViewModel:
public class CreateViewModel : ViewModelBase
{
public RelayCommand CreatePlaceCommand
{
get;
private set;
}
public Place Place { get; set; }
public CreateViewModel()
{
InitializeCommands();
}
private void InitializeCommands()
{
CreatePlaceCommand =
new RelayCommand(() =>
{
//What goes here?
});
}
}
I also added this code to my XAML:
<TextBox Grid.Row="0" Text="{Binding Place.Title,Mode=TwoWay}"/>
<TextBox Grid.Row="0" Text="{Binding Place.Description,Mode=TwoWay}"/>
<Button Grid.Row="0" Content="Click"
Command="{Binding CreatePlaceCommand}" >
</Button>
Am I on the right track here? Its pretty confusing =)

Here, study this simple example to get hold of MVVM/DataBinding/Commands. It's really simplistic but it should show the "patterns" to use. There's plenty of libs (like MVVMLight) to make commanding etc. simpler and more powerful.
So assuming we have Place entity
public class Place
{
public int Id { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public override string ToString()
{
return string.Format("Id={0},Title={1},Description={2}",
Id, Title, Description);
}
}
And you have MainWindow.xaml in your application named wpfApplication1
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpfApplication1="clr-namespace:WpfApplication1"
Title="MainWindow"
Height="116"
Width="250">
<!-- set datacontext to mainviewmodel -->
<Window.DataContext>
<wpfApplication1:MainViewModel />
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<!-- input textboxes for title and description -->
<StackPanel Grid.Row="0">
<TextBox Text="{Binding Place.Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Height="25" />
<TextBox Text="{Binding Place.Description, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Height="25" />
</StackPanel>
<!-- button bound to save command, declared in viewmodel -->
<Button Grid.Row="1" Content="Save" Command="{Binding SaveCommand}" />
</Grid>
</Window>
Related MainWindows.xaml.cs contains nothing but InitializeComponents().
Now your MainViewModel, "taking care of all things", could look like
public class MainViewModel
{
private Place _place;
public MainViewModel()
{
// create and register new save command
SaveCommand = new SaveCommand(this);
CommandManager.RegisterClassCommandBinding(
typeof(MainViewModel), new CommandBinding(SaveCommand));
}
// property to hold place data, exposed in UI
public Place Place
{
get { return _place ?? (_place = new Place()); }
set { _place = value; }
}
public ICommand SaveCommand { get; private set; }
}
And simplistic save command implementation used in viewmodel
public class SaveCommand : ICommand
{
public event EventHandler CanExecuteChanged;
private readonly MainViewModel _context;
public SaveCommand(MainViewModel context)
{
_context = context;
}
public void Execute(object parameter)
{
Console.WriteLine(string.Format("Do something with {0}", _context.Place));
}
public bool CanExecute(object parameter)
{
return true;
}
}
Now, this would give you UI, something like below (this example is not type of Store app)
And clicking a button would then spit out
Do something with Id=0,Title=Title,Description=and teh description