I'm having a bit of trouble figuring out how to correctly bind my method to the viewmodel.
Here is my current XAML:
<TextBox x:Name="Length" Style="{StaticResource LengthStyle}" Height="Auto" Width="35"
TextChanged="{Binding Validate}" Text="{Binding Length, ValidatesOnDataErrors=True, UpdateSourceTrigger=LostFocus}" />
Then in my viewmodel I have a method that looks like this:
public string Validate(Column c){
//unimportant
}
I'm just confused on how I can get this to work. Should I have a setter property that calls this? I would have just set this up as an event in the code behind but the project I'm working on prohibits that. Thanks.
Create a property like the following
private string length;
public string Length
{
get
{
return length;
}
set
{
length = value;
//do whatever you want
}
}
Include these 2 interactivity references :
1. System.Windows.Interactivity
2. Microsoft.Expression.Interactions
Then in your xaml declare this :
xmlns:interactivity="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:interactions="clr-namespace:Microsoft.Expression.Interactivity.Input;assembly=Microsoft.Expression.Interactions"
The xaml for textbox will be like :
<TextBox>
<interactivity:Interaction.Triggers>
<interactivity:EventTrigger EventName="TextChanged">
<behaviours:ExecuteCommandAction Command="{Binding Path=DataContext.ValidateCommand,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type UserControl}}}"
CommandParameter="PassTheColumnHere"/>
</interactivity:EventTrigger>
</interactivity:Interaction.Triggers>
</TextBox>
You may need to make 2 changes as per your requirement:
1. Instead of Ancestortype "Usercontrol"(if your xaml is not a user control") , then give the file name.
2.Pass the command parameter, in your case the column as you are mentioning.
After that declare the command "ValidateCommand" in your view model:
public ICommand ValidateCommand{ get; private set; }
Inside the constructor initialize it:
ValidateCommand = new DelegateCommand<Column>(Validate);
and the rest logic you can implement in your method:
public void Validate(Column c){
//your logic
}
Related
An app I'm working on requires a ConverterParameter to be an enum. For this, the regular way to do would be:
{Binding whatever,
Converter={StaticResource converterName},
ConverterParameter={x:Static namespace:Enum.Value}}
However, the UWP platform x: namespace does not seem to have the Static extension.
Does anyone know if there's a solution that does not rely on x:Static for comparing an enum in binding?
This works for me in a UWP:
<Button Command="{Binding CheckWeatherCommand}">
<Button.CommandParameter>
<local:WeatherEnum>Cold</local:WeatherEnum>
<Button.CommandParameter>
</Button>
The most concise way I know of...
public enum WeatherEnum
{
Cold,
Hot
}
Define the enum value in XAML:
<local:WeatherEnum x:Key="WeatherEnumValueCold">Cold</local:WeatherEnum>
And simply use it:
"{Binding whatever, Converter={StaticResource converterName},
ConverterParameter={StaticResource WeatherEnumValueCold}}"
There is no Static Markup Extension on UWP (and WinRT platform too).
One of the possible solutions is to create class with enum values as properties and store instance of this class in the ResourceDictionary.
Example:
public enum Weather
{
Cold,
Hot
}
Here is our class with enum values:
public class WeatherEnumValues
{
public static Weather Cold
{
get
{
return Weather.Cold;
}
}
public static Weather Hot
{
get
{
return Weather.Hot;
}
}
}
In your ResourceDictionary:
<local:WeatherEnumValues x:Key="WeatherEnumValues" />
And here we are:
"{Binding whatever, Converter={StaticResource converterName},
ConverterParameter={Binding Hot, Source={StaticResource WeatherEnumValues}}}" />
This is an answer utilizing resources and without Converters:
View:
<Page
.....
xmlns:local="using:EnumNamespace"
.....
>
<Grid>
<Grid.Resources>
<local:EnumType x:Key="EnumNamedConstantKey">EnumNamedConstant</local:SettingsCats>
</Grid.Resources>
<Button Content="DoSomething" Command="{Binding DoSomethingCommand}" CommandParameter="{StaticResource EnumNamedConstantKey}" />
</Grid>
</Page>
ViewModel
public RelayCommand<EnumType> DoSomethingCommand { get; }
public SomeViewModel()
{
DoSomethingCommand = new RelayCommand<EnumType>(DoSomethingCommandAction);
}
private void DoSomethingCommandAction(EnumType _enumNameConstant)
{
// Logic
.........................
}
I'm basically asking the same question as this person, but in the context of the newer x:Bind.
ViewModels' DataContext is defined like so
<Page.DataContext>
<vm:ChapterPageViewModel x:Name="ViewModel" />
</Page.DataContext>
So whenever I need to bind something I do it explicitely to the ViewModel like so
ItemsSource="{x:Bind ViewModel.pageList, Mode=OneWay}"
However that doesn't work within templates
<FlipView ItemsSource="{x:Bind ViewModel.pageList, Mode=OneWay}">
<FlipView.ItemTemplate>
<DataTemplate x:DataType="models:Image">
<ScrollViewer SizeChanged="{x:Bind ViewModel.PageResized}"> <-- this here is the culprit
<Image Source="{x:Bind url}"/>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
Reading the documentation, I found that using Path should basically reset the context to the page, but this (x:Bind Path=ViewModel.PageResizeEvent didn't work either. I'm still getting Object reference not set to an instance of an object, which should mean that it doesn't see the method (but a null).
Image class:
public class Image {
public int page { get; set; }
public string url { get; set; }
public int width { get; set; }
public int heigth { get; set; }
}
And in the ChapterPageViewModel
private List<Image> _pageList;
public List<Image> pageList {
get { return _pageList; }
set { Set(ref _pageList, value); }
}
public override async Task OnNavigatedToAsync(object parameter, NavigationMode mode,
IDictionary<string, object> suspensionState)
{
Initialize();
await Task.CompletedTask;
}
private async void Initialize()
{
pageList = await ComicChapterGet.GetAsync(_chapterId);
}
public void PageResized(object sender, SizeChangedEventArgs e)
{
//resizing logic happens here
}
We have two problems here:
First, trying to directly bind an event to a event handler delegate
That will never work, simply put.
One way to handle an event on MVVM pattern is by using EventTrigger and ICommand.
It requires a class that implements ICommand. This post will help you if don't know how to do it. I'll call mine DelegateCommand.
Here's how I would refactor it in two steps:
1) Add a Command to the VM:
public class ChapterPageViewModel
{
public ChapterPageViewModel()
{
this.PageResizedCommand = new DelegateCommand(OnPageResized);
}
public DelegateCommand PageResizedCommand { get; }
private void OnPageResized()
{ }
}
2) Bind that Command to the SizeChanged event with EventTrigger and InvokeCommandAction.
<Page (...)
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core">
(...)
<FlipView ItemsSource="{x:Bind ViewModel.pageList, Mode=OneWay}" >
<FlipView.ItemTemplate>
<DataTemplate x:DataType="models:Image">
<ScrollViewer>
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="SizeChanged">
<core:InvokeCommandAction
Command="{x:Bind ViewModel.PageResizedCommand }" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
<Image Source="{x:Bind url}"/>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Page>
"But Gabriel", you say, "that didn't work!"
I know! And that's because of the second problem, which is trying to x:Bind a property that does not belong to the DataTemplate class
This one is closely related to this question, so I´ll borrow some info from there.
From MSDN, regarding DataTemplate and x:Bind
Inside a DataTemplate (whether used as an item template, a content
template, or a header template), the value of Path is not interpreted
in the context of the page, but in the context of the data object
being templated. So that its bindings can be validated (and efficient
code generated for them) at compile-time, a DataTemplate needs to
declare the type of its data object using x:DataType.
So, when you do <ScrollViewer SizeChanged="{x:Bind ViewModel.PageResized}">, you're actually searching for a property named ViewModel on the that models:Image class, which is the DataTemplate's x:DataType. And such a property does not exist on that class.
Here, I can see two options. Choose one of them:
Add that ViewModel as a property on the Image class, and fill it up on the VM.
public class Image {
(...)
public ChapterPageViewModel ViewModel { get; set; }
}
public class ChapterPageViewModel
{
(...)
private async void Initialize() {
pageList = await ComicChapterGet.GetAsync(_chapterId);
foreach(Image img in pageList)
img.ViewModel = this;
}
}
With only this, that previous code should work with no need to change anything else.
Drop that x:Bind and go back to good ol'Binding with ElementName.
<FlipView ItemsSource="{x:Bind ViewModel.pageList, Mode=OneWay}" x:Name="flipView">
<FlipView.ItemTemplate>
<DataTemplate x:DataType="models:Image">
<ScrollViewer>
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="SizeChanged">
<core:InvokeCommandAction
Command="{Binding DataContext.PageResizedCommand
, ElementName=flipView}" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
<Image Source="{x:Bind url}"/>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
This one kind of defeat the purpose of your question, but it does work and it's easier to pull off then the previous one.
An app I'm working on requires a ConverterParameter to be an enum. For this, the regular way to do would be:
{Binding whatever,
Converter={StaticResource converterName},
ConverterParameter={x:Static namespace:Enum.Value}}
However, the UWP platform x: namespace does not seem to have the Static extension.
Does anyone know if there's a solution that does not rely on x:Static for comparing an enum in binding?
This works for me in a UWP:
<Button Command="{Binding CheckWeatherCommand}">
<Button.CommandParameter>
<local:WeatherEnum>Cold</local:WeatherEnum>
<Button.CommandParameter>
</Button>
The most concise way I know of...
public enum WeatherEnum
{
Cold,
Hot
}
Define the enum value in XAML:
<local:WeatherEnum x:Key="WeatherEnumValueCold">Cold</local:WeatherEnum>
And simply use it:
"{Binding whatever, Converter={StaticResource converterName},
ConverterParameter={StaticResource WeatherEnumValueCold}}"
There is no Static Markup Extension on UWP (and WinRT platform too).
One of the possible solutions is to create class with enum values as properties and store instance of this class in the ResourceDictionary.
Example:
public enum Weather
{
Cold,
Hot
}
Here is our class with enum values:
public class WeatherEnumValues
{
public static Weather Cold
{
get
{
return Weather.Cold;
}
}
public static Weather Hot
{
get
{
return Weather.Hot;
}
}
}
In your ResourceDictionary:
<local:WeatherEnumValues x:Key="WeatherEnumValues" />
And here we are:
"{Binding whatever, Converter={StaticResource converterName},
ConverterParameter={Binding Hot, Source={StaticResource WeatherEnumValues}}}" />
This is an answer utilizing resources and without Converters:
View:
<Page
.....
xmlns:local="using:EnumNamespace"
.....
>
<Grid>
<Grid.Resources>
<local:EnumType x:Key="EnumNamedConstantKey">EnumNamedConstant</local:SettingsCats>
</Grid.Resources>
<Button Content="DoSomething" Command="{Binding DoSomethingCommand}" CommandParameter="{StaticResource EnumNamedConstantKey}" />
</Grid>
</Page>
ViewModel
public RelayCommand<EnumType> DoSomethingCommand { get; }
public SomeViewModel()
{
DoSomethingCommand = new RelayCommand<EnumType>(DoSomethingCommandAction);
}
private void DoSomethingCommandAction(EnumType _enumNameConstant)
{
// Logic
.........................
}
I have a longlistselector and in each row I have ToggleSwitch and I would like to call http request via my ApiService when ToggleSwitch is changed. I have ApiService class in ViewModel thanks to injection and in ViewModel I have ObservableCollection of Modules which have switches. I bind it with datatemplate and there is no problem with bind ToggleSwitch to bool property. But what should I do in setter of that property?
Model - Modul.cs
public int IsLock
{
get { return isLock; }
set {
Set(() => IsLock, ref isLock, value);
// What should I do here? How call ViewModel method?
}
}
ViewModel - ModuleListViewModel.cs
public ObservableCollection<Module> Modules { get; private set; }
// here I have apiService instance
// and here I could call apiService.Lock(module) and so on
View - part of DataTemplate
<toolkit:ToggleSwitch x:Name="LockSwitch"
IsChecked="{Binding IsLock, Mode=TwoWay}"/>
What's the right aproach for this? Maybe I could have ApiService class in each Modul class but I think that's very bad. I think ViewModel should somehow findout that Model was changed and it should call method.
I suggest using the ToggleSwitch's Command property -- that will get executed every time the user changes the toggle, and will allow you to bind to the parent data context. Use something like this in the XAML:
<ItemsControl x:Name="items" ItemsSource="{Binding Modules}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<toolkit:ToggleSwitch x:Name="LockSwitch"
Command="{Binding ElementName=items,Path=DataContext.LockToggleCommand}"
CommandParameter="{Binding}"
IsChecked="{Binding IsLock, Mode=TwoWay}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Then just add the "LockToggleCommand" to your main view model, and call the service, eg:
public ObservableCollection<Module> Modules { get; private set; }
public ICommand LockToggleCommand { get; private set; }
public ViewModel()
{
LockToggleCommand = new DelegateCommand<Module>(module => {
apiService.Lock(module);
});
}
Here "DelegateCommand" is just the usual implementation of ICommand -- I am sure that MVVM Light has its own standard implementation.
Edit
I thought that ToggleSwitch supported Command, but since it doesn't, you can take a similar approach using an EventTrigger (if you are willing to add the System.Windows.Interactivity and Microsoft.Expression.Interactions DLLs to your project):
<ItemsControl x:Name="items" ItemsSource="{Binding Modules}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<toolkit:ToggleSwitch x:Name="LockSwitch"
IsChecked="{Binding IsLock, Mode=TwoWay}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Toggled">
<ei:CallMethodAction TargetObject="{Binding ElementName=items,Path=DataContext}"
MethodName="OnToggled"
/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Now add the "OnToggled" method to the main view model -- use the "sender" parameter to get the current item, something like this:
public void OnToggled(object sender, RoutedEventArgs e)
{
var toggleSwitch = (ToggleSwitch)sender;
var module = (Module)toggleSwitch.DataContext;
apiService.Lock(module);
}
I have a ListView Contained in a UserControl I would like to disabled a button when no items are selected in the UserControl, would it be the right way to do it? So far, it doesn't disable, it just stays enable all the way.
I've included the xaml code.
searchAccountUserControl is the UserControl name property in the xaml.
And AccountListView is the ListView name property in the userControl xaml.
<Button Content="Debit" IsEnabled="true" HorizontalAlignment="Left" Margin="18,175,0,0" Name="DebitButton" Width="128" Grid.Column="1" Height="32" VerticalAlignment="Top" Click="DebitButton_Click">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=searchAccountUserControl.AccountListView, Path=SelectedValue}" Value="{x:Null}" >
<Setter Property="Button.IsEnabled" Value="false"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Thanks.
Finally i've used :
in my ViewModel :
private bool _isSelected;
public bool IsSelected { get { return _isSelected; }
set { _isSelected = _account.View.CurrentItem != null;
PropertyChanged.SetPropertyAndRaiseEvent(this, ref _isSelected, value,
ReflectionUtility.GetPropertyName(() => IsSelected)); } }
And then Use isEnabled = "{Binding Path=IsSelected}" in the xaml.
There are a few things wrong here.
Precedence, if you set IsEnabled on the control itself the style will never be able to change it.
ElementName, it's an ElementName, not a path, just one string that gives the name of one element. Everything beyond that goes into the Path.
Style syntax, if you set a Style.TargetType you should not set the Setter.Property with a type prefix (although leaving it does not break the setter).
By the way, this alone is enough:
<Button IsEnabled="{Binding SelectedItems.Count, ElementName=lv}" ...
It's obvious that you aren't using Commanding (ICommand Interface). You should either use that (and preferably the Model-View-ViewModel architecture).
But, if you want to stick with code-behind and XAML:
<ListView SelectionChanged="AccountListView_SelectionChanged" ... />
private void AccountListView_SelectionChanged(Object sender, SelectionChangedEventArgs args)
{
DebitButton.IsEnabled = (sender != null);
//etc ...
}
More information on MVVM: http://msdn.microsoft.com/en-us/magazine/dd419663.aspx
You need to set the DataContext of the View (UserControl) to the instance of the ViewModel you want to use. Then, from there, you can bind to properties on the ViewModel, including ICommands. You can either use RelayCommand (see link above) or use Commanding provided by a framework (for example, Prism provides a DelegateCommand). These commands take an Action (Execute) and a Func (CanExecute). Simply provide the logic in your CanExecute. Of course, you'd also have to have your ListView SelectedItem (or SelectedValue) be databound to a property on your ViewModel so you can check to see if it's null within your CanExecute function.
Assuming you use RelayCommand you don't have to explicitly call the RaiseCanExecuteChanged of an ICommand.
public class MyViewModel : ViewModelBase //Implements INotifyPropertyChanged
{
public MyViewModel()
{
DoSomethingCommand = new RelayCommand(DoSomething, CanDoSomething);
}
public ObservableCollection<Object> MyItems { get; set; }
public Object SelectedItem { get; set; }
public RelayCommand DoSomethingCommand { get; set; }
public void DoSomething() { }
public Boolean CanDoSomething() { return (SelectedItem != null); }
}
<ListView ItemsSource="{Binding MyItems}" SelectedItem="{Binding SelectedItem}" ... />
<Button Command="{Binding DoSomethingCommand}" ... />