We Keep Coding

WPF how to bind value to TextBox correclty with MVVM pattern

I am currently experimenting with WPF. I created a demo project using the Windows Template Studio for Visual Studio.
Now I want to add a textbox that should be saved automatically by the MVVM pattern. I added the following XAML to my settings page.
<TextBlock
Style="{StaticResource BodyTextStyle}"
Text="Default Page" />
<TextBox Text="{Binding DefaultPage}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<i:InvokeCommandAction Command="{Binding SetDefaultPageCommand}" CommandParameter="{Binding DefaultPage}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
In SettingsViewModel I added the following lines:
private readonly IDefaultPageService _defaultPageService;
private string _defaultPage;
public ICommand SetDefaultPageCommand => _setDefaultPageCommand ?? (_setDefaultPageCommand = new RelayCommand<string>(OnSetDefaultPage));
public string DefaultPage
{
get { return _defaultPage; }
set { Set(ref _defaultPage , value); }
}
private void OnSetDefaultPage(string defaultPage)
{
_defaultPageService.SetDefaultPage(defaultPage);
}
The service to save is implemented as:
public class DefaultPageService : IDefaultPageService
{
public DefaultPageService()
{
}
public void InitializeDefaultPage()
{
var theme = GetDefaultPage();
SetDefaultPage(theme);
}
public void SetDefaultPage(string defaultPage)
{
App.Current.Properties["DefaultPage"] = defaultPage.ToString();
}
public string GetDefaultPage()
{
if (App.Current.Properties.Contains("DefaultPage"))
{
var defaultPage = App.Current.Properties["DefaultPage"].ToString();
return defaultPage;
}
return "https://google.com";
}
}
Saving my new string works but unfortunately, my command is being called before the actual bound property has changed its value. I tried a bunch of different TextBox events already, such as KeyUp and KeyDown. The only event I found that works are LayoutUpdated but this one is being fired over and over again by the GUI, so I'm pretty sure there is a better way.
Does anybody know how I can fix this?

Add binding option
UpdateSourceTrigger=PropertyChanged
<TextBox Text="{Binding DefaultPage, UpdateSourceTrigger=PropertyChanged}"/>
And setter
You can getting value when textBox value changed.
class ViewModel
{
private string _defaultPage;
public string DefaultPage
{
get { return _DefaultPage; }
set { _DefaultPage = value; OpPropertyChanged(); DefaultPageChanged(value); }
}
private void DefaultPageChanged(string v)
{
// Service some...
}
}

The default behavior of the TextBox binding is to update the binding after the TextBox loses focus, so that is why your bound property only changes AFTER a user types and then performs any action to lost focus on the TextBox. You obviously can't use the TextChanged event because it will fire on every keystroke.
The best way to preserve your MVVM and rely on the bounding property to change first, is to get rid of your EventTrigger and your ICommand altogether, and simply take advantage of when your DefaultPage setter gets called.
In your SettingsViewModel:
private readonly IDefaultPageService _defaultPageService;
private string _defaultPage;
public string DefaultPage
{
get { return _defaultPage; }
set { Set(ref _defaultPage , value); OnSetDefaultPage(_defaultPage); }
}
private void OnSetDefaultPage(string defaultPage)
{
_defaultPageService.SetDefaultPage(defaultPage);
}

Bind a custom view to page model in xamarin forms

