I am new in this field and am trying to do a drag and drop from scatterview to librarystack, and when drop is executed, an event should be triggered ( after an image is dropped in the librarystack, a message box will be shown). However, I can not find the way to do it..
Below is the code snippets
<Grid>
<!-- Drop 1.jpg to librarystack-->
<s:ScatterView AllowDrop="True">
<Image Source="C:\1.jpg"/>
</s:ScatterView>
<!--Librarystack get the 1.jpg and trigger an event-->
<s:LibraryStack x:Name="myLibraryStack" Drop="myLibraryStack_Drop" Margin="376,0,389,0" Background="Transparent" Height="162" VerticalAlignment="Top" AllowDrop="True">
</s:LibraryStack>
</Grid>
and
public SurfaceWindow1()
{
InitializeComponent();
SurfaceDragDrop.AddDropHandler(myLibraryStack, OnPreviewDrop);
}
private void myLibraryStack_Drop(object sender, SelectionChangedEventArgs e)
{
MessageBox.Show("HALLO");
}
Would appreciate for any guidance
I think that the LibraryStack has to be inside the Scatterview to receive the drop. But I'm not sure. I had the problem myself once and this solved it, if I remember correctly.
Related
I have an WPF User control which is is hosted in an Elementhost. I use elementhost to include an WPF user control in my classical Windows forms app.
Now, from Windows forms side I am trying to capture the mouseDown event that is produced in an WPF label but I don't know how to do it.
Any ideas?
A case might be able to help you. The winform form calls the wpf control.
Create a WPF custom control. The xaml code of the control is as follows.
<Grid>
<Image Margin="10,10,10,90" x:Name="img" Stretch="Uniform" Opacity="1">
<Image.BitmapEffect>
<DropShadowBitmapEffect Opacity="1" />
</Image.BitmapEffect>
</Image>
<TextBox Background="Transparent" Foreground="White" Height="40" FontSize="32" Margin="44,0,56,36" x:Name="txtBox1" Opacity="0.5" Text="" VerticalAlignment="Bottom" /> </Grid>
You need to add the corresponding function to set the effect. The code is as follows.
public void SetSource(string fileName)
{
img.Source = new BitmapImage(new Uri(fileName) );
}
public void SetOpacity(double opacity)
{
img.Opacity = opacity;
}
//
public string GetText()
{
return txtBox1.Text;
}
Create a Winform application and add a reference, otherwise the control will not work properly. The list of references is pictured below.
Regenerate the solution. On the left toolbar, a WPF control appears and drag it to the form.
Use the button control in the winform project to call the corresponding function.
private void button1_Click(object sender, EventArgs e)
{
((UserControl1)elementHost1.Child).SetSource(#"C:\Users\Admin\Pictures\Saved Pictures\9837f99502eba3d01d4fb671cab20c15.jpg");
}
private void button2_Click(object sender, EventArgs e)
{
((UserControl1)elementHost1.Child).SetOpacity(0.5);
}
private void button3_Click(object sender, EventArgs e)
{
string text = ((UserControl1)elementHost1.Child).GetText();
label1.Text = text;
}
Test items: The left side is the traditional Winform control. The right side is the imported WPF control. You can clearly see the "translucent" effect of the picture.
Not sure what exactly you're trying to achieve. Below is a simple example.You can edit the MouseDown event of the UserControl as needed.
If there is a problem, please make your problem clearer and show me the complete code sample that can reproduce your problem for analysis.
UserControl:
<Grid>
<Label x:Name="label" Content="Label" MouseDown="label_MouseDown" Background="AliceBlue" Width="300" Height="200" />
</Grid>
private void label_MouseDown(object sender, MouseButtonEventArgs e)
{
MessageBox.Show("hello");
}
Add the UserControl reference in the WinForms project, drag and drop the UserControl on the Form1 designer after rebuilding the WinForms project.
The result of running the project and clicking the Label in the UserControl is shown in the figure.
I have created custom WPF toolbox control. I have implemented drag and drop functionality, which is working as intended but when i move the mouse (dragging data) over the drop target, the mouse cursor is displayed like this action cant be completed although code executes and is working correctly. (here you can see how the cursor looks when dragging over target). I have tried following in target OnDragEvent:
Mouse.OverrideCursor = Cursors.Hand; in that case the cursor only changes for like 1/1000 second and then changes back to the one that can be seen in the image above.
Cursor.Current = Cursors.Hand; which also doesnt work.
Take care you need to implement some events in case of drag and drop I advice to see the following link I think it will be useful and solve your problem.
drag amp drop in wpf explained end to end
Did you use DoDragDrop?
There you could set the Effect as a third parameter:
DragDrop.DoDragDrop(drg, dragData, DragDropEffects.Move);
Maybe this helps:
I have two Canvas with one holding a button:
<Canvas
HorizontalAlignment="Left"
Height="225"
Margin="270,10,0,0"
VerticalAlignment="Top"
Width="237"
PreviewMouseMove="Canvas_PreviewMouseMove">
<Button
Content="Button"
Canvas.Left="65"
Canvas.Top="65"
Width="75"/>
</Canvas>
<Canvas
HorizontalAlignment="Left"
Height="225"
Margin="20,10,0,0"
VerticalAlignment="Top"
Width="245"
AllowDrop="True"
Background="Black"
/>
and this in the PreviewMouseEvent:
private static readonly string ident = "test";
private void Canvas_PreviewMouseMove(object sender, MouseEventArgs e)
{
DataObject dragData = new DataObject(ident, ((Canvas)sender));
DragDrop.DoDragDrop((Canvas)sender, dragData, DragDropEffects.Move);
}
Here you get your Move effect when setting the Backcolor, if no color is set you don't get the move effekt. Maybe this is your issue.
(Same behavior for a UserControls)
I have following ListView
<ListView Name="listAccounts" Width="300" AllowDrop="True" SelectionMode="Single" CanDragItems="True" CanDrag="True" CanReorderItems="True" Background="{ThemeResource myBackground}" DragItemsStarting="listAccounts_DragItemsStarting" Drop="listAccounts_Drop">
and defined my event handlers as
private void listAccounts_DragItemsStarting(object sender, DragItemsStartingEventArgs e)
{
e.Data.SetData("itemIndex", (e.Items[0] as AccountList).Text.ToString());
}
private async void listAccounts_Drop(object sender, DragEventArgs e)
{
string itemIndexString = await e.Data.GetView().GetTextAsync("itemIndex");
}
I don't know what else I can do. I want to realize the movement of the list items in the same list.
I went over to the official Windows 10 samples, looked for the drag-drop sample and trimmed it down (like removing the drag from target to source). Turns out you don't even have to handle any events to make re-ordering in a single ListView work.
<ListView x:Name="TargetListView"
Grid.Row="2" Grid.Column="1" Margin="8,4"
CanReorderItems="True" CanDrag="True" AllowDrop="True"
/>
Check your ObservableCollection after reordering items and you'll notice it's correct. If you want to track the re-ordering, you'll have to check the CollectionChanged event on your ObservableCollection, as there is no event on the ListView to do this.
If you want to support drag & drop accross multilple listviews, I'd say have another look at the sample.
I have a Grid placed at the top of the Window in which inside of it there's an Image placed. The Grid is supposedly dragging the window with a MouseDown event.
However, whenever i want to fire a MouseDown event to the Child Image it doesn't work but, instead it fires the Grid's.
private void toggleTbr_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
this.DragMove();
}
private void leapTcb_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
//my code
}
As you see i tried e.Handled = true; but it changes nothing, then i thought of trying of using PreviewMouseLeftButtonDown instead of MouseLeftButtonDown but, still the same.
What am i doing wrong here, or how to prevent the Grid from triggering?
XAML:
<Grid x:Name="toggleTbr" MouseLeftButtonDown="toggleTbr_MouseLeftButtonDown">
<Grid x:Name="leapTcb_" Height="21" Width="26">
<Image x:Name="leapTcb" MouseLeftButtonDown="leapTcb_MouseLeftButtonDown">
<Image.Background>
<ImageBrush Source="Resources/leap_1.png"/>
</Image.Background>
</Image>
</Grid>
</Grid>
Your Code works fine, but if it isn't enough you can try using this:
IsHitTestVisible="True"
The Image element has no Background property, instead, set the Source property directly at the image element.
<Image x:Name="leapTcb" Source="Resources/leap_1.png" MouseLeftButtonDown="leapTcb_MouseLeftButtonDown"/>
However you made this running, but with the specified change it behaves like you want, at least on my machine.
Use this this is working my side
<Grid x:Name="toggleTbr" MouseLeftButtonDown="toggleTbr_MouseLeftButtonDown" Background="Red">
<Grid x:Name="leapTcb_" Height="21" Width="26">
<Image x:Name="leapTcb" PreviewMouseLeftButtonDown="leapTcb_MouseLeftButtonDown">
<Image.Background>
<ImageBrush Source="Resources/leap_1.png"/>
</Image.Background>
</Image>
</Grid>
</Grid>
I create a button with image in my app:
<Button x:Name="favoriteButton" HorizontalAlignment="Left" VerticalAlignment="Top" Height="72" Width="99" Click="DidPressAddToFavorites" BorderBrush="{x:Null}" Foreground="{x:Null}">
<Button.Background>
<ImageBrush ImageSource="/Images/favouritesBWIcon#2x.png" Stretch="Uniform"/>
</Button.Background>
</Button>
And i noticed that when the user press the button all the button became blue and when i release the button i see it again. any idea how to fix it?
Edit:
This is the handler method:
private void DidPressAddToFavorites(object sender, RoutedEventArgs e)
{
if (favoriteRep.ExistInFavorites(currentItem) == true)
{
this.SetButtonWithImage(favoriteButton, "/Images/favouritesBWIcon#2x.png");
favoriteRep.RemoveFromFavorites(currentItem);
}
else
{
this.SetButtonWithImage(favoriteButton, "/Images/favouritesIcon#2x.png");
favoriteRep.AddToFavorites(currentItem);
}
}
Because you didn't add the States, there are three states Normal, MouseOver, Pressed... You have to set the image for all three states, to make it work of your wish. Here the alternate to do so, didn't know about any better way available from c#, all you have to do is to add two more eventHndlers Mouse over event and press event, then set the image in both of them....
Well there's another good way to do so is try template editing from blend Software