MVVM - View loading and eventhandling - windows-phone-7

In my windows phone app, I need to track some events to get a good flow. But I'm not sure how to handle them in good sequence.
What needs to be done at startup of the app:
Main view is loaded and corresponding view model instantiated
In the constructor of the view model I initiate a login sequence that signals when completed with an eventhandler
Now when the login sequence has finished AND the view is completely loaded I need to startup another sequence.
But here is the problem, the order of these 2 events 'completing' is not always the same...
I've use the EventToCommand from MVVMLight to signal the view model that the view has 'loaded'.
Any thoughts on how to synchronize this.

As you should not use wait handles or something similar on the UI thread. You will have to sync the two method using flags in your view model and check them before progressing.
So, implement two boolean properties in your view model. Now when the login dialog is finished set one of the properties (lets call it IsLoggedIn) to true, and when the initialization sequence is finished you set the other property (how about IsInitialized) to true. The trick now lies in the implementation of the setter of these two properties:
#region [IsInitialized]
public const string IsInitializedPropertyName = "IsInitialized";
private bool _isInitialized = false;
public bool IsInitialized {
get {
return _isInitialized;
}
set {
if (_isInitialized == value)
return;
var oldValue = _isInitialized;
_isInitialized = value;
RaisePropertyChanged(IsInitializedPropertyName);
InitializationComplete();
}
}
#endregion
#region [IsLoggedIn]
public const string IsLoggedInPropertyName = "IsLoggedIn";
private bool _isLoggedIn = false;
public bool IsLoggedIn {
get {
return _isLoggedIn;
}
set {
if (_isLoggedIn == value)
return;
var oldValue = _isLoggedIn;
_isLoggedIn = value;
RaisePropertyChanged(IsLoggedInPropertyName);
InitializationComplete();
}
}
#endregion
public void InitializationComplete() {
if (!(this.IsInitialized && this.IsLoggedIn))
return;
// put your code here
}
Alternatively you can remove the InitializationComplete from the setters and change InitializationComplete to:
public void InitializationComplete() {
// put your code here
}
Then subscribe to the 'PropertyChanged' event use the following implementation:
private void Class1_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) {
if (e.PropertyName == IsInitializedPropertyName || e.PropertyName == IsLoggedInPropertyName) {
if (this.IsInitialized && this.IsLoggedIn)
InitializationComplete();
}
}

Related

Intercepting property changes with CommunityToolKit.Mvvm amd Xamarin Forms

I've been moving code from mvvmlight to the CommunityToolkit.Mvvm framework with my Xamarin Forms project and have hit a snag.
In mvvmlight, I would have a property like this
bool loginOK;
public bool LoginOK
{
get => loginOK;
set => Set(()=>LoginOK, ref loginOK, value, true);
}
in CommunityToolkit.Mvvm, this becomes
bool loginOK;
public bool LoginOK
{
get => loginOK;
set => SetProperty(ref loginOK, value);
}
Accorrding to the docs, if the property changes, the PropertyChanging event is fired
In my code behind in (in Xam.Forms), I have this
protected override void OnAppearing()
{
base.OnAppearing();
ViewModel.PropertyChanged += ObservableObject_PropertyChanged;
}
async void ObservableObject_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
switch (e.PropertyName)
{
case "LoginOK":
if (ViewModel.LoginOK)
{
if (ViewModel.SkipWelcome)
{
var d1 = await image.ScaleTo(4, 500);
if (!d1)
{
Device.StartTimer(TimeSpan.FromMilliseconds(500), () =>
{
Device.BeginInvokeOnMainThread(async () => await Shell.Current.GoToAsync("//TabBar"));
return false;
});
}
}
}
else
{
var d2 = await image.ScaleTo(8, 500);
if (!d2)
{
var d3 = await image.ScaleTo(0, 500);
if (!d3)
{
Device.StartTimer(TimeSpan.FromMilliseconds(500), () =>
{
Device.BeginInvokeOnMainThread(async () => await Shell.Current.GoToAsync("//Welcome"));
return false;
});
}
}
}
break;
}
}
When I run this and set a break point on the line
var d2 = await image.ScaleTo(8,500);
The break is not hit, but the imge shows
Am I doing something wrong to intercept the property changing or is there something I'm missing from the docs?
The main issue you are seeing is because loginOK defaults to false and when a login attempt fails LoginOK does not technically change and therefore SetProperty does not result in raising the PropertyChanged event. If you look at the codebase for the toolkit you will notice that they always check whether the value has changed before raising any notifications.
There are a number of options that you could consider to work around this problem:
1 - switch to bool?
If you switch to using a nullable bool then it's value will default to null and therefore when a login attempt fails false will cause PropertyChanged to fire.
2 - use an enum
Similar to the bool? approach in point 1 but instead use something like a LoginResult enum like the following:
public enum LoginResult
{
None = 0,
Failed,
Success
}
This will make you code much more readable than point 1.
3 - fire a specific event
Rather than rely on PropertyChanged you could create your own event (e.g. LoginAttempted) you could then keep your bool indicating success or not if you so desired.
4 - make use of a Command
Events are sometimes consider a bad concept of the past so you could instead create an ICommand property on your View and assign it to your View Model allowing the View Model to call Execute on it and pass the log result up to the view. Something like:
View
public ViewConstructor()
{
ViewModel.LoginAttemptCommand = new RelayCommand<bool>(() => OnLoginAttempted());
}
public void OnLoginAttempted(bool result)
{
// Old logic on whether login succeeded.
}
ViewModel
public ICommand LoginAttemptCommand { get; set; }
// Wherever you set LoginOK = false/true call:
LoginAttemptCommand.Execute(false); // or true if it succeeds.

