Everything seems to be simple and there are quite a few tutorials, but I cannot transfer data (in my case, an image) to a wpf window element. I was able to implement the transfer of an image from one element to another. But when I capture an image (for example, a desktop), when I transfer it to the desired element, the transfer option does not even appear, only a crossed-out circle and does not work out more than one event associated with drop (as if AllowDrop = false)
My code:
XAML
<Image x:Name="mainContent" Grid.Column="1" Stretch="Fill" AllowDrop="True" Drop="MainContent_Drop" />
C#
private void SpImageLeft_MouseDown(object sender, MouseButtonEventArgs e)
{
Image image = sender as Image;
DragDrop.DoDragDrop(image, image, DragDropEffects.Copy);
}
private void MainContent_Drop(object sender, DragEventArgs e)
{
Image image = (Image)e.Data.GetData(typeof(Image));
mainContent.Source = image.Source;
}
I understand that when I take an image from explorer it will be different there, something like this, but it still does not even show that you can add an image
private void MainContent_Drop(object sender, DragEventArgs e)
{
string[] arr = (string[])e.Data.GetData(DataFormats.FileDrop);
mainContent.Source = (ImageSource)new ImageSourceConverter().ConvertFromString(arr[0]);
}
The following worked for me as a Drop event handler for an Image control:
private void OnMainImageDrop(object sender, DragEventArgs e)
{
if (sender is Image image && e.Data.GetDataPresent(DataFormats.FileDrop))
{
if (e.Data.GetData(DataFormats.FileDrop) is string[] filePaths)
{
image.Source.Freeze();
string filePath = filePaths[0];
var uriSource = new Uri(filePath);
var imageSource = new BitmapImage(uriSource);
image.Source = imageSource;
}
}
}
I used a placeholder image to make sure the image had a size and served as a mouse hover surface.
XAML:
<Image x:Name="MainImage" Grid.Row="1"
Source="Images/DotNetLogo.png"
Stretch="Uniform"
AllowDrop="True" Drop="OnMainImageDrop"/>
Related
How can I enlarge image in C# (exactly in UWP) after clicking on it?
I tried few things:
1) I tried to add button, with image content, what I want to enlarge, and then I added event Click. But I don't know what I should to add into that code.
2) i also tried to add image directly to my XAML page, and I wanted to create Tapped event, but again, I don't know what I should to add into that code.
I just want to create a small photogallery, so after clicking on image thumbnail will be opened larger image.
Or if there is any possibility to add pdf files, you can write it too. That's another solution of my problem.
You could enlarge the Image by settings its RenderTransform property to a ScaleTransform:
private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
Image image = sender as Image;
image.RenderTransform = new ScaleTransform() { ScaleX = 2, ScaleY = 2 };
}
<Image Source="ms-appx:///Assets/pic.png" Tapped="Image_Tapped" Stretch="None" />
The ScaleX and ScaleY properties gets or sets the scaling factor. Please refer to the MSDN documentation for more information: https://msdn.microsoft.com/library/windows/apps/br242940?f=255&MSPPError=-2147217396
Looks good, but there is a problem. When I add more images, like into GridView, they are overlapping, and highlighted. Images can overlap, but image, which I click should be always on top...
You could put the tapped Image in a Popup then and then for example add it back to its original Panel when it is tapped again. I put together an example that should give you the idea and something to build on:
private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
Image image = sender as Image;
Panel parent = image.Parent as Panel;
if (parent != null)
{
image.RenderTransform = new ScaleTransform() { ScaleX = 2, ScaleY = 2 };
parent.Children.Remove(image);
parent.Children.Add(new Popup() { Child = image, IsOpen = true, Tag = parent });
}
else
{
Popup popup = image.Parent as Popup;
popup.Child = null;
Panel panel = popup.Tag as Panel;
image.RenderTransform = null;
panel.Children.Add(image);
}
}
<GridView SelectionMode="None" isItemClickEnabled="True">
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="ms-appx:///Assets/pic.png" Tapped="Image_Tapped" Stretch="None" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
i have included four photos in xaml code as follows
<Image Grid.Column="0"
Source="Assets/1.png"
Name="m1"
MouseLeftButtonDown="selected"/>
<Image Grid.Column="1"
Source="Assets/2.png"
Name="m2"
MouseLeftButtonDown="selected"/>
<Image Grid.Column="2"
Source="Assets/3.png"
Name="m3"
MouseLeftButtonDown="selected"/>
<Image Grid.Column="3"
Source="Assets/4.png"
Name="m4"
MouseLeftButtonDown="selected"/>
i want to get the source of the image in "selected" function.
my selected function is as follows
private void selected(object sender, MouseButtonEventArgs e)
{
//do somethings....
}
How can i assign the source of the selected image(sender) to a new Image object?.
something similar to follows
Image newimage = new Image();
newimage.Source = //something..
Is there a way to dynamically get the source?
Cast your sender as an image and you will be able to use the Source property:
private void selected(object sender, MouseButtonEventArgs e)
{
Image newimage = new Image();
newimage.Source = ((Image)sender).Source;
}
Use OriginalSource property of event and cast it to Image:
var clickedImage = (Image)e.OriginalSource;
Image newimage = new Image();
newimage.Source = clickedImage.Source;
i have a .mov file that i want to play using MediaElement of WPF , i can play and pause with no worries as i use MediaState.Manual , but i want to show the first image or frame of the video when i load it , the source is set in code behind , i tried MediaElement.ScrubbingEnabled = true both code behind and xaml but it still doesn't show.
Here is my code ( xaml side ) :
<DockPanel Height="386" HorizontalAlignment="Center" Name="dockPanel1" VerticalAlignment="Top" Width="731">
<MediaElement Name="McMediaElement" LoadedBehavior="Manual" UnloadedBehavior="Manual" Stretch="Fill" MediaOpened="Element_MediaOpened" MediaEnded="Element_MediaEnded" OpacityMask="#FF040410" Height="386" IsVisibleChanged="SingAlong_IsVisibleChanged" ScrubbingEnabled="True"></MediaElement>
</DockPanel>
Code behind ( xaml.cs) :
private void PlayAudio()
{
McMediaElement.LoadedBehavior = MediaState.Manual;
McMediaElement.Source = new Uri("../../SingAlong/GrassHopper and Ants/ants2.mov", UriKind.RelativeOrAbsolute);
McMediaElement.ScrubbingEnabled = true;
McMediaElement.Play();
}
private void button1_Click_1(object sender, RoutedEventArgs e) // Play button
{
if (McMediaElement.Source != null)
{
McMediaElement.Play();
}
else
PlayAudio();
}
private void button2_Click(object sender, RoutedEventArgs e) // Pause button
{
McMediaElement.Pause();
}
From what I can gather, you are loading your video (setting the Source) only when you click button1, yet you want the first frame to show before this happens. To accomplish this, you will have to load your video in another method, preferably when your Page or Window loads. Then you can do the following:
McMediaElement.ScrubbingEnabled = true;
McMediaElement.Play();
McMediaElement.Pause();
I am trying to find a way to Drag & drop between Listbox items and chess board using WPF. I have a listbox on the left and a chess board on the right. How can I drag an item then drag into one or more squares of the chess board. Then click to the square, some information about the items here will be shown. I appreciate it if someone can help me? Thanks to everyone.
I think that this helps you: http://www.c-sharpcorner.com/uploadfile/dpatra/drag-and-drop-item-in-listbox-in-wpf/
Hi here is a way to get you in the right direction
http://johnnblade.wordpress.com/2012/06/12/drag-and-drop-grid-control-row-devexpress-wpf/
let me know may u have more questions
Here is wat i hv done ..but here i drag the files from desktop to my listbox
` public MainPage()
{
InitializeComponent();
CompositionTarget.Rendering +=new EventHandler(CompositionTarget_Rendering);
FileBoard.Drop += new DragEventHandler(FileBoard_Drop);
}
`
when you drag element
void FileBoard_Drop(object sender, DragEventArgs e)
{
if (e.Data != null)
{
FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];
foreach (FileInfo fi in files)
{
_files.Enqueue(fi);
}
}
}
create a list DATAinGrid
using CompositionTargetRendering u can deque the files
private void CompositionTarget_Rendering(Object sender, EventArgs e)
{
if (_files.Count != 0)
{
// Create a photo
FileInfo fi = _files.Dequeue();
}
}
and then allocate the itemsource to ur board or chess box item...try modifying the code i think u will get it
This is old but I found a KISS solution to this.
Create your chess board grid using TextBlocks or images in a grid.
Create a model for the data to be passed.
in the xml do this:
<TextBlock x:Name="myname" x:Uid="myname" Grid.Row="0" Grid.Column="1" Margin="3" Text="{Binding myfield}" Style="{DynamicResource myStyle}" AllowDrop="True" Drop="Square_Drop"/>
<TextBlock x:Name="myname" x:Uid="myname" Grid.Row="1" Grid.Column="1" Margin="3" Text="{Binding myfield}" Style="{DynamicResource myStyle}" AllowDrop="True" Drop="Square_Drop"/>
//etc etc etc
<ListBox x:Name="myListBox" x:Uid="myListBox"
ItemContainerStyle="{DynamicResource myListBoxListItemStyle}" Margin="10"
DisplayMemberPath="myField"
PreviewMouseLeftButtonDown="List_PreviewMouseLeftButtonDown">
I would strongly recommend you use a resource for the styling of the TextBlock/Image squares. (one for white, one for black!)
Learn how here
Then in your c# behind you will need:
private void List_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (myListBox.SelectedItem != null)
{
ListBox parent = (ListBox)sender;
myModel data = parent.SelectedItem as myModel;
if (data != null)
{
DragDrop.DoDragDrop(parent, data, DragDropEffects.Move);
}
}
}
private void Square_Drop(object sender, DragEventArgs e)
{
MyModel data = e.Data.GetData(typeof(MyModel)) as MyModel;
TextBlock tb = sender as TextBlock;
tb.DataContext = data;
//Add any database update code here
refreshInterface();
}
I'm trying to drag and drop an image from one spot on the canvas to another (should be relatively simple), but can't figure it out. The image which I want to move has the following XAML:
<Image Height="28" HorizontalAlignment="Left" Margin="842,332,0,0" Name="cityImage" Stretch="Fill" VerticalAlignment="Top" Width="42" Source="/Settlers;component/Images/city.png" MouseLeftButtonDown="cityImage_MouseLeftButtonDown" MouseMove="cityImage_MouseMove" MouseLeftButtonUp="cityImage_MouseLeftButtonUp"/>
The code is as follows:
bool isDragging = false; Point initMousePos; private void cityImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
isDragging = true;
initMousePos = e.GetPosition(theGrid); } private void cityImage_MouseMove(object sender, MouseEventArgs e) {
if (isDragging)
{
Image image = sender as Image;
Canvas.SetTop(image, initMousePos.X);
Canvas.SetLeft(image, initMousePos.Y);
image.Visibility = System.Windows.Visibility.Visible;
} }
private void cityImage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) {
isDragging = false; }
What I do to accomplish what you want is to use
System.Windows.Controls.Primitives.Thumb
as the Root of a UserControl and set the ControlTemplate to display an image (within a border but it should work without as well), something like:
<Thumb Name="myRoot" DragDelta="MyRootDragDelta">
<Thumb.Template>
<ControlTemplate>
<Image ... >
... see below ...
</Image>
</ControlTemplate>
</Thumb.Template>
</Thumb>
Also, I bind the Source of the Image to a property of the class:
<Image.Source>
<Binding Path="ImageSource" RelativeSource=
{RelativeSource FindAncestor,
AncestorType=my:MyImageControl, AncestorLevel=1}" />
</Image.Source>
The UserControl has a named TranslateTransform (let's say translateTransform) whose properties X and Y are to be set in the DragDelta event handler:
private void MyRootDragDelta(object sender, DragDeltaEventArgs e)
{
translateTransform.X += e.HorizontalChange;
translateTransform.Y += e.VerticalChange;
}
Don't forget to add:
public ImageSource ImageSource { get; set; }
Hope this helps. If anything's unclear feel free to ask further.
You want to set the Left and Top properties of the Canvas to something other than the initial position. In the MouseMove handler you have to get the position relative to the parent. Also; make sure the parent element is a canvas and not a grid. You have a pretty big left and top margin on the image, aswell as a control with the variable name "theGrid".