Wpf: Drag And Drop To A Textbox - wpf

I've googled this problem, and people have answered similar questions, but for some reason I can't get anything to work. I must have missed something here... At any rate, when I run the following code, the TextBox_DragEnter handler is never called. However, if I change the TextBox element in the xaml to a TextBlock element, it is called. Is there any way to get the same behavior from a TextBox element? The following code completely isolates the problem...
MainWindow.xaml:
<Window x:Class="Wpf1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid Name="myGrid">
<TextBox AllowDrop="True" PreviewDragEnter="TextBox_DragEnter" PreviewDrop="TextBox_Drop" />
</Grid>
</Window>
MainWindow.xaml.cs:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Collections.ObjectModel;
namespace Wpf1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void TextBox_DragEnter(object sender, DragEventArgs e)
{
e.Effects = DragDropEffects.Copy;
}
private void TextBox_Drop(object sender, DragEventArgs e)
{
}
}
}
Many thanks in advance!
Andrew
EDIT:
Just to clarify, I would like to allow dropping a custom object into a textbox. In the Drop handler for the textbox, I would then like to set the text of the textbox to a property in the object, and then set the IsReadOnly property of the TextBox to false. I'm just having some trouble enabling drag and drop for the TextBox...

If you add a handler for PreviewDragOver, then set e.Handled = true it should work.
Works for me in any case.

TextBox seems to have already some default handling for DragAndDrop. If your data object is a String, it simply works. Other types are not handled and you get the Forbidden mouse effect and your Drop handler is never called.
It seems like you can enable your own handling with e.Handled to true in a PreviewDragOver event handler.
I could not find any details about that at MSDN, but
found http://www.codeproject.com/Articles/42696/Textbox-Drag-Drop-in-WPF very helpfull.

You may also want to handle PreviewDragEnter the same way as PreviewDragOver or it will default to the Forbidden Mouse on the first pixel.
In the handler make sure the DragEventArgs.Data is the type you want to drop. If it is, set DragEventsArgs.Effects to DragDropEffects.Move or something else in AllowedEffects. If it isn't the type you want to drop, set to DragDropEffects.None which disables dropping.
XAML for MVVM Light:
<i:Interaction.Triggers>
<i:EventTrigger EventName="Drop">
<cmd:EventToCommand Command="{Binding DragDropCommand}" PassEventArgsToCommand="True" />
</i:EventTrigger>
<i:EventTrigger EventName="PreviewDragOver">
<cmd:EventToCommand Command="{Binding PreviewDragEnterCommand}" PassEventArgsToCommand="True" />
</i:EventTrigger>
<i:EventTrigger EventName="PreviewDragEnter">
<cmd:EventToCommand Command="{Binding PreviewDragEnterCommand}" PassEventArgsToCommand="True" />
</i:EventTrigger>
</i:Interaction.Triggers>
Handler in ViewModel:
private void ExecutePreviewDragEnterCommand(DragEventArgs drgevent)
{
drgevent.Handled = true;
// Check that the data being dragged is a file
if (drgevent.Data.GetDataPresent(DataFormats.FileDrop))
{
// Get an array with the filenames of the files being dragged
string[] files = (string[])drgevent.Data.GetData(DataFormats.FileDrop);
if ((String.Compare(System.IO.Path.GetExtension(files[0]), ".xls", true) == 0)
&& files.Length == 1)
drgevent.Effects = DragDropEffects.Move;
else
drgevent.Effects = DragDropEffects.None;
}
else
drgevent.Effects = DragDropEffects.None;
}

Better create your own Textbox class that implements Textbox. Then override the OnDrag-Events and set e.handled to false or do whatever you want.
It's a little dirty to use events that are not made for the original wanted behavior. Preview is to check some stuff and have a good Undo option before committing the real DragDrop-Events.

Related

Deleting empty objects from extra row of DataGrid in WPF MVVM