I am trying to create a custom view that will be used as a header in some of the pages in the application. A custom view has a button to save info, and an image to show if the info was saved, but I can also receive info from the API if the info was saved. (this is a simplified version of the scenario)
So, I have MainPage.xaml (any page that will use the custom view)
ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Messages"
xmlns:controls="clr-namespace:Messages.Controls"
x:Class="Messages.MainPage">
<StackLayout Spacing="5">
<controls:HeaderMenu x:Name="menu" HorizontalOptions="FillAndExpand" VerticalOptions="Start" SaveCommand="{Binding MyCommand}" IsControlClosed="{Binding ControlClosedValue, Mode=TwoWay}" />
.....
</StackLayout>
MainPageViewModel.cs
public class MainPageViewModel : INotifyPropertyChanged
{
public ICommand MyCommand { get; set; }
private bool _controlClosedvalue;
public bool ControlClosedValue
{
get => _controlClosedvalue;
set
{
_controlClosedvalue = value;
OnPropertyChanged(nameof(ControlClosedValue));
}
}
public MainPageViewModel()
{
MyCommand = new Command(MyCommandExecute);
_controlClosedvalue = false;
}
private void MyCommandExecute()
{
// do stuff
_controlClosedvalue = true; //change value to change the value of control
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
HeaderMenu.xaml
<Grid>
<Image Source="save.png" HeightRequest="25" WidthRequest="25">
<Image.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="SaveImage_OnTapped" />
</Image.GestureRecognizers>
</Image>
<Image IsVisible="{Binding IsControlClosed}" Source="check.png" HeightRequest="30" WidthRequest="30" />
HeaderMenu.xaml.cs
public partial class HeaderMenu : ContentView
{
public HeaderMenu ()
{
InitializeComponent();
imgControlClosed.BindingContext = this;
}
public static readonly BindableProperty SaveCommandProperty =
BindableProperty.Create(nameof(SaveCommand), typeof(ICommand), typeof(HeaderMenu));
public static readonly BindableProperty IsControlClosedProperty =
BindableProperty.Create(nameof(IsControlClosed), typeof(bool), typeof(HeaderMenu), false, BindingMode.TwoWay, null, ControlClosed_OnPropertyChanged);
public ICommand SaveCommand
{
get => (ICommand) GetValue(SaveCommandProperty);
set => SetValue(SaveCommandProperty, value);
}
public bool IsControlClosed
{
get => (bool) GetValue(IsControlClosedProperty);
set => SetValue(IsControlClosedProperty, value);
}
private static void ControlClosed_OnPropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
if (bindable is HeaderMenu control)
{
control.imgControlClosed.IsVisible = (bool)newValue;
}
}
private void SaveImage_OnTapped(object sender, EventArgs e)
{
if (SaveCommand != null && SaveCommand.CanExecute(null))
{
SaveCommand.Execute(null);
}
}
}
So, what I need is that when the save command is tapped to execute some code in the page that is using control, and binding of SaveCommand works as expected. But after the code is executed, or in some different cases, I wish to change the property in the page model and this should change the property on the custom view, but this does not work.
Does anyone know what is wrong with this code?
If I just put True or False when consuming control it works.
<controls:HeaderMenu x:Name="menu" HorizontalOptions="FillAndExpand" VerticalOptions="Start" SaveCommand="{Binding MyCommand}" IsControlClosed="True" />
But it does not work when binding it to the property.

I have found out what an issue was. A stupid mistake, I was setting the value of the variable instead of property.
In the main page view model, instead of
_controlClosedvalue = false; // or true
it should be
ControlClosedValue = false; // or true

Tooltip on button click while button is disabled

Have a navigation command which needs to display a tooltip on click, while disabled, so that the user knows why it's disabled. The problem I'm having is I have no idea how to pass the TouchDown event from my xaml file to my viewmodel. Is there some way to bind this rather than creating an event in the command.xaml.cs?
Command is structured as follows. I have a single CommandButton.xaml and CommandButton.xaml.cs while everything to set up the button is handled by the VM (text, image, command executed etc) code as an example below.
<Button Focusable="True" Name="Btn1" Command="{Binding CommandToExecute}" Tag="{Binding Text}" Foreground="{x:Null}" Style="{DynamicResource ButtonStyle}" ToolTipService.ShowOnDisabled="true" TouchDown="Btn1_OnTouchDown" >
<Button.ToolTip>
<StackPanel>
<TextBlock>Test</TextBlock>
<TextBlock>Load stencil, or not your choice.</TextBlock>
</StackPanel>
</Button.ToolTip>
<shellModule:AutoGreyableImage Source="{Binding Image}" />
</Button>
As for the code behind, I have that split with the majority of the handler stuff in a base command class as follows.
public abstract class BaseCommand : BindableBase
{
protected IModuleManager ModuleManager { get; set; }
protected IRegionManager RegionManager { get; set; }
protected BaseCommand(IRegionManager regionManager, IModuleManager moduleManager, string pageName = null)
{
RegionManager = regionManager;
ModuleManager = moduleManager;
Text = GetButtonText(pageName + "_BtnTxt");
Image = (ImageSource)Application.Current.FindResource(pageName + "_BtnImg");
}
private string _text;
private ImageSource _image;
public ICommand CommandToExecute => new DelegateCommand<object>(Command, Evaluate);
protected abstract void Command(object obj);
protected virtual bool Evaluate(object obj)
{
return false;
}
public string Text
{
get { return _text; }
set { SetProperty(ref _text, value); }
}
public ImageSource Image
{
get { return _image; }
set { SetProperty(ref _image, value); }
}
protected string GetButtonText(string key)
{
string uiString;
var locExtension = new LocTextExtension
{
Key = "Resources",
ResourceIdentifierKey = key
};
locExtension.ResolveLocalizedValue(out uiString);
return uiString;
}
}
and then the command specific stuff in the viewmodel.
public class Page1CommandViewModel : BaseCommand, IPage1CommandViewModel
{
public Page1CommandViewModel(IRegionManager regionManager, IModuleManager moduleManager) : base( regionManager, moduleManager, PageNames.Page1 )
{
}
protected override void Command(object obj)
{
Task.Run(() =>
{
ModuleManager.LoadModule(ModuleNames.Page1Module);
RegionManager.RequestNavigate(RegionNames.ContentRegion, new Uri(PageNames.Page1, UriKind.Relative));
});
}
}
If anyone could point me in the right direction it'd be greatly appreciated.

Maybe instead of disabling the button, re-point the button to a different method, which would then display your error/tooltip message. (You could then pass in the string stating the reason for the inactivity in your method paramaters/variables.)
I would also advise you change the class/visual properties of the button so that it looks disabled.

After much googling, I've come up with a solution myself, thanks in part to comments others had made leading me in the right direction. Wrapped up my button in a contentControl, and instead have applied the tooltip to this.
<ContentControl MouseDown="ContentControl_MouseDown">
<ContentControl.ToolTip>
<ToolTip Placement="Mouse" Content="Testing" />
</ContentControl.ToolTip>
<Button Focusable="True" x:Name="Btn1" Command="{Binding CommandToExecute}" Tag="{Binding Text}" Foreground="{x:Null}" Style="{DynamicResource ButtonStyle}" ToolTipService.ShowOnDisabled="true">
<shellModule:AutoGreyableImage Source="{Binding Image}" />
</Button>
</ContentControl>
And on the button.xaml.cs put in events to handle timings of the button click etc.
Timer Timer { get; set; }
ToolTip toolTip { get; set; }
public CommandButton()
{
InitializeComponent();
Timer = new Timer {Interval = 3000};
Timer.Elapsed += OnTimerElapsed;
}
private void CloseToolTip()
{
if (toolTip != null)
{
toolTip.IsOpen = false;
}
}
private void OnTimerElapsed(object sender, ElapsedEventArgs e)
{
Timer.Stop();
Application.Current.Dispatcher.BeginInvoke((Action)CloseToolTip, DispatcherPriority.Send);
}
private void ContentControl_MouseDown(object sender, MouseButtonEventArgs e)
{
toolTip = ((ToolTip)((Control)sender).ToolTip);
toolTip.IsOpen = true;
Timer.Start();
}
timers taken from the following location.
https://social.msdn.microsoft.com/Forums/vstudio/en-US/9e3eb4ab-ed0f-40ad-ad47-a1fff8e0fe8d/tooltips-in-wpf-touch-applications?forum=wpf
This allows the button to be disabled, and the tooltip to still display on click. All I need to do now is wrap up the tooltip contents in a binding and disable the tooltip on hover (not required) and it's all solved.
Leaving question open for the time being however, as a better solution may present itself.

ActivityIndicator running after press the BackButton

I have a page with a list of items and when some is selected, the ActivityIndicator turns on and goes to another page, turning off. When i am in this new page and i click the BackButton on NavigationPage, i return to the page with the List of items, but the problem is that the ActivityIndicator is on (persists). How can i fix it ?
[List Page]
public partial class ResultadosBuscados : ContentPage
{
public ResultadosBuscados(IEnumerable dadosPesquisados)
{
IsBusy = false;
InitializeComponent();
BindingContext = this;
ListaBuscados.ItemsSource = dadosPesquisados;
}
public void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
IsBusy = true;
stackActivity.IsVisible = true;
Envolvido envolvSelec = (Envolvido)e.SelectedItem;
if (envolvSelec == null)
return;
IsBusy = false;
stackActivity.IsVisible = false;
this.Navigation.PushAsync(new EnvolvidoDetalhe(envolvSelec));
this.ListaBuscados.SelectedItem = null;
}
}
[part of XAML code]
<StackLayout x:Name="stackActivity" IsVisible="False" Padding="12"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<Frame Padding="50" OutlineColor="Black" HasShadow="true" AbsoluteLayout.LayoutFlags="PositionProportional" Opacity="0.8" BackgroundColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<StackLayout>
<ActivityIndicator IsRunning="{Binding IsBusy}" Color ="#F4B400"/>
<Label Text="Aguarde..." TextColor="#F4B400"/>
</StackLayout>
</Frame>
</StackLayout>

Like I said in the comment, check for anywhere that IsBusy is being set to true and not being set back to false. The bindings do not go away when the page changes and is brought back up.
Also, I found this awesome code that has worked well for me most of the time and which makes it so that you do not need to worry about setting IsBusy to false (though be warned that they are doing some fancy stuff so that it can be set in the ViewModel, you could instead add the code to a base ContentPage that all your pages derive from if you do not want to get it working in your ViewModel).
Code to make it work:
https://github.com/xamarin/Sport/blob/4abddfab1e1cb0e7d14925aa27cae7685dbd5f38/Sport.Mobile.Shared/ViewModels/BaseViewModel.cs#L138
Example of it being used:
https://github.com/xamarin/Sport/blob/04f6b99cec752a106d51566ed96231beacfd2568/Sport.Mobile.Shared/ViewModels/AvailableLeaguesViewModel.cs#L41
*Edit:
OnAppearing override example:
public partial class ResultadosBuscados : ContentPage {
public ResultadosBuscados(IEnumerable dadosPesquisados) {
IsBusy = false;
InitializeComponent();
BindingContext = this;
ListaBuscados.ItemsSource = dadosPesquisados;
}
protected override void OnAppearing() {
base.OnAppearing();
IsBusy = false;
}
}

opening the appbar in metro style apps using binding property

My main page has the appbar and it is shared across different pages. I wrote the following code to open the appbar on the click of a gridview item.
XAML
<AppBar Opened="AppBar_Opened" IsOpen="{Binding IsAppBarOpen}">
Back end
private void Clock_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
App.ViewModel.SelectedClock = (Clock)ThemeGridView.SelectedItem;
App.WorldViewModel.IsAppBarOpen = true;
}
private void ThemeGridView_ItemClick(object sender, ItemClickEventArgs e)
{
App.ViewModel.SelectedClock = (Clock)ThemeGridView.SelectedItem;
App.WorldViewModel.IsAppBarOpen = true;
}
WorldViewModel
private bool _IsAppBarOpen;
public bool IsAppBarOpen
{
get { return _IsAppBarOpen; }
set { base.SetProperty(ref _IsAppBarOpen, value); }
}
GridView XAML
<GridView
Grid.Row="1"
Grid.Column="1"
x:Name="ThemeGridView"
ItemsSource="{Binding Clocks}"
ItemTemplate="{StaticResource WorldClockTemplate}"
SelectionChanged="Clock_SelectionChanged"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="ThemeGridView_ItemClick"
>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
But the appbar is not popping up when i select the gridview item. There is no binding error so its really mysterious!

There is not way to bind IsOpen property according the msdn:
Note Binding to the IsOpen property doesn't have the expected results
because the PropertyChanged notification doesn't occur when the
property is set.

<AppBar Opened="AppBar_Opened" IsOpen="{Binding IsAppBarOpen, **Mode=TwoWay**}">

This works for me. I use MVVM Light Toolkit.
public bool AppBarIsOpen
{
get { return this._appBarIsOpen; }
set
{
if (this._appBarIsOpen == value) { return; }
this._appBarIsOpen = value;
this.RaisePropertyChanged("AppBarIsOpen"); // without INotifyPropertyChanged it doesn't work
}
}
<AppBar
IsSticky="True"
IsOpen="{Binding Path=AppBarIsOpen, Mode=TwoWay}">

Roman Weisert's answer correctly states the likely reason for it not working, although you also must make the binding two-way as Zack Weiner suggested (I'm not sure the reason for the latter since the binding is not working in the target-to-source direction anyway). The current value of AppBar.IsOpen may not be reflected by IsAppBarOpen of your view-model. When that's the case, and you try updating the value, it's possible that no PropertyChanged event is raised since you may not actually be updating a value. Instead, you may be just setting the value from false to false or from true to true. Most SetProperty method implementations do not raise the PropertyChanged event unless there is an actual change, and I presume yours is the same.
To fix the problem, consider modifying your view-model as follows:
public bool IsAppBarOpen
{
get { return _IsAppBarOpen; } //changes initiated from UI not reflected
set //not updated from UI
{
_IsAppBarOpen = value;
base.OnPropertyChanged();
}
}
bool _IsAppBarOpen;
The notable difference from your view-model's code, is that SetProperty is not called here so PropertyChanged is raised even when the backing store equals the newly introduced value. In case your base class differs, note that mine has an OnPropertyChanged method with the signature
void OnPropertyChanged( [CallerMemberName] string propertyName = null )
that serves to raise the PropertyChanged event.
I can see from your use of the code-behind, though, that you are not really following MVVM. If MVVM is not a concern to you, then you could forgo the IsAppBarOpen property altogether and just directly set AppBar.IsOpen. As someone who religiously adheres to MVVM, however, I do not recommend that you further head in that (sinful) direction.

I had the same issue and using Caliburn Micro for WinRT and with this code worked for me:
<AppBar IsOpen="{Binding AppBarsOpen}" Name="MainAppBar" Padding="10,0,10,0" AutomationProperties.Name="Bottom App Bar">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
<Button Name="ShowFlyout" Style="{StaticResource BookmarksAppBarButtonStyle}" />
</StackPanel>
<StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
<Button Style="{StaticResource SaveAppBarButtonStyle}" />
</StackPanel>
</Grid>
</AppBar>
And that's your property in ViewModel:
public bool AppBarsOpen
{
get { return _appBarsOpen; }
set
{
if (value.Equals(_appBarsOpen)) return;
_appBarsOpen = value;
NotifyOfPropertyChange(() => AppBarsOpen);
}
}

Had the same issue, solved it by adding the Closed event and updating the ViewModel from the code behind. Saw no other way since TwoWay binding was not working as Roman pointed out.
XAML
<AppBar x:Name="BottomAppBar1"
AutomationProperties.Name="Bottom App Bar"
Closed="BottomAppBar1_Closed"
IsOpen="{Binding IsOpen, Mode=TwoWay}"
IsSticky="True">
C# Code behind
private void BottomAppBar1_Closed(object sender, object e)
{
MainViewModel vm = this.DataContext as MainViewModel;
vm.IsOpen = false;
}
C# MainViewModel
public const string IsOpenPropertyName = "IsOpen";
private bool isOpen = false;
/// <summary>
/// Sets and gets the IsOpen property.
/// Changes to that property's value raise the PropertyChanged event.
/// </summary>
public bool IsOpen
{
get
{
return isOpen;
}
set
{
RaisePropertyChanging(IsOpenPropertyName);
isOpen = value;
RaisePropertyChanged(IsOpenPropertyName);
}
}

You should bind both IsOpen and IsSticky two way because otherwise you will get problems with for example having to tap two time to unselect an item (once to close the app bar and once for unselecting) and also it's the will help having your app bar behave more standarly (will prevent the app bar to pop down on tap when an item is selected).
To show the app bar you will need to do the following (the order is important):
this.IsAppBarSticky = true;
this.IsAppBarOpen = true;
and to hide it, do the following:
this.IsAppBarSticky = false;
this.IsAppBarOpen = false;

Another way to make this work without having to use a codebehind handler for app bar closed event:
public class AppBarClosedCommand
{
public static readonly DependencyProperty CommandProperty = DependencyProperty.RegisterAttached("Command", typeof(ICommand),
typeof(AppBarClosedCommand), new PropertyMetadata(null, CommandPropertyChanged));
public static void SetCommand(DependencyObject attached, ICommand value)
{
attached.SetValue(CommandProperty, value);
}
public static ICommand GetCommand(DependencyObject attached)
{
return (ICommand)attached.GetValue(CommandProperty);
}
private static void CommandPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
// Attach click handler
(d as AppBar).Closed += AppBar_onClose;
}
private static void AppBar_onClose(object sender, object e)
{
// Get GridView
var appBar = (sender as AppBar);
// Get command
ICommand command = GetCommand(appBar);
// Execute command
command.Execute(e);
}
}
then in the XAML you can use it like :
common:AppBarClosedCommand.Command="{Binding AppBarClosedCommand}"
with the command function looking like:
public void OnAppBarClosed()
{
AppBarOpen = false;
}