I have an icon on my Xamarin.Forms app, which when it is clicked, I would like to change it to an activity indicator. It looks as though I should use a Trigger, Event Triggers look good, but as my image is declared in XAML, I am not sure quite how it would fit together?
At the moment, I have this in XAML at the bottom of a stacklayout:
<Button x:Name="NewDeviceButton"
Image="glyphish_31_circle_x.png"
HorizontalOptions="End"
VerticalOptions="EndAndExpand" />
When it is clicked, I would like to show this, for a set amount of time, then trigger some C# functionality:
<ActivityIndicator Color="Black" IsRunning="true" />
I am not sure whether it would be best to configure it all in XAML with a trigger, or if i can just have a placeholder type item in XAML and then have all the definitions in C#?
There are a few ways of doing this.
You could simply give each of them an x:Name and then turn on/off IsRunning and IsVisible if you want to hide it.
I assume though that you have some data binding going on. Since IsRunning is a bool you could simply bind it to a boolean in your code behind. For instance In my ViewModel I have an IsBusy property and implement INotifyPropertyChanged:
public class MyViewModel : INotifyPropertyChanged
{
public MyViewModel()
{
}
private bool busy = false;
public bool IsBusy
{
get { return busy; }
set
{
if (busy == value)
return;
busy = value;
OnPropertyChanged("IsBusy");
}
}
public async Task GetMonkeysAsync()
{
if (IsBusy)
return;
try
{
IsBusy = true;
//do stuff here that is going to take a while
}
finally
{
IsBusy = false;
}
}
#region INotifyPropertyChanged implementation
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
var changed = PropertyChanged;
if (changed == null)
return;
changed(this, new PropertyChangedEventArgs(name));
}
#endregion
}
Then in the XAML you can bind to IsBusy:
<ActivityIndicator IsRunning="{Binding IsBusy}"
Color="Blue"/>
I think that should handle it. If you need a timer you could use the same binding that I have here and use Xamarin.Forms built in timer class.
James' answer is correct, however, I prefer to use the page's own IsBusy property, for two reasons:
I'm lazy and I don't want to set-up INotifyPropertyChanged implementation if I don't have to
XF is suppossed to use that property to display a notification by default. This doesn't appear to be working, but if it ever does, this approach will already have us covered to take advantage of it
The only difference with James' answer (besides deleting the INPC implementation) is that you need to give the page a name (x:Name="myPage") and then declare the binding using a reference to it using {Binding Source={x:Reference myPage}, Path=IsBusy} for the ActivityIndicator's IsVisible and IsRunning values.
i.e.:
MainPage.xaml:
<ContentPage ... x:Name="myPage">
...
<ActivityIndicator IsVisible="{Binding Source={x:Reference myPage}, Path=IsBusy}" IsRunning="{Binding Source={x:Reference myPage}, Path=IsBusy}" />
...
</ContentPage>
MainPage.xaml.cs:
...
async void OnDoSomethingLong(...)
{
if (!this.IsBusy)
{
try
{
this.IsBusy = true;
//await long operation here, i.e.:
await Task.Run(() => {/*your long code*/});
}
finally
{
this.IsBusy = false;
}
}
}
...
Related
I was learning on some stuff on universal windows app when i came across this problem:
i want to build a splitview menu with a hamburger button without code behind.
so i setup a viewmodel with a property and a command for changing the value of that property. to check if the commmand is fired i included a small messagedialog.
i bound the splitview IsPaneOpen to my viewmodel but somehow it does not seem to work.
xaml code
<Page.Resources>
<vm:PaneViewModel x:Key="viewModel"/>
</Page.Resources>
<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" DataContext="{StaticResource viewModel}" >
<Button Content="Test" Command="{Binding Path=OpenPane, Mode=TwoWay}" ManipulationMode="All"/>
<SplitView DisplayMode="CompactInline"
x:Name="Splitview"
OpenPaneLength="150"
CompactPaneLength="20"
IsPaneOpen="{Binding IsPaneOpen, Mode=TwoWay}">
<SplitView.Pane>
<StackPanel Height="400">
<Button Height="40">
<TextBlock Text="Testbutton" Width="100"/>
</Button>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<TextBlock Margin="30" Text="{Binding ShowAnything, Mode=TwoWay}"/>
</SplitView.Content>
</SplitView>
</StackPanel>
ViewModel Code
internal class PaneViewModel
{
public PaneViewModel()
{
OpenPane = new OpenPaneCommand(this);
}
private bool isPaneOpen = true;
public bool IsPaneOpen
{
get
{
return isPaneOpen;
}
set
{
isPaneOpen = value;
}
}
public string ShowAnything { get { return isPaneOpen.ToString(); } }
public OpenPaneCommand OpenPane { get; set; }
public void OpenPaneMethod()
{
if (isPaneOpen == false)
isPaneOpen = true;
else
isPaneOpen = false;
}
}
and Command Code
internal class OpenPaneCommand : ICommand
{
public OpenPaneCommand(PaneViewModel ViewModel)
{
this.viewModel = ViewModel;
}
private PaneViewModel viewModel;
public event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter)
{
return true;
}
public void Execute(object parameter)
{
Blub();
viewModel.OpenPaneMethod();
}
async private void Blub()
{
var dialog = new MessageDialog("Testausgabe");
await dialog.ShowAsync();
}
like i said - the messagedialog shows up, but neither the textblock in the splitview.content or ispaneopen seems to change. debuging shows me that my method to change the value does indeed change the value.
so i was wondering if my binding or datacontext-setting was off.
Maybe you guys got an hint for me where my missunderstanding comes from.
thanks!
meq
Your binding isn't working because the View isn't notified of change on your ViewModel. Your VM needs to implement INotifyPropertyChanged interface and raise the PropertyChanged event whenever your property changes.
So typically you would put something like this to your setter:
...
set
{
isPaneOpen = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("IsPaneOpen");
}
...
I think your view model should inherit the ObservableObject.
and further all properties should be update like below:
public bool IsPaneOpen
{
get { return isPaneOpen; }
set
{
this.Set<bool>(ref this._loisPaneOpendedPendingCount, value);
}
}
same for ShowAnything property
I feel bad posting this because I see a ton of similar posts, but after going through them all I can't quite diagnose my issue still. What I have is a WPF app designed with the MVVM pattern and using a RelayCommand() implementation for commands.
In my user control's XAML I set the data context here :
<UserControl.DataContext>
<viewModel:SidePanelViewModel />
</UserControl.DataContext>
Then further down in the XAML I have this snippet where I assign a button's command
<TextBlock FontWeight="Bold" Margin="0,0,0,10">Service List</TextBlock>
<ListBox MaxHeight="100"
ItemsSource="{Binding ServiceList}"
SelectedItem="{Binding ServiceToRemove}">
</ListBox>
<Button HorizontalAlignment="Left" Width="60" Margin="0,10"
Command="{Binding RemoveServiceCommand}">Remove</Button>
I am binding the button to the Command RemoveApplicationCommand which I define in the SidePanelViewModel here :
public ICommand RemoveServiceCommand
{
get { return new RelayCommand(RemoveService, CanRemoveService); }
}
private void RemoveService()
{
ServerList.Remove(ServiceToRemove);
}
private bool CanRemoveService()
{
return true;
}
The problem
If I debug, the getter for RemoveServiceCommand will be reached when the button starts up, but when I click the button the code doesn't reach it. I had a very similar implementation (or so I think) working before, so this is really puzzling me. How can I get the command to fire on click?
Command="{Binding RemoveApplicationCommand}"
Did you mean RemoveServiceCommand?
Turns out the debugger was going over RemoveService the entire time but I had not put a breakpoint there. I had a wrong name in my RemoveService implementation ServerList.Remove() should have been ServiceList.Remove(). I assumed the debugger would hit a breakpoint in the RemoveServiceCommand property's getter but it turns out it doesn't hit that when you click the button.
You're returning a new RelayCommand in your getting, but not saving / caching the instance. Save it in a member variable.
if (_cmd == null)
_cmd = new ....
return _cmd;
Try implementing like this
private ICommand finishCommand;
public ICommand FinishCommand
{
get
{
if (this.finishCommand == null)
{
this.finishCommand = new RelayCommand<object>(this.ExecuteFinishCommand, this.CanExecutFinishCommand);
}
return this.finishCommand;
}
}
private void ExecuteFinishCommand(object obj)
{
}
private bool CanExecutFinishCommand(object obj)
{
return true;
}
In this code:
<ListBox
x:Name="DataList1"
xmlns:local="clr-namespace:xaml_binding_commands"
>
<ListBox.Resources>
<local:CommandUp x:Key="CommandUp1"></local:CommandUp>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox
Text="{Binding Height,Mode=TwoWay,StringFormat=00\{0:d\}}"
InputScope="Number"/>
<RepeatButton
Content="+"
Command="{StaticResource CommandUp1}"
CommandParameter="{Binding }"
/>
<TextBox
Text="{Binding Weight,Mode=TwoWay}"
InputScope="Number"/>
<RepeatButton
Content="+"
Command="{StaticResource CommandUp1}"
CommandParameter="{Binding Weight}"
/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And this
namespace xaml_binding_commands
{
public class CommandUp : ICommand
{
public bool CanExecute(object parameter)
{
return true;
}
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
if (parameter is Entry)
{
Entry EntryToUp = (Entry)parameter;
EntryToUp.Height +=1; // no worky, which field to increment?!
}
if (parameter is Int32)
{
Int32 EntryFieldToUp = (Int32)parameter;
EntryFieldToUp += 1; // no worky
}
}
}
public class Entry : INotifyPropertyChanged
{
private Int32 _Height;
public Int32 Height
{
get { return _Height; }
set { _Height = value; PropChange("Height"); }
}
private Int32 _Weight;
public Int32 Weight
{
get { return _Weight; }
set { _Weight = value; PropChange("Weight"); }
}
private void PropChange(String PropName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(PropName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
this.Loaded += MainPage_Loaded;
}
private ObservableCollection<Entry> _People = new ObservableCollection<Entry>();
public ObservableCollection<Entry> People
{
get { return _People; }
set { _People = value; }
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
DataList1.ItemsSource = People;
People.Add( new Entry() { Height=67, Weight=118 } );
}
}
}
Can I pass the field that the textbox is bound to by reference? If I pass the entire class, an Entry, to the CommandParameter so it can operate and increment, I have no way of knowing which set of TextBoxes and Buttons caused the Command.Execute. If I pass the same thing that the TextBox is bound to, namely, individually: Weight,Height then the Command.Execute has no way of affecting the input. Usually I would PassByReference and my Int32 would be boxed, and my general operate function could operate on the by-ref parameter. Can I do this somehow in XAML?
If I was doing this, I would use MVVM Light and RelayCommand<string>. This means that you can pass in one (or more) parameters in as part of the binding to the ICommand.
This means that you could have multiple bindings to a single event handler attached to a button, and each binding could have a different parameter that let you know where it came from.
Update 1
MVVM Light is an MVVM library that is compatible with pretty much everything, from standard WPF to Windows 8.1 to Windows phone. See http://www.mvvmlight.net/. It is probably the most popular MVVM lib according to NuGet download stats, and the one that I tend to prefer.
For an example of how to use MVVM light with a CommandParameter, see the top voted answer at MVVM Light RelayCommand Parameters.
For an example of how to pass in two or more parameters to a RelayCommand, see How to Passing multiple parameters RelayCommand?
Update 2
Just looking at your code, I would use MVVM. I generally prefer MVVM to code behind (this is a whole discussion in itself). If you put all of your data in the ViewModel, and used bindings to let your XAML View update the ViewModel, I think things would become a lot easier to develop and maintain.
I'm trying to open a Popup with a button and have implemented a basic ICommand. The button is binded to the ICommand OpenPopupCommand while the Popup IsOpen attribute is binded to the "IsOpen" OnPropertyChanged. My thought process was to bind the Popup.IsOpen attribute to the ICommand as well to have IT trigger the OnPropertyChange but couldn't get it to work. I think I'm close but can't figure it out. Here is the code I have so far:
#region ICommand Members
private ICommand _openPopupCommand;
public ICommand OpenPopupCommand
{
get
{
if (_openPopupCommand == null)
_openPopupCommand = new RelayCommand(param => OpenPopupExecute(param));
return _openPopupCommand;
}
set
{
_openPopupCommand = value;
}
}
#endregion
#region Methods
public void OpenPopupExecute(object parameter)
{
parameter = true;
OnPropertyChanged("IsOpen");
}
#endregion
Button that "pops up" the Popup and the Popup XAML:
<Popup x:Name="FieldsPopup" Placement="Center" Width="400" Height="250" IsOpen="{Binding IsOpen}">
<StackPanel>
<TextBlock Background="LightBlue" HorizontalAlignment="Center" VerticalAlignment="Center" Height="250" Width="350" TextAlignment="Center" >This is a popup</TextBlock>
</StackPanel>
</Popup>
<Button Name="button_PatientIdentifierList" Width="23" Height="23" Grid.Column="2" Foreground="Black" Background="#FFCDCDCD" BorderBrush="#FF707070" Margin="3.4,4,4,0" VerticalAlignment="Top" Command="{Binding OpenPopupCommand}"/>
You're raising the PropertyChange notification, but I don't see you actually changing the property anywhere.
Unless I'm mistaken, this code here takes the CommandParameter (called parameter here) and sets it to true
public void OpenPopupExecute(object parameter)
{
parameter = true;
OnPropertyChanged("IsOpen");
}
However in your XAML the Button.CommandParameter isn't bound to anything
<Button Command="{Binding OpenPopupCommand}"/>
So I suspect that parameter is just null, and is not actually doing anything here.
What you seem to be missing is the actual IsOpen property definition, and setting it to true in your command's Execute code :
private bool _isOpen;
public bool IsOpen
{
get
{
return _isOpen;
}
set
{
_isOpen = value;
OnPropertyChanged("IsOpen");
}
}
public void OpenPopupExecute(object parameter)
{
IsOpen = true; // Will call OnPropertyChanged in setter
}
As a side note, I really don't like WPF's default PopupControl, and have a custom UserControl version of it on my blog if you ever decide you hate WPF's default PopupControl too :)
I am trying to bind a ViewModel property of type Visibility to the visibility property on a Dock Panel:
Updated ViewModel Code:
public class SelectWaferButtonViewModel : INotifyPropertyChanged
{
private bool isClicked;
public SelectWaferButtonViewModel()
{
isClicked = false;
}
public bool IsControlVisible
{
get
{
return isClicked;
}
set
{
isClicked = value;
OnPropertyChanged("IsControlVisible");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnButtonClick()
{
if (isClicked)
{
IsControlVisible = false;
}
else
{
IsControlVisible = true;
}
}
protected virtual void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
and here is my updated XAML code:
<DockPanel
Name="tvwDockPanel"
Width="200"
Visibility="{Binding IsControlVisible, FallbackValue=Collapsed, Converter={StaticResource BoolToVisConverter}}"
DockPanel.Dock="Left">
<DockPanel
DockPanel.Dock="Top"
Height="22">
</DockPanel>
and I set the data context in the code behind with this line:
tvwDockPanel.DataContext = btnSelectWaferViewModel;
where btnSelectWaferViewModel is the ViewModel object for this situation.
and for fun, here is my code behind:
public partial class WaferTrackerWindow : Window
{
List<ISubscribeEvents> subscriptionList;
SelectWaferButtonViewModel btnSelectWaferViewModel;
public WaferTrackerWindow()
{
InitializeComponent();
this.InstantiateObjects();
this.SubscribeEvents();
this.SetDataContexts();
}
#region Methods
private void SetDataContexts()
{
tvwDockPanel.DataContext = btnSelectWaferViewModel.IsControlVisible;
}
private void SubscribeEvents()
{
foreach (ISubscribeEvents subscriber in subscriptionList)
{
subscriber.SubscribeEvents();
}
}
private void InstantiateObjects()
{
btnSelectWaferViewModel = new SelectWaferButtonViewModel();
subscriptionList = new List<ISubscribeEvents>();
subscriptionList.Add(
new Classes.WaferTrackerWindow.SelectWaferButtonView(btnSelectWafer, btnSelectWaferViewModel));
}
#endregion
}
All I want to do click the button btnSelectWafer and have the tvwDockPanel's visibility property to get to set to Visible via binding. Then when you click again on btnSelectWafer, tvwDockPanel's visibility property gets set back to Collapsed again. tvwDockPanel's visibility will only ever be either Collapsed or Visible.
Any help would be awesome, I am rather new to this whole data binding concept.
You have several issues here:
First of all, the intent of MVVM (if you're trying to do this with MVVM) is to separate logic from presentation. This means that in no way your ViewModel can have a reference to System.Windows.Controls.Button, nor to System.Windows.Visibility, nor to any other classes inside the System.Windows Namespace.
It is not clear to me what your SelectWaferButtonViewModel class is doing with the Button, but you need to remove the Button from there.
Also, If you need to manipulate the Visibility of a control from the ViewModel layer, you'd better use a Boolean property and the BooleanToVisibilityConverter in XAML:
ViewModel:
public bool IsControlVisible {get;set;} //Don't forget INotifyPropertyChanged!!
XAML:
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisConverter"/>
</Window.Resources>
<DockPanel Visibility="{Binding IsControlVisible, Converter={StaticResource BoolToVisConverter}}"/>
The problem is that you're binding your DockPanel to the boolean property of your view model, and then setting the Visiblity property of your UI element to the IsControlVisible property of the datacontext (which doesn't exist).
Change to:
private void SetDataContexts()
{
tvwDockPanel.DataContext = btnSelectWaferViewModel;
}