I've got a DataGrid in a user control bound to an ObservableCollection of an object. I've got CanUserAddRows set to true, because that's the functionality I'd like. However, when I close that window, any extra rows added by the user that are blank get added to my ObservableCollection. Is there any way to remove those extra items from my ObservableCollection if they're blank in a way that's MVVM compliant?
The "MMVM way" of doing something like this is to use event triggers to call commands that are bound to your view from your ViewModel. To use event triggers, you'll need the interactivity extension for WPF. You can grab that from NuGet ..
Install-Package System.Windows.Interactivity.WPF
This provides the EventTrigger that will be used to call a command when an event occurs. Now you need to add this trigger to your window XAML and set the trigger action to call a command. For example, here I am settings up a command to be called on the Closing event of the window.
<Window x:Class="WpfApp2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp2"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Closing">
<i:InvokeCommandAction Command="{Binding RemoveEmptyEntries}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid>
</Grid>
</Window>
As you can see I'm calling a command in the trigger. This command is obtained via binding to a RemoveEmptyEntries property expected to be on the ViewModel. Now that the XAML is ready to call a command, you need to add this command to your ViewModel. This is done using a RelayCommand. These types of commands are found in most MVVM frameworks such as MVVM Light. But no worries if you're not using a framework, it's just some more boilerplate code. Here is a very simple implementation of a RelayCommand that can be used to get you going.
public class RelayCommand : ICommand
{
private readonly Action _commandAction;
public event EventHandler CanExecuteChanged;
public RelayCommand(Action commandAction)
{
_commandAction = commandAction;
}
public bool CanExecute(object parameter) => true;
public void Execute(object parameter)
{
_commandAction.Invoke();
}
}
Note the the RelayCommand takes an Action when created and calls that Action when the command is executed.
Lastly, add a new property of type RelayCommand to your ViewModel, such as ..
public class DataRowsViewModel
{
public RelayCommand RemoveEmptyEntries => new RelayCommand(RemoveEmptyEntriesExecuted);
private void RemoveEmptyEntriesExecuted()
{
//Remove empty rows here.
}
}
Now your logic for removing the empty rows can be dropped into the RemoveEmptyEntriesExecuted method.

How to use Commands to react to a ListBox

I'm trying to learn Commanding and have set up a simple wpf project to use a custom command. I have a ListBox and a Button on a Window. When the ListBox has the focus and an Item is selected, I want the Button to be enabled, otherwise it should be disabled.
I define a CustomCommand in a separate CustomCommands class:
Public Shared ReceivedFocus As New RoutedCommand
and in my Window I set it up as follows:
<CommandBinding
Command="{x:Static local:CustomCommands.ReceivedFocus}"
CanExecute="CanActivate"
Executed="ChangeSelection">
</CommandBinding>
and use the command for the ListBox as follows:
<ListBox
x:Name="lstInactive">
<i:Interaction.Triggers>
<i:EventTrigger
EventName="GotFocus">
<i:InvokeCommandAction
Command="{x:Static local:CustomCommands.ReceivedFocus}"
</i:InvokeCommandAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBox>
and, finally, the CanActivate routine is:
Private Sub CanActivate(sender As Object, e As CanExecuteRoutedEventArgs)
If lstInactive.SelectedIndex >= 0 Then
e.CanExecute = True
Else
e.CanExecute = False
End If
End Sub
This is not working. The major problem is that I don't understand how to relate the CanExecute value to the Button. Should I ignore the CanExecute value in the CanActivate routine and instead just set the Enabled property of the Button? If so, what is the value of the CanExecute paramter of the CanExecuteRoutedEventArgs?
A second problem is that the GotFocus event is not firing until I select an item in the ListBox a second time.
Or maybe I don't have a grasp on Commanding at all and this is not the right approach. This small project is not important in itself, it is intended to make sure I understand Commanding after reading numerous articles about it before I start to use Commands in "real" projects. Sadly, at this stage it is clear I don't.
This is not working. The major problem is that I don't understand how to relate the CanExecute value to the Button.
Bind its Command property to the same command:
<Button Content="Button" Command="{x:Static local:CustomCommands.ReceivedFocus}" />
The Button should then be enabled or disabled based on the value that you set the CanExecute property to in your CanActivate event handler.
You probably also want to listen to the SelectionChanged event. This works as expected:
<StackPanel>
<StackPanel.CommandBindings>
<CommandBinding
Command="{x:Static local:CustomCommands.ReceivedFocus}"
CanExecute="CanActivate"
Executed="ChangeSelection">
</CommandBinding>
</StackPanel.CommandBindings>
<ListBox x:Name="lstInactive">
<ListBoxItem>first</ListBoxItem>
<ListBoxItem>second</ListBoxItem>
<ListBoxItem>third</ListBoxItem>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{x:Static local:CustomCommands.ReceivedFocus}">
</i:InvokeCommandAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBox>
<Button Content="Button" Command="{x:Static local:CustomCommands.ReceivedFocus}" />
</StackPanel>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void CanActivate(object sender, CanExecuteRoutedEventArgs e)
{
e.CanExecute = lstInactive.SelectedIndex >= 0;
}
private void ChangeSelection(object sender, ExecutedRoutedEventArgs e)
{
}
}