doc's Attached behavior vs doc's attached property?

I want to apply some validation on the entry input, I went to the docs page of the attached behaviors
and did this:
public enum TextType { Email, Phone, }
public static class Validator
{
public static readonly BindableProperty TextTypeProperty = BindableProperty.CreateAttached(
"TextType", typeof(TextType), typeof(Validator), TextType.Email, propertyChanged: ValidateText);
public static TextType GetTextType(BindableObject view)
{
return (TextType)view.GetValue(TextTypeProperty);
}
public static void SetTextType(BindableObject view, TextType textType)
{
view.SetValue(TextTypeProperty, textType);
}
private static void ValidateText(BindableObject bindable, object oldValue, object newValue)
{
var entry = bindable as Entry;
entry.TextChanged += Entry_TextChanged;
}
private static void Entry_TextChanged(object sender, TextChangedEventArgs e)
{
var entry = sender as Entry;
bool isValid = false;
switch (GetTextType(sender as Entry))
{
case TextType.Email:
isValid = e.NewTextValue.Contains("#");
break;
case TextType.Phone:
isValid = Regex.IsMatch(e.NewTextValue, #"^\d+$");
break;
default:
break;
}
if (isValid)
entry.TextColor = Color.Default;
else
entry.TextColor = Color.Red;
}
}
in XAML:
<Entry beh:Validator.TextType="Email" Placeholder="Validate Email"/>
but it doesn't work, the setter nor the propertyChanged call back are never called,
also what is the difference between this "Attached behavior" and the attached property, the two pages are pretty identical
what does the logic have to do with the propertyChanged method is not called?
From this MSDN Attached Behaviors,you can see that An attached property can define a propertyChanged delegate that will be executed when the value of the property changes.
According to your code, you set TextType=TextType.Email firstly, then you also set
<Entry beh:Validator.TextType="Email" Placeholder="Validate Email"/>
Validator.TextType="Email", the attached property doesn't change, so PropertyChanged method is not call.
You can modify your code like this, then you will find the propertychanged will be called.
<Entry beh:Validator.TextType="Phone" Placeholder="Validate Email"/>
Comparing to the sample you ignore most of the logic from OnAttachBehaviorChanged in your ValidateText and it is quite necessary:
static void OnAttachBehaviorChanged (BindableObject view, object oldValue, object newValue)
{
var entry = view as Entry;
if (entry == null) {
return;
}
bool attachBehavior = (bool)newValue;
if (attachBehavior) {
entry.TextChanged += OnEntryTextChanged;
} else {
entry.TextChanged -= OnEntryTextChanged;
}
}
Considering the differences, attached properties are something that is applied to a specific control, you can apply behavior technically to any control though probably it will work only on some of them but it may work on multiple control types properly.

How to detect backspace in an Entry control when it is empty

I am using Xamarin.Forms with Android. I have a form which has 4 Entry controls for a user to enter code. I am using TextChanged event to detect user input and automatically move focus to the next control. This part works fine, i.e. as user types a digit focus automatically jumps to the next entry. However, I need to achieve the opposite, user should be able to tap backspace button and focus should move to the previous control. The problem is that TextChanged is not triggered when entry control is empty. How can I achieve this? Is there a custom renderer I can create for android to capture text input? Maybe there is a way to use 1 entry instead but I need to make it look like distinct 4 boxes.
Finally,I've found a solution for this by implementing a renderer in android.
In shared code(PCL),Create a class like this
public class CustomEntry:Entry
{
public delegate void BackspaceEventHandler(object sender, EventArgs e);
public event BackspaceEventHandler OnBackspace;
public CustomEntry()
{
}
public void OnBackspacePressed()
{
if (OnBackspace != null)
{
OnBackspace(null, null);
}
}
}
And,Then in your android project create a renderer like this:
public class CustomEntryRenderer: EntryRenderer
{
public override bool DispatchKeyEvent(KeyEvent e)
{
if (e.Action == KeyEventActions.Down)
{
if (e.KeyCode == Keycode.Del)
{
if (string.IsNullOrWhiteSpace(Control.Text))
{
var entry = (PasswordBox)Element;
entry.OnBackspacePressed();
}
}
}
return base.DispatchKeyEvent(e);
}
protected override void
OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
}
}
And then use it like this:
Entry1.OnBackspace += Entry1BackspaceEventHandler;
public void Entry1BackspaceEventHandler()
{
//things you want to do
}

Caliburn Micro Communication between ViewModels

