I need to modify a desktop application which uses WPF, MVVM and Behaviors for event handling. I've got a task to implement Drag&Drop for a button. If the user presses the button it will popup a file-save window but if the user clicks and drags it, it should display a file icon and the let the user drop it into an Explorer window to save it there.
I've already added namespaces:
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:behaviors="clr-namespace:MyApplication.Desktop.Client.Behaviors"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:command="http://www.galasoft.ch/mvvmlight"
I've also added XAML code into the button:
<Button Grid.Column="2"
Command="{Binding SaveAttachmentCommand}"
Visibility="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled, Converter={StaticResource boolToVisibilityConverter}}"
Style="{StaticResource AttachmentSaveButtonStyle}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="PreviewMouseLeftButtonDown">
<command:EventToCommand Command="{Binding LeftMouseButtonDownCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<i:Interaction.Behaviors>
<behaviors:FrameworkElementDragBehavior>
</behaviors:FrameworkElementDragBehavior>
</i:Interaction.Behaviors>
</Button>
But I don't know how to tell the behavior class (FrameworkElementDragBehavior) which events to handle and how to handle them (what functions to call).
I've read some tutorials but I'm still confused.
I had to do Drag and drop with MVVM two months ago.
After some research, personnaly, the best way to achieve that is to work with the "GongSolutions DragDrop" library.
It's very simple and it's perfect for what you're looking for.
For example, in a treeview:
<TreeView ItemsSource="{Binding LstCat}"
dd:DragDrop.IsDragSource="True"
dd:DragDrop.IsDropTarget="True"
dd:DragDrop.DragAdornerTemplate="{StaticResource DragAdorner}">
//Treeview Structure
</TreeView>
From there you can do Drag&Drop in the treeview. You can add a dragAdorner too (an image next to your pointer when you are dragging something)
In the viewModel you can tell the behaviour of the dragging or Dropping by implementing an interface which comes with the library. This way you can access to the data your dragging.
For example:
public void DragOver(IDropInfo dropInfo)
{
if (dropInfo.Data is Category && dropInfo.TargetItem is Rubrique)
{
return;
}
dropInfo.DropTargetAdorner = DropTargetAdorners.Highlight;
dropInfo.Effects = DragDropEffects.Move;
}
Here is the link of the library if you're interested:
https://github.com/punker76/gong-wpf-dragdrop
Related
In my project i am using the autocompletebox of the WPF toolkit from dotnetprojects:
<input:AutoCompleteBox Grid.Row="0"
Height="30"
Width="300"
ItemsSource="{Binding Persons}"
SelectedItem="{Binding SelectedName, Mode=TwoWay}"
ValueMemberPath="DisplayName"
ItemTemplate="{StaticResource AutoCompleteBoxItemTemplate}"
ItemFilter="{Binding PersonFilter}"
Style="{DynamicResource AutoCompleteBoxStyle}"
x:Name="AutoCompleteBox">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<i:InvokeCommandAction Command="{Binding TextChanged}"
CommandParameter="{Binding ElementName=AutoCompleteBox}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</input:AutoCompleteBox>
In the event TextChanged i pass the AutoCompleteBox as parameter to the viewmodel:
private void TextChangedInternal(object obj)
{
var box = obj as AutoCompleteBox;
...
}
From this point on i have no idea how to access the suggestion listbox within the popup.
My intention is to highlight the entered query within the suggestions.
Has somebody an idea how to archive this?
You will need to change the item template to something you control. This means you set up an AutoCompleteBox.ItemTemplate. This item template will contain each result found.
This Tutorial is for silver light but is pretty much all you need to create your custom control to highlight the text in the results. Once you have that you add this in the data template of your ItemTemplate.
I need to open a new view (item details) on mouse double click in ListView in UWP using MVVM. In WPF I used a command with a parameter and EventTrigger but Microsoft does not recommended to use it in UWP:
Triggers, EventTrigger, Actions and BeginStoryboard are not commonly used. These API mainly exist for compatibility in XAML originally used for Microsoft Silverlight...For events in control templates, use visual states and VisualStateManager.
As I understood it is used when you need to change visual state of the control but I need to open a new view.
How can I use VisualStateManager for my purpose?
There is how my XAML looked in WPF:
<ListBox x:Name="PersonsListControl" Grid.RowSpan="3" Grid.Row="0" Grid.Column="2"
ItemsSource="{Binding Path=PersonsProvider}"
ItemsPanel="{StaticResource PersonsListPanelTemplate}"
ItemTemplate="{StaticResource PersonsListItemTemplate}"
SelectedItem="{Binding SelectedPerson}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<i:InvokeCommandAction
Command="{Binding GetPersonDetailsCommand}"
CommandParameter="{Binding SelectedPerson}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBox>
In UWP you can use {x:Bind ...} :
<ListBox ...
DoubleTapped="{x:Bind HandleDoubleTapped}" />
And in your ViewModel just create a method :
public void HandleDoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{
// your logic
}
References :
DoubleTapped
ListBox
EDIT:
#JörgenSigvardsson pointed out that x:Bind do not bind directly to the DataContext and you should create a proxy property/properties to access particular data from your page.
More on that can be read here
I have been working with c# for some time now but surprisingly I have never dealt with context menus before. I have a listView control in my universal windows 8.1 app. Now I am trying to get a context menu to popup for each item in the listView (they are all the same type of object and are added to the list as the user adds entries). I have run into several problems with this and have looked at code examples and they seem to be leading in different directions. Firstly when I right click on an item in the list it does not fire the ListView_RightTapped event.
<ListView x:Name="lstvwHours" HorizontalAlignment="Left" Height="264" Margin="427,77,0,0" VerticalAlignment="Top" Width="357" RightTapped="lstvwHours_RightTapped">
Secondly in Microsoft's context menu code example they say to use the PopupMenu class but in other code I've seen it coded into the XAML.
And lastly After the one context menu button is clicked I want it to fire a delete method.
private async void lstvwHours_RightTapped(object sender,
RightTappedRoutedEventArgs e)
{
var menu = new PopupMenu();
menu.Commands.Add(new UICommand("Delete"/*do I put the method to call here?*/));
var chosenCommand = await menu.ShowForSelectionAsync(GetElementRect((FrameworkElement)sender));
}
Here's an example.
In this case you can wire-up the commands that get invoked from your menuitem onto your view-model.
<ListView>
<ListViewItem Content="One">
<ListViewItem.ContextMenu>
<ContextMenu>
<MenuItem Header="Insert"
Command="{Binding DataContext.InsertQuery, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContextMenu}}"/>
<MenuItem Header="Delete"
Command="{Binding DataContext.DeleteQuery, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContextMenu}}"/>
</ContextMenu>
</ListViewItem.ContextMenu>
</ListViewItem>
</ListView>
My problem is similar to the one described in this question:
WPF MVVM Button Control Binding in DataTemplate
Here is my XAML:
<Window x:Class="MissileSharp.Launcher.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MissileSharp Launcher" Height="350" Width="525">
<Grid>
<!-- when I put the button here (outside the list), the binding works -->
<!--<Button Content="test" Command="{Binding Path=FireCommand}" />-->
<ListBox ItemsSource="{Binding CommandSets}">
<ListBox.ItemTemplate>
<DataTemplate>
<!-- I need the button here (inside the list), and here the binding does NOT work -->
<Button Content="{Binding}" Command="{Binding Path=FireCommand}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
It's just a ListBox, bound to an ObservableCollection<string> named CommandSets (which is in the ViewModel).
This binding works (it displays a button for each item in the collection).
Now I want to bind the button to a command (FireCommand), which is also in the ViewModel.
Here's the relevant part of the ViewModel:
public class MainWindowViewModel : INotifyPropertyChanged
{
public ICommand FireCommand { get; set; }
public ObservableCollection<string> CommandSets { get; set; }
public MainWindowViewModel()
{
this.FireCommand = new RelayCommand(new Action<object>(this.FireMissile));
}
private void FireMissile(Object obj)
{
System.Windows.MessageBox.Show("fire");
}
}
The binding of this button does NOT work.
From what I've understood from the question I linked above, the binding doesn't work because:
(correct me if I'm wrong)
The button is inside the ListBox, so it only "knows" the binding of the ListBox (the ObservableCollection, in this case), but not the binding of the main window
I'm trying to bind to a command in the main ViewModel of the main window (which the button doesn't "know")
The command itself is definitely correct, because when I put the button outside the ListBox (see the XAML above for an example), the binding works and the command is executed.
Apparently, I "just" need to tell the button to bind to the main ViewModel of the form.
But I'm not able to figure out the right XAML syntax.
I tried several approaches that I found after some googling, but none of them worked for me:
<Button Content="{Binding}" Command="{Binding RelativeSource={RelativeSource Window}, Path=DataContext.FireCommand}" />
<Button Content="{Binding}" Command="{Binding Path=FireCommand, Source={StaticResource MainWindow}}" />
<Button Content="{Binding}" Command="{Binding Path=FireCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />
Could someone please:
give me the proper XAML to bind the button inside the ListBox to a command in the form's MainViewModel?
point me to a link where this advanced binding stuff is explained in a way that a WPF/MVVM beginner can understand?
I'm feeling like I'm just copying and pasting arcane XAML incantations, and so far I don't have any clue (and can't find any good documentation) how I would figure out by myself in which cases I'd need RelativeSource or StaticResource or whatever instead of a "normal" binding.
It's:
{Binding DataContext.FireCommand,
RelativeSource={RelativeSource AncestorType=ListBox}}
No need to walk up to the root unless you actually change the DataContext along the way, but as the ListBox seems to bind to a property on the main VM this should be enough.
The only thing i recommend reading is the Data Binding Overview, and the Binding class documentation (including its properties).
Also here is a short explanation on how bindings are constructed: A binding consists of a source and a Path relative to that source, by default the source is the current DataContext. Sources that can be set explicitly are: Source, ElementName & RelativeSource. Setting any of those will override the DataContext as source.
So if you use a source like RelativeSource and want to access something in the DataContext on that level the DataContext needs to appear in the Path.
This may be considered unrelated by most, but this search is only 1 of 3 results that you'll find searching for data binding commands to controls inside a data template--as it relates to Xamarin Forms. So, maybe it'll help someone now-a-days.
Like me you may wonder how to bind commands inside a BindableLayout. Credit jesulink2514 for answering this at Xamarin Forums, where it's probably overlooked by many because of all the comments. Here's his solution, but I'm including the link below:
<ContenPage x:Name="MainPage">
<ListView Grid.Row="1"
ItemsSource="{Binding Customers}"
VerticalOptions="Fill"
x:Name="ListviewCustomer">
<ListView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding Property}"/>
<Button Command="{Binding BindingContext.ItemCommand, Source={x:Reference MainPage}}"
CommandParameter="{Binding .}">Click me</Button>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
https://forums.xamarin.com/discussion/comment/217355/#Comment_217355
I am trying to create a floating control in WPF that can receive touch events. I searched a lot and the only solution for a floating control I found was the Popup control. Problem: The Popup control cannot receive touch events. And since I am using a SurfaceListBox inside my Popup, I need touch events. I tried to make the popup receive touch events via the following:
TouchExtensions.EnableSurfaceInput((HwndSource)HwndSource.FromVisual(this.selectionListPopup));
but it didn't have any effect. Is there any way to make popups receive touches? Is there any other control or way that could be used?
My end goal is to have a control that is floating above other controls - that means it is not clipped or obscured by other controls.
Here is the XAML I used so far:
<Popup Name="selectionListPopup"
PlacementTarget="{Binding ElementName=selectedItemButton}"
Placement="Relative"
VerticalOffset="{Binding ElementName=this, Path=SelectionListTop}"
HorizontalOffset="{Binding ElementName=this, Path=SelectionListLeft}"
IsOpen="{Binding ElementName=this, Path=IsSelecting, Mode=TwoWay}"
StaysOpen="False"
AllowsTransparency="True"
Focusable="False">
<s:SurfaceListBox Name="selectionList"
ItemsSource="{Binding ElementName=this, Path=ItemsSource}"
SelectedItem="{Binding ElementName=this, Path=SelectedItem, Mode=TwoWay}"
SelectionChanged="OnSelectionListSelectionChanged">
</s:SurfaceListBox>
</Popup>
It's not the HwndSource of the Popup, but the HwndSource of the visual parent of the Popup.Child. Sounds strange, I know.
So in the Opened-event of my popup I call the following code:
var myPopup = sender as Popup;
HwndSource hwndSource = (HwndSource)PresentationSource.FromVisual((Visual)VisualTreeHelper.GetParent(myPopup.Child));
hwndSource.EnableSurfaceInput();