How to handle the SelectionChanged event of ComboBox with MVVM in wpf?

How to raise / handle the SelectionChanged event of WPF's ComboBox using the MVVM pattern?
Explain in detail please I am new to WPF.
What I want, is to do some operations when the ComboBox item selection changed. How can I achieve it, in an MVVM way?
MVVM solution:
Bind the ItemsSource and SelectedItem properties of the ComboBox to properties in your ViewModel:
<ComboBox ItemsSource="{Binding MyItems}" SelectedItem="{Binding MySelectedItem}"/>
In MainViewModel.cs:
public ObservableCollection<string> MyItems { get; set; }
private string _mySelectedItem;
public string MySelectedItem
{
get { return _mySelectedItem; }
set
{
// Some logic here
_mySelectedItem = value;
}
}
Code-behind solution:
If you don't want to use MVVM, you can add use this:
<ComboBox SelectionChanged="ComboBox_SelectionChanged" />
And add this in MainWindow.xaml.cs:
private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
// Some logic here
}
I'm a big fan of this method.
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
<ComboBox Grid.Column="2" DisplayMemberPath="Data.name" ItemsSource="{Binding Model.Regions}" SelectedItem="{Binding Model.SelectedRegion}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding RegionChangedCmd}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</ComboBox>
Your ViewModel needs to implement INotifyPropertyChanged.
public class MyViewModel : INotifyPropertyChanged
{
private string _mySelectedItem;
public string MySelectedItem
{
get
{
return _mySelectedItem;
}
set
{
if (_mySelectedItem != value)
{
_mySelectedItem = value;
// Perform any pre-notification process here.
if (null != PropertyChanged)
{
PropertyChanged(this, new PropertyChangedEventArgs("MySelectedItem"));
}
}
}
}
}
The previously posted XAML is correct:
<ComboBox ItemsSource="{Binding MyItems}" SelectedItem="{Binding MySelectedItem}"/>
Just an enhancement of this solution which exists above, In case you are using Prism Library (if not, then stop reading now, there is nothing for you)
I really like this solution and I think it is better than any other solution, I just want to make a small enhancement to that solution provided by the Prism Library.
that solution is using
<i:InvokeCommandAction Command="{Binding RegionChangedCmd}" />
notice the i: before the InvokeCommandAction. It means that the InvokeCommandAction class exists in the xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" namespace. This is good and fine, but notice that the Prism library has exactly the same class with the same name InvokeCommandAction. It just exists in another namespace, in the xmlns:prism="http://prismlibrary.com/" namespace.
So actually you can replace the following XAML
<i:InvokeCommandAction Command="{Binding RegionChangedCmd}" />
with this XAML
<prism:InvokeCommandAction Command="{Binding RegionChangedCmd}" />
OK, we can do this, what is the benefit?
To notice the benefit, write the following command in the ViewModel
public ICommand RegionChangedCmd { get; }
public ViewModelConstructor()
{
RegionChangedCmd = new DelegateCommand<SelectionChangedEventArgs>(RegionChangedCmdExecuted);
}
public void RegionChangedCmdExecuted(SelectionChangedEventArgs e)
{
// e parameter is null if you use <i:InvokeCommandAction>
// e parameter is NOT null if you use <prism:InvokeCommandAction>
}
e parameter is null if you use <i:InvokeCommandAction>
e parameter is NOT null if you use <prism:InvokeCommandAction>
As first let's make things clear - you can not change event rather you can subscribe to.
Since you've not provided any information regarding where from you want to handle selection changes I will assume most common scenario - handling in the underlying ViewModel. According to MVVM ViewModel should not know anything about View so you can not subscribe directly from ViewModel to the event of a View's control. But you can bind a property of ViewModel to either SelectedItem or SelectedIndex so it would trigger whilst selection changes.
<ComboBox
SelectedIndex="{Binding SelectedIndexPropertyName}"
... />
There are other solutions doing handling in code behind of a View by accessing a ViewModel via view.DataContext but I would suggest avoid such practice, this are work around cases.

WPF Command bindings - how can I get to event handlers