hopefully you can help me. First of all, let me explain what my problem is.
I have two ViewModels. The first one has e.g. stored information in several textboxes.
For example
private static string _tbxCfgLogfile;
public string TbxCfgLogfile
{
get { return _tbxCfgLogfile; }
set
{
_tbxCfgLogfile = value;
NotifyOfPropertyChange(() => TbxCfgLogfile);
}
}
The other ViewModel has a Button where i want to save this data from the textboxes.
It does look like this
public bool CanBtnCfgSave
{
get
{
return (new PageConfigGeneralViewModel().TbxCfgLogfile.Length > 0 [...]);
}
}
public void BtnCfgSave()
{
new Functions.Config().SaveConfig();
}
How can i let "CanBtnCfgSave" know that the condition is met or not?
My first try was
private static string _tbxCfgLogfile;
public string TbxCfgLogfile
{
get { return _tbxCfgLogfile; }
set
{
_tbxCfgLogfile = value;
NotifyOfPropertyChange(() => TbxCfgLogfile);
NotifyOfPropertyChange(() => new ViewModels.OtherViewModel.CanBtnCfgSave);
}
}
It does not work. When i do remember right, i can get the data from each ViewModel, but i cannot set nor Notify them without any effort. Is that right? Do i have to use an "Event Aggregator" to accomplish my goal or is there an alternative easier way?
Not sure what you are doing in your viewmodels - why are you instantiating viewmodels in property accessors?
What is this line doing?
return (new PageConfigGeneralViewModel().TbxCfgLogfile.Length > 0 [...]);
I can't be sure from your setup as you haven't mentioned much about the architecture, but sincce you should have an instance of each viewmodel, there must be something conducting/managing the two (or one managing the other)
If you have one managing the other and you are implementing this via concrete references, you can just pick up the fields from the other viewmodel by accessing the properties directly, and hooking the PropertyChanged event of the child to notify the parent
class ParentViewModel : PropertyChangedBase
{
ChildViewModel childVM;
public ParentViewModel()
{
// Create child VM and hook up event...
childVM = new ChildViewModel();
childVM.PropertyChanged = ChildViewModel_PropertyChanged;
}
void ChildViewModel_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
// When any properties on the child VM change, update CanSave
NotifyOfPropertyChange(() => CanSave);
}
// Look at properties on the child VM
public bool CanSave { get { return childVM.SomeProperty != string.Empty; } }
public void Save() { // do stuff }
}
class ChildViewModel : PropertyChangedBase
{
private static string _someProperty;
public string SomeProperty
{
get { return _someProperty; }
set
{
_someProperty = value;
NotifyOfPropertyChange(() => SomeProperty);
}
}
}
Of course this is a very direct way to do it - you could just create a binding to CanSave on the child VM if that works, saving the need to create the CanSave property on the parent

Silverlight TabItem template not working correctly

In a SL4 application i need to restyle my TabItems (actually add a button in the header).
So i took the TabItem's control template from here and added the functionality i wanted.
This seems to work fine, (i could dynamically add tabitems) with one exception:
i think this posted control template is behaving somehow "arbitrary": every time the mouse hoovers over a non selected TabItem header, this gets selected WHITHOUT clicking!! (afaik this is not the default behavior: the user user has to click a header to make this tabitem the selected one).
I tried to find why it is behaving like this, with no luck!
Is there someone who can enlighten my darkness???
Thanks in advance!
Well it turns out the error was not in the control template but in the class, the style was applied to.
In detail: the class the style was applied to is the following (in it you will see my comment about the "wrong behavior"):
public class WorkspaceViewModel : TabItem
{
public WorkspaceViewModel()
{
DefaultStyleKey = typeof(WorkspaceViewModel);
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
Button closeButtonSel = base.GetTemplateChild("PART_CloseTopSelected") as Button;
Button closeButtonUnsel = base.GetTemplateChild("PART_CloseTopUnSelected") as Button;
if (closeButtonSel != null)
closeButtonSel.Click += new RoutedEventHandler(closeButtonSel_Click);
if (closeButtonUnsel != null)
closeButtonUnsel.Click += new RoutedEventHandler(closeButtonSel_Click);
//this part is causing the effect i was complaining about!
//and has to be removed
this.MouseEnter += delegate(object sender, MouseEventArgs e)
{
IsSelected = true;
};
}
void closeButtonSel_Click(object sender, RoutedEventArgs e)
{
//this is the close request method used in the CloseTabItemCommand
OnRequestClose();
}
#region CloseTabItemCommand
private RelayCommand closeTabItemCommand;
public ICommand CloseTabItemCommand
{
get
{
if (this.closeTabItemCommand == null)
this.closeTabItemCommand = new RelayCommand(p => this.OnRequestClose(), p => this.CanCloseTabItem());
return this.closeTabItemCommand;
}
}
private bool CanCloseTabItem()
{
return true;
}
public event EventHandler RequestClose;
private void OnRequestClose()
{
if (RequestClose != null)
RequestClose(this, EventArgs.Empty);
}
#endregion
}

Resources