I have a problem. I created this ListView:
<ListView ItemsSource="{Binding knownDeviceList}" SelectionMode="None" RowHeight="90" ItemTapped="device_Clicked">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Command="{Binding DeleteDevice}"
CommandParameter="{Binding Id}"
Text="Delete" IsDestructive="True" />
</ViewCell.ContextActions>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The ListView is bound to a List with objects in it, but I need to bind the command to an ICommand outside the List on root level of the ViewModel. How can I do that, because now the ICommand doesn't get triggered when I try to remove an item from the List!
Here is my Command in my ViewModel:
public ICommand DeleteDevice
{
get
{
return new Command<int>((x) => RemoveDevice_Handler(x));
}
}
What am I doing wrong?
Your MenuItem.BindingContext is scoped to the actual item in that cell, not the view model of the whole page (or ListView). You will either need to tell the binding that it needs to looks else where, like this:
<ListView x:Name="MyListView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Command="{Binding Path=BindingContext.DeleteDevice, Source={x:Reference MyListView}}}"/>
</ViewCell.ContextActions>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Note that I removed the attributes that you have in there just to make clear which ones I added. You can keep them in, this is just for readability.
Or, you can use the new Relative Bindings. Then you would implement the command binding like this:
Command="{Binding Source={RelativeSource AncestorType={x:Type local:YourViewModelClass}}, Path=DeleteDevice}"
The Context that you are trying to bind with from the Command is not the Page's one but the ItemSource, This is why you can simply bind the Id to the CommandParameter.
To fix this, you need to target the page's BindingContext since your Command lives at the ViewModel root level. You can achieve it by adding a x:Name property to your ListView and target the right Context through it.
Here the fix:
<ListView x:Name="listView" ItemsSource="{Binding knownDeviceList}" SelectionMode="None" RowHeight="90" ItemTapped="device_Clicked">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Command = "{Binding BindingContext.DeleteDevice, Source={x:Reference listView}}"
CommandParameter="{Binding Id}"
Text="Delete" IsDestructive="True" />
</ViewCell.ContextActions>
</ViewCell>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
Hope it helps & happy coding!
Related
I've got a ListView nested into another Listview. Now I want to bind an double-click event to the ListViewItems of the inner ListView
<UserControl>
<UserControl.Resources>
<DataTemplate x:Key="DefaultTemplate">
<ListView Name="jobsView" ItemsSource="{Binding jobs}" SelectedItem="{Binding Path=SelectedProduction}" >
<ListView.InputBindings>
<MouseBinding Gesture="LeftDoubleClick" Command="{Binding Path=DataContext.ItemSelectedCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" CommandParameter="{Binding ElementName=jobsView, Path=SelectedItem}" />
</ListView.InputBindings>
</ListView>
</DataTemplate>
</UserControl.Resources>
<ListView Name="weekView" ItemsSource="{Binding dayList}" ItemTemplate="{StaticResource DefaultTemplate}" >
</ListView>
</UserControl>
I created a RelayCommand called ItemSelectedCommand in my ViewModel.
public RelayCommand ItemSelectedCommand { get; private set; }
The RelayCommand is not getting triggered. I guess I'm setting the wrong RelativeSource. How would it look correct?
Where is your ListView inserted. Is there in a Visual Tree a parent with type of UserControl?
Also, what's quite good to fix Binding errors is to take a look at the Console. There should be Binding errors that might point you wherte is the mistake. Usually is writes down where it is trying to search for object and property :)
Also, I am not sure if private get; is actually allowed when binding to property.
<StackPanel Grid.Column="1">
<StackPanel.Resources>
<DataTemplate x:Key="DefaultTemplate" DataType="{x:Type sys:String}">
<StackPanel>
<TextBlock Text="{Binding .}"/>
<ListView>
<ListView.ItemsSource>
<CompositeCollection>
<sys:String>Sub Item</sys:String>
</CompositeCollection>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}">
<TextBlock.InputBindings>
<MouseBinding Gesture="LeftDoubleClick" Command="{Binding DataContext.RenameCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MainWindow}}, PresentationTraceSources.TraceLevel=High}" CommandParameter="{Binding SelectedItem, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}}"/>
</TextBlock.InputBindings>
</TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</DataTemplate>
</StackPanel.Resources>
<ListView ItemTemplate="{StaticResource DefaultTemplate}">
<ListView.ItemsSource>
<CompositeCollection>
<sys:String> First Item</sys:String>
</CompositeCollection>
</ListView.ItemsSource>
</ListView>
</StackPanel>
Reason why it wasn't working for you is because the double Click was on an actual ListViewItem and NOT the ListView.
Please note: This question is different to WPF - How can I create menu and submenus using binding because I want to use my own view models. MyFirstViewModel, MySecondViewModel, MyThirdViewModel cannot be merged in one kind of MenuItemViewModel and the layering with these 3 view models is my problem and the answer about hierarchical datatemplate doesn't work for me.
I want to make a menu where I know I have 3 levels.
The first level is one static menu item
the second level is generated from a binding to an ObservableCollection<MySecondViewModel> in my view model.
In MySecondViewModel I also have a ObservableCollection<MyThirdViewModel> which I want to bind to my 3rd menu item level.
In the third level I also want to use a template with a Checkbox which is also bind to properties in MyThirdViewModel. So my ViewModels look like this:
public class MyFirstViewModel
{
public ObservableCollection<MySecondViewModel> MenuItemsSecondLevel { get; set; }
...
}
public class MySecondViewModel
{
public string DisplayName{get; set;}
public ObservableCollection<MyThirdViewModel> MenuItemsThirdLevel{ get; set; }
...
}
public class MyThirdViewModel
{
public string DisplayName{get; set;}
public bool IsChecked {get;set;}
...
}
How can I create my WPF Menu based on this? if I try this:
<Menu>
<MenuItem Header="Select Source:" ItemsSource="{Binding MenuItemsSecondLevel}">
<MenuItem Header="{Binding DisplayName}" ItemsSource="{Binding MenuItemsThirdLevel}" >
<MenuItem.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding DisplayName}" IsChecked="{Binding IsChecked}"/>
</DataTemplate>
</MenuItem.ItemTemplate>
</MenuItem>
</MenuItem>
</Menu>
Then my bindings are not working. He cannot find any of my Collections.If I make it more advanced like this:
<Menu>
<MenuItem Header="Select Source:" ItemsSource="{Binding MenuItemsSecondLevel}">
<MenuItem.ItemTemplate>
<DataTemplate>
<MenuItem Header="{Binding DisplayName}" ItemsSource="{Binding MenuItemsThirdLevel}" >
<MenuItem.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding DisplayName}" IsChecked="{Binding IsChecked}" />
</DataTemplate>
</MenuItem.ItemTemplate>
</MenuItem>
</DataTemplate>
</MenuItem.ItemTemplate>
</MenuItem>
</Menu>
He finds the second level but not the third. What's the best way to make the menu levels like the structure of my view models?
Please note, I know that you can make menu items selectable but there is a design reason why we use here checkboxes.
You could use this
<Menu>
<MenuItem Header="Select Source:"
ItemsSource="{Binding FirstViewModel.MenuItemsSecondLevel}">
<MenuItem.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:MySecondViewModel}"
ItemsSource="{Binding MenuItemsThirdLevel}">
<TextBlock Text="{Binding DisplayName}" />
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type local:MyThirdViewModel}">
<CheckBox Content="{Binding DisplayName}" />
</DataTemplate>
</MenuItem.Resources>
</MenuItem>
</Menu>
Assuming FirstViewModel is a property of your viewmodel.
I've got following problem. Following situation in my xaml code:
<ListView ItemsSource="{Binding ListViewItems}">
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel>
<Label Content="Test">
<Label.ContextMenu>
<ContextMenu ItemsSource="{Binding MenuItems}">
</ContextMenu>
</Label.ContextMenu>
</Label>
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
<i:Interaction.Triggers>
<i:EventTrigger EventName="PreviewMouseUp">
<i:InvokeCommandAction Command="{Binding LabelMouseUpCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</ListView>
After clicking a label no context menu is shown and the trigger does not work as well, LabelMouseUpCommand method is not entered. I fear the listview handles the click itself and does not pass it to the embedded controls.
Is there any way to pass it to the controls. In future i want to add several controls to the itemtemplate and everyone has it own different context menu.
I found the answer for my problem with this stackoverflow article
There the author explains that the contextmenu does not lie in the same visual tree as the listview. Therefore my initial binding can't work because the source can't be found within the visual tree.
Furthermore Sinatr was totally right, the trigger was initially defined for listview, not for the label.
Here is my working code:
<ListView ItemsSource="{Binding ListViewItems}" x:Name="listViewMain">
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel>
<Label Content="Test">
<Label.ContextMenu>
<ContextMenu ItemsSource="{Binding DataContext.MenuItems, Source={x:Reference listViewMain}}">
</ContextMenu>
</Label.ContextMenu>
<i:Interaction.Triggers>
<i:EventTrigger EventName="PreviewMouseUp">
<i:InvokeCommandAction Command="{Binding DataContext.LabelMouseUpCommand, Source={x:Reference listViewMain}}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Label>
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am using Xamarin.Forms, and I'm looking for a way to have a databound ListView with custom cells, and in those custom cells, there is a Delete button that is bound to a Command in my ViewModel.
Here is my code...
<ListView ItemsSource="{Binding SelectedServiceTypes}" IsVisible="{Binding ShowSelectedServiceTypes}" HeightRequest="110" RowHeight="30">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal" HeightRequest="30">
<Label Text="{Binding ServiceCode}" HeightRequest="30" />
<Label Text="-" HeightRequest="30" />
<Label Text="{Binding ServiceDescription}" HeightRequest="30" />
<Button
Text="Delete"
HeightRequest="30"
HorizontalOptions="End"
VerticalOptions="Start"
Command="{Binding DeleteServiceTypeCommand}"
CommandParameter="{Binding ID}" />
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The ListView is bound to an ObservableCollection. I want the delete button to use a Command and pass a CommandParameter to my View Model.
private Command _deleteServiceTypeCommand;
public Command DeleteServiceTypeCommand
{
get
{
if (_deleteServiceTypeCommand == null)
_deleteServiceTypeCommand = new Command<string> ((serviceTypeID) => RemoveServiceType (serviceTypeID) );
return _deleteServiceTypeCommand;
}
}
I wasn't sure if this is possible in Xamarin.Forms. It's almost like the cell needs to have two BindingContext, one being the element in the collection(to get the ID value) and the other being the View Model(to have the Command work).
Any ideas?
So after more research, I was able to find the nuget package Xamarin.Forms.Behaviors which adds something similar to RelativeSource binding.
https://github.com/corradocavalli/Xamarin.Forms.Behaviors
It's implementation example can be found here.
http://codeworks.it/blog/?p=216
This is a pretty easy question I think , but I can't find the answer. I have an itemtemplate defined into a datatemplate. When an item is selected, I wanna trigger a command to select the name of my element and apply it somewhere else. For the moment the MouseDown event doesn't accept my command.
<ListView Margin="4" Grid.Row="1" Grid.ColumnSpan="2" ItemsSource="{Binding Path=ExistingStateInfos, ElementName=Window}"
SelectedItem="{Binding Path=SelectedStateInfo, ElementName=Window}" x:Name="statinfoListview">
<ListView.ItemTemplate>
<DataTemplate DataType="{x:Type States:StateInfo}">
<TextBlock Text="{Binding Path=Name}" MouseDown="{x:Static MyWindow.ApplyStateInfoNameToStateCommand}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can't set a command directly to an event handler.
Use EventToCommand from the MVVM LightToolkit
<DataTemplate DataType="{x:Type States:StateInfo}">
<TextBlock Text="{Binding Path=Name}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDown">
<Command:EventToCommand Command="{Binding YourCommand, Mode=OneWay}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBlock>
</DataTemplate>
In fact ot was bulshit from me, I just add to do
<TextBlock Text="{Binding Path=Name}" MouseDown="{x:Static ApplyStateInfoNameToState_Click}" />
Sorry it's friday. Have a nice weekend :)