Hi
Is there any way to choose from where XAML should use command bindings event handlers?
I added copule of command binding to my cusotm control, however functions which are resonsible for execute and can_execute are not directly in code behind but in another class. This class is derived from Canvas and I create instance of this class in XAML.
<s:MyCanvas Focusable="true" Background="Transparent" x:Name="OwnCanvas" FocusVisualStyle="{x:Null}" ScrollViewer.CanContentScroll="True" >
I add command bindings this way
<UserControl.CommandBindings>
<CommandBinding Command="{x:Static ApplicationCommands.Copy}" CanExecute="event handler from object OwnCanvas" />
</UserControl.CommandBindings>
Is there any way to do that ? Or I have to transfer event handler directly to codebehind ??
I think you're gonna have to transfer the handler in codebehind as I don't think that's possible. I could be wrong and would love to be corrected if it is possible though.
What I usually do is just define the CommandBinding in your MyCanvas class (code behind) and then reference that MyCanvas as the CommandTarget in the custom control. Like this:
public MyCanvas()
{
...
CommandBindings.Add(
new CommandBinding(ApplicationCommands.Copy,
(sender, e) => {
// Execute Stuff
},
(sender, e) => {
e.CanExecute = true;
e.Handled = true;
}));
...
}
And in your custom control (given it lies within the visual tree of MyCanvas)...
<Button Command="{x:Static ApplicationCommands.Copy}" CommandTarget="{Binding RelativeSource={RelativeSource AncestorType={x:Type s:MyCanvas}}}"/>
With your CommandTarget set up like that the Execute and CanExecute methods will be called on it.

Select the Initial Text in a Silverlight TextBox

I am trying to figure out the best way to select all the text in a TextBox the first time the control is loaded. I am using the MVVM pattern, so I am using two-way binding for the Text property of the TextBox to a string on my ViewModel. I am using this TextBox to "rename" something that already has a name, so I would like to select the old name when the control loads so it can easily be deleted and renamed. The initial text (old name) is populated by setting it in my ViewModel, and it is then reflected in the TextBox after the data binding completes.
What I would really like to do is something like this:
<TextBox x:Name="NameTextBox" Text="{Binding NameViewModelProperty, Mode=TwoWay}" SelectedText="{Binding NameViewModelProperty, Mode=OneTime}" />
Basically just use the entire text as the SelectedText with OneTime binding. However, that does not work since the SelectedText is not a DependencyProperty.
I am not completely against adding the selection code in the code-behind of my view, but my problem in that case is determining when the initial text binding has completed. The TextBox always starts empty, so it can not be done in the constructor. The TextChanged event only seems to fire when a user enters new text, not when the text is changed from the initial binding of the ViewModel.
Any ideas are greatly appreciated!
Dan,
I wrote a very simple derived class, TextBoxEx, that offers this functionality. The TextBoxEx class derives from TextBox, and can be referenced in XAML for any and all of your TextBox’s. There are no methods to call. It just listens for Focus events and selects it own text. Very simple.
Usage is as follows:
In XAML, reference the assembly where you implement the TextBoxEx class listed below, and add as many TextBoxEx elements as you need. The example below uses data binding to display a username.
<UserControl x:Class="MyApp.MainPage"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c="clr-namespace:ClassLibrary;assembly=ClassLibrary"
>
.
.
.
<c:TextBoxEx x:Name="NameTextBox" Text="{Binding NameViewModelProperty, Mode=TwoWay}" Width="120" />
This code below works with Silverlight 3.
using System.Windows;
using System.Windows.Controls;
namespace ClassLibrary
{
// This TextBox derived class selects all text when it receives focus
public class TextBoxEx : TextBox
{
public TextBoxEx()
{
base.GotFocus += OnGotFocus;
}
private void OnGotFocus(object sender, RoutedEventArgs e)
{
base.SelectAll();
}
}
}
Good luck.
I'm leaving Jim's solution as the answer, since calling SelectAll() on the GotFocus event of the TextBox did the trick.
I actually ended up making a Blend TriggerAction and an EventTrigger to do this instead of subclassing the TextBox or doing it in code-behind. It was really simple to do and nice to be able to keep the behavior logic encapsulated and just add it declaratively in XAML to an existing TextBox.
Just posting this in case anyone else comes across this thread and is interested:
XAML:
<TextBox x:Name="NameTextBox" Text="{Binding NameViewModelProperty, Mode=TwoWay}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="GotFocus">
<local:SelectAllAction/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
C#
public class SelectAllAction : TriggerAction<TextBox>
{
protected override void Invoke(object parameter)
{
if (this.AssociatedObject != null)
{
this.AssociatedObject.SelectAll();
}
}
}
Just wanna add a link I found pertaining to this - here is a fantastic discussion (read comments) on Behaviours vs subclassing vvs attached properties...

Resources