I have this form in my Xamarin.Forms application where I have two buttons, that are both meant to update a boolean value. Depending on whether that value is true or false, I want only one of the buttons to be enabled. Think of them as a "door": one button sets the "exit" boolean to true and the other to "false". So when the "enter" button is clicked I want it to be disabled until the user "exits" by clicking the "exit" button.
CanExecute/ChangeCanExecute should be the way to go here, at least by my own knowledge - and that's what I've tried.
But it doesn't seem to be working, even when I abstract that functionality on a simpler content page.
I have attached a sample of my ViewModel's code, simplified for clarity.
I can't understand why I'm stumped by something that is so simple outside of MVVM conventions.
public bool _hasWorkerExit;
public bool hasWorkerExit
{
get { return _hasWorkerExit; }
set
{
_hasWorkerExit = value;
OnPropertyChanged();
EnterCommand?.ChangeCanExecute();
ExitCommand?.ChangeCanExecute();
}
}
public Command EnterCommand => new Command(SendWorkerEntry,WorkerCanEnter());
public Command ExitCommand => new Command(SendWorkerExit,WorkerCanExit());
private Func<bool> WorkerCanEnter()
{
return new Func<bool>(() => hasWorkerExit);
}
private Func<bool> WorkerCanExit()
{
return new Func<bool>(() => !hasWorkerExit);
}
private void SendWorkerEntry()
{
// Do the work you're meant to do
hasWorkerExit = false;
}
private void SendWorkerExit()
{
// Do the work you're meant to do
hasWorkerExit = true;
}
Here's the .xaml code for the buttons
<dxe:SimpleButton Grid.Column="0"
FontSize="13"
Text="Enter"
BorderThickness="0"
BackgroundColor="{StaticResource ButtonColour}"
PressedBackgroundColor="{StaticResource PressedButtonColour}"
TextColor="{StaticResource ButtonTextColour}"
PressedTextColor="{StaticResource ButtonTextColour}"
DisabledBackgroundColor="{StaticResource DisabledButtonColour}"
CornerRadius="0"
CornerMode="Round"
Command="{Binding EnterCommand}"></dxe:SimpleButton>
<dxe:SimpleButton Grid.Column="1"
FontSize="13"
Text="Exit"
BorderThickness="0"
BackgroundColor="{StaticResource ButtonColour}"
PressedBackgroundColor="{StaticResource PressedButtonColour}"
TextColor="{StaticResource ButtonTextColour}"
PressedTextColor="{StaticResource ButtonTextColour}"
DisabledBackgroundColor="{StaticResource DisabledButtonColour}"
CornerRadius="0"
CornerMode="Round"
Command="{Binding ExitCommand}"></dxe:SimpleButton>
You can try:
Button 1:
IsEnabled="{Binding HasWorkerExit}"
Button 2:
IsEnabled="{Binding HasWorkerExit, Converter={Helpers:InverseBoolConverter}}"}"
One property alone should solve your problem.
public bool _hasWorkerExit;
public bool HasWorkerExit
{
get { return _hasWorkerExit; }
set
{
_hasWorkerExit = !_hasWorkerExit;
OnPropertyChanged();
}
}
Invert Helper code:
public class InverseBoolConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return !((bool)value);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
//throw new NotImplementedException();
}
}
Try this instead of using the Func<bool>, you can use a simple method group for the Commands which should suffice:
public Command EnterCommand => new Command(SendWorkerEntry, WorkerCanEnter);
public Command ExitCommand => new Command(SendWorkerExit, WorkerCanExit);
private bool WorkerCanEnter() => hasWorkerExit;
private bool WorkerCanExit() => !hasWorkerExit;
Alternatively, this should also work:
public Command EnterCommand => new Command(SendWorkerEntry, () => hasWorkerExit);
public Command ExitCommand => new Command(SendWorkerExit, () => !hasWorkerExit);
Please be aware that CanExecute is not called multiple times, so it is not a dynamic option to use for enabling/disabling the button.(The returning value actually is always false).
Suggestion: You could use a bound value IsEnabled instead of that.
Hope it helps.
Related
I have a TextBox of which the Text property must be updated before executing the LostFocus event, because in the LostFocus event I use the values of the Text property for calculations.
Currently when entering the LostFocus event (txtTotaisNfe_LostFocus) the ThisDataContext.DescontoTotal has not yet had its value updated.
P.S: I cannot use UpdateSourceTrigger = PropertyChanged because I use a converter (PriceConverter1) in WPF that can only be executed after I have entered the complete value in the TextBox. It converts the entered value into 2 decimal cases value (that is, when running LostFocus).
The question is: Is there any way in the .NET process queue to understand that it must first run the LostFocus from UpdateSourceTrigger and then the LostFocus (txtTotaisNfe_LostFocus)?
WPF Code (DescontoTotal = ThisDataContext.Desconto):
<TextBox Text="{Binding DescontoTotal, Converter={StaticResource PriceConverter1}, Mode=TwoWay, UpdateSourceTrigger=Explicit}" LostFocus="txtTotaisNfe_LostFocus"/>
LostFocus Event Code:
private void txtTotaisNfe_LostFocus(object sender, RoutedEventArgs e)
{
//Rateia o Total de Desconto da NFe entre os Produtos.
foreach (var item in _lsProdutos)
{
item.Desconto = (ThisDataContext.DescontoTotal / ThisDataContext.TotalProdutos * item.ValorProduto).Round();
}
}
PriceConverter1 Code (Please ignore Best Practices in this):
public class PriceConverter1 : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (value != null)
{
try
{
return ((decimal)value).ToString("##,###,##0.00");
}
catch
{
return "0.00";
}
}
else
{
return "0.00";
}
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string price = value.ToString();
decimal result;
if (decimal.TryParse(price, System.Globalization.NumberStyles.Any, null, out result))
{
return result;
}
return value;
}
}
While handling a CurrentLayoutIdChangedEvent event, the backend sends back the correct data, but the setter for the model is not called and because of this, the UI won't reflect the changes.
Following the usual pattern to setting values in the getter.
The properties:
private LayoutModel _layout;
private string _layoutName;
public LayoutModel Layout
{
get { return _layout; }
set { _layout = value; NotifyOfPropertyChange(() => LayoutName); }
}
public string LayoutName
{
get { return _layout == null ? "Not set" : _layout.Name; }
set { _layoutName = value; NotifyOfPropertyChange(() => FullArea); }
}
The event:
public void Handle(CurrentLayoutIdChangedEvent message) => PopulateLayout(message.LayoutId);
The function:
private void PopulateLayout(int layoutId)
{
if (layoutId > 0)
{
try
{
_layout = _dataProvider.GetLayoutById(layoutId);
}
catch (Exception ex)
{
_logger.Error(ex, "Invalid Layout returned with '{layoutId}', exiting.", layoutId);
}
}
else
{
_logger.Error("Invalid LayoutId, aborting.");
}
}
A part of the view:
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal">
<TextBlock Text="{x:Static lang:Resources.Txt_LayoutName}" />
<TextBlock x:Name="LayoutName" Margin="10 0 0 0" />
</StackPanel>
When receiving the event the function is called and the data is loaded into the _layout, but the setter of the public property is not called, so the LayoutName won't change.
Not sure what am I missing, the initial data in the LayoutName ("Not set") is displayed properly.
Tried to introduce a new event after the dataProvider returns the data, which only calls the NotifyOfPropertyChange(() => Layout); - also not giving any errors or desired result.
Believe I understood your concern correctly The Setter of Property Layout, in which you are Notifying the property change of LayoutName is not called during PopulateLayout, because, you are assigning value to the private variable _layout. (Not the property Layout)
You need to replace following line
_layout = _dataProvider.GetLayoutById(layoutId);
with
Layout= _dataProvider.GetLayoutById(layoutId);
Or Notify the LayoutName from the PopulateLayout method
_layout = _dataProvider.GetLayoutById(layoutId);
NotifyOfPropertyChange(() => LayoutName);
My code looks like this right now with two lines of code for each message. The code works but if I have for example 30 messages that I can each give values to then I will need to have 60 lines of code just to declare everything:
string _msg1;
string _msg2;
public string Msg1 { get => _msg1; set => SetProperty(ref _msg1, value); }
public string Msg2 { get => _msg2; set => SetProperty(ref _msg2, value); }
and in C# I assign to these:
vm.Msg1 = "A";
vm.Msg2 = "B";
and in the XAML I bind my Text to Msg1 and another Text to Msg2
Can someone tell me how / if I can do this with array so that I would assign like this and hopefully so the assignment of the array can just be done in two lines instead of 2 lines for every single message:
vm.Msg[0] = "A";
vm.Msg[1] = "B";
For reference:
public class ObservableObject : INotifyPropertyChanged
{
protected virtual bool SetProperty<T>(
ref T backingStore, T value,
[CallerMemberName]string propertyName = "",
Action onChanged = null)
{
if (EqualityComparer<T>.Default.Equals(backingStore, value))
return false;
backingStore = value;
onChanged?.Invoke();
OnPropertyChanged(propertyName);
return true;
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName]string propertyName = "") =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
You can create a simple wrapper class with indexing that supports property change notification.
For example:
public class Messages : ObservableObject
{
readonly IDictionary<int, string> _messages = new Dictionary<int, string>();
[IndexerName("Item")] //not exactly needed as this is the default
public string this[int index]
{
get
{
if (_messages.ContainsKey(index))
return _messages[index];
//Uncomment this if you want exceptions for bad indexes
//#if DEBUG
// throw new IndexOutOfRangeException();
//#else
return null; //RELEASE: don't throw exception
//#endif
}
set
{
_messages[index] = value;
OnPropertyChanged("Item[" + index + "]");
}
}
}
And, create a property in view model as:
private Messages _msg;
public Messages Msg
{
get { return _msg ?? (_msg = new Messages()); }
set { SetProperty(ref _msg, value); }
}
Now you can set or update values as:
vm.Msg[0] = "A";
vm.Msg[1] = "B";
Bindings in XAML will be same as:
<Label Text="{Binding Msg[0]}" />
<Label Text="{Binding Msg[1]}" />
Sample usage code
XAML
<StackLayout Margin="20">
<Label Text="{Binding Msg[0]}" />
<Label Text="{Binding Msg[1]}" />
<Label Text="{Binding Msg[2]}" />
<Label Text="{Binding Msg[3]}" />
<Label Text="{Binding Msg[4]}" />
<Button Text="Trigger update" Command="{Binding UpdateMessage}" />
</StackLayout>
Code-behind, view-model
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var viewModel = new MainViewModel();
viewModel.Msg[0] = "Original message 1";
viewModel.Msg[1] = "Original message 2";
viewModel.Msg[2] = "Original message 3";
viewModel.Msg[3] = "Original message 4";
viewModel.Msg[4] = "Original message 5";
BindingContext = viewModel;
}
}
public class MainViewModel : ObservableObject
{
private Messages _msg;
public Messages Msg
{
get { return _msg ?? (_msg = new Messages()); }
set { SetProperty(ref _msg, value); }
}
public ICommand UpdateMessage => new Command(() =>
{
Msg[2] = "New message 3";
Msg[0] = "New message 1";
});
}
Arrays will not raise property changed event. You'll need to use an ObservableCollection that can raise an event when the collection has changed. However, this doesn't raise an event when the object inside the collection has changed it's value. You'll need to wrap your object, in this case a string, into a type that can raise property changed events.
Something like the following would work:
public class BindableValue<T> : INotifyPropertyChanged
{
private T _value;
public T Value
{ get => _value; set => SetProperty(ref _value, value); }
// INotifyPropertyChanged and SetProperty implementation goes here
}
private ObservableCollection<BindableValue<string>> _msg;
public ObservableCollection<BindableValue<string>> Msg
{ get => _msg; set => SetProperty(ref _msg1, value); }
you would be binding to Msg[0].Value, Msg[1].Value etc.,
Not entirely sure that I got the question, but as I understood the simplest way is this:
The Viewmodel:
Just bind to an ObservableCollection of strings, because it already implements INotifyCollectionChanged and INotifyPropertyChanged.
RelayCommand is just an implementation of ICommand and I'm assuming you have heard of them since you are doing WPF MVVM.
using System.Collections.ObjectModel;
namespace WpfApp1
{
public class MainWindowViewmodel
{
public ObservableCollection<string> Messages { get; set; }
public MainWindowViewmodel()
{
Messages = new ObservableCollection<string>();
Messages.Add("My message!");
ChangeMessageCommand = new RelayCommand(ChangeMessageExcecute);
}
public RelayCommand ChangeMessageCommand { get; set; }
private void ChangeMessageExcecute() => Messages[0] = "NEW message!";
}
}
The View:
In the view you can just bind your Textblocks to the Elements of the ObservableCollection. When you press the button, the Command gets called and changes the message in the window.
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<StackPanel>
<TextBlock Text="{Binding Messages[0]}" HorizontalAlignment="Center"/>
<Button Content="Change Message" Command="{Binding ChangeMessageCommand}" Width="200"/>
</StackPanel>
</Grid>
</Window>
Kind regards,
misdirection
I Assume that your given example is running and working as expected (Atleast with 2 items)
View Code.
Assuming you want to show all the 30 messages as a list.
<ListView ItemsSource="{Binding MessagesArray}"/>
Also you should set the DataContext properly, Comment below if you need any help
View Model Code.
We are using an ObservableCollection instead of array. Since pure arrays doesn't support proper binding features.
private ObservableCollection<string> _messagesArray;
public ObservableCollection<string> MessagesArray
{
get { return _messagesArray; }
set { SetProperty(ref _messagesArray, value); }
}
Assigning Values
MessagesArray = new ObservableCollection<string>();
vm.MessagesArray.Add("A");
vm.MessagesArray.Add("B");
In the assignment code MessagesArray = new ObservableCollection<string>(); assigns a new object of ObservableCollection of String
If you are new to ObservableCollection think of this as an wrapper to string[], but not actually true
SetProperty method will tell the XAML View that a new collection is arrived, so the UI will rerender the list.
When you call vm.MessagesArray.Add("B"); internal logics inside the method Add will tell the XAML View a new item is added to the ObservableCollection so the view can rerender the ListView with the new item.
Update 27 October 2018
You can create your own array using any of the below ways. (Not all)
string[] dataArray = new string[30];
1. this will create an array with 30 null values
string[] dataArray = { "A", "B", "C" }; //Go up to 30 items
2. this will create an array with predefined set of values, you can go up to 30
string[] dataArray = Enumerable.Repeat<string>(String.Empty, 30).ToArray();
3. this will create an array with string which holds empty values, Instead of String.Empty you can put any string value.
Choose any of the above method
I recommend the last method, then you can assign that into a Observable Collection like below.
MessagesArray = new ObservableCollection<string>(dataArray);
Now the trick is
vm.MessagesArray[0] = "A"
vm.MessagesArray[25] = "Z"
View might look like below
<TextBlock Text="{Binding MessagesArray[0]}"/>
<TextBlock Text="{Binding MessagesArray[1]}"/>
What about using reflection?
You can ask for all the public properties of type string with name "Msg*".
For example:
static class Program
{
static void Main(string[] args)
{
var vm = new MessagesViewModel();
PropertyInfo[] myProperties = vm.GetType()
.GetProperties(BindingFlags.Public | BindingFlags.Instance)
.Where(p => p.PropertyType == typeof(string) && p.Name.Contains("Msg"))
.ToArray();
foreach (var propertyInfo in myProperties)
{
//You can also access directly using the indexer --> myProperties[0]..
propertyInfo.SetValue(vm, $"This is {propertyInfo.Name} property");
}
Console.WriteLine(vm.Msg1);
Console.WriteLine(vm.Msg2);
}
}
public class MessagesViewModel
{
string _msg1;
string _msg2;
public string Msg1 { get => _msg1; set => _msg1 = value; }
public string Msg2 { get => _msg2; set => _msg2 = value; }
}
If this type of solution fits, you can wrap it with an indexer, sort the array to match the index and the Msg[num].
I have an username label and need to view this as uppercase but this should only relate to the UI. The data (string) should be saved in the db as actual case whatever it is. Could anyone tell me if there is anyway to convert it to uppercase without doing so through the code behind?
You can use Label.TextTransform with TextTransform.Uppercase.
XAML
<Label TextTransform="Uppercase" />
C#
var label = new Label
{
TextTransform = TextTransform.Uppercase
};
As you're aware you can do this from the code behind as such:
string data = "my data";
UILabel myLabel = new UILabel();
myLabel.Text = data.ToUpper();
So bearing in mind that you don't want to do it this way you would need to derive from UILabel and create your own, then simply add the ToUpper() onto the end of the get;set; values of the Text property.
using CoreGraphics;
using System;
using UIKit;
namespace MyApp.Controls
{
partial class Control_UpperLabel : UILabel
{
public Control_UpperLabel IntPtr handle) : base(handle)
{
//
}
public Control_UpperLabel()
{
//
}
public override void Draw(CGRect rect)
{
base.Draw(rect);
}
public override string Text { get => base.Text.ToUpper(); set => base.Text = value.ToUpper(); }
}
}
EDIT: As per comments below, here is an alternative solution for Xamarin.Forms
This uses a value converter as part of a binding solution. It's also been slightly amended to use the suggestion by clint in the comments below. Thanks.
public class StringCaseConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
switch ((parameter as string).ToUpper()[0])
{
case 'U':
return ((string)value).ToUpper();
case 'L':
return ((string)value).ToLower();
default:
return ((string)value);
};
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotSupportedException();
}
}
It would be used in the XAML as such:
Text="{Binding Text, Converter={StaticResource caseConverter}, ConverterParameter=u}}"
Or you can use Bindable property then format the text on the getter :
e.g.:
public static readonly BindableProperty ItemLabelProperty =
BindableProperty.Create(nameof(ItemLabel), typeof(string),
typeof(DetailsLineItemControl), default(string), BindingMode.OneWay);
public string ItemLabel
{
get
{
var value = (string)GetValue(ItemLabelProperty);
return !string.IsNullOrEmpty(value) ? value.ToUpper() : value;
}
set
{
SetValue(ItemLabelProperty, value);
}
}
I want to bind the selected Calender View Item and set it to
a DateTime Variable.
My CalenderView Xaml looks like:
<CalendarView Grid.Row="6" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20"/>
I have an DateTime item in the Datacontext class:
private DateTime _DueDate;
public DateTime DueDate
{
get { return this._DueDate; }
set
{
if (this._DueDate != value)
{
this._DueDate = value;
base.PropertyOnChanged("DueDate");
}
}
}
And the DateTimeConverter:
public class DateConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
DateTime date = ((DateTime)value);
return date.Day + "." + date.Month + "." + date.Year;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return DateTime.Parse((string)value);
}
}
Here is also the Doc to the Calender View:
CalenderView MSDN
In the Docs is a Property SelectedDate, but I only see in the XAML SelectedDateChanged EventHandler. But I want to do it in MVVM.
My Problem is I don´t know on which Property I can set the
Binding. I looked in the Doc but I only find the Date="" property
from the DatePicker but I don´t find anything to the CalenderView.
UPDATE
Following to the Comment from
#Juo Zuo:"CalendarView has a SelectedDates property. Usually, we can use this property to set the selected date like: MyCalendarView.SelectedDates.Add(new DateTime(2016, 5, 5));. However this property is read-only, we can't use it for binding. So, I'm afraid there is no way to set selected dates with Binding"
I would expand the Question.
My Question is:
Is there any way to use the Calender View with the MVVM Pattern from MSDN ?
All you need to do is to create an attached property and encapsulate the SelectedDates.Add logic within it.
public static class CalendarViewHelper
{
public static IList<DateTimeOffset> GetSelectedDates(DependencyObject obj)
{
return (IList<DateTimeOffset>)obj.GetValue(SelectedDatesProperty);
}
public static void SetSelectedDates(DependencyObject obj, IList<DateTimeOffset> value)
{
obj.SetValue(SelectedDatesProperty, value);
}
public static readonly DependencyProperty SelectedDatesProperty =
DependencyProperty.RegisterAttached("SelectedDates", typeof(IList<DateTimeOffset>), typeof(CalendarView),
new PropertyMetadata(null, (d, e) =>
{
var cv = d as CalendarView;
var dates = e.NewValue as IList<DateTimeOffset>;
if (cv != null && dates != null)
{
foreach (var date in dates)
{
cv.SelectedDates.Add(date);
}
}
}));
}
<CalendarView local:CalendarViewHelper.SelectedDates="{x:Bind Dates, Mode=OneWay}" />
If your Dates property has more than one items inside, make sure you change the SelectionMode to Multiple.