We Keep Coding

Selecting image from StackPanel C# UWP (Adding action listener to UIElement and Image to UIElement)

I am using C# and I am creating UWP app.
I am using Windons.Ui.Xaml.Controls.Image and I have created follwoing code which lists my images
UxHelpers.DispatchToASTAThread(
async () =>
{
imageIndex++;
StackPanel stackPanel = new StackPanel();
stackPanel.Children.Add(image);
}
this.Results.Children.Add(stackPanel);
}).Forget();
This is in for loop, and I want when user clicks on certain image to be able to save it.
I have code for saving, I just don't know how to add mouse listener to each image, so that it is marked when I move mouse over it (So user knows that by clicking on it something will happen) and when he clicks I want it to call my function with this pictures index....
I have looked at UIElement but i still can't figure it out.
Thanks!!

We can add the PointerEntered event to the Image control that when the user move mouse over it then we can change the UI. Then we can add the Tapped event to the Image control, if the user click on it, it will be fired.
To get the index of the Image, we can set the index to the Name property of the Image.
For example:
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
StackPanel stackPanel = new StackPanel();
for (int i = 0; i < 3; i++)
{
Windows.Storage.Streams.IRandomAccessStream random = await Windows.Storage.Streams.RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/sun2set.jpg")).OpenReadAsync();
Image image = new Image();
BitmapImage bitmapImage = new BitmapImage();
StackPanel mystackPanel = new StackPanel();
image.Name = i.ToString();
bitmapImage.SetSource(random);
image.Source = bitmapImage;
mystackPanel.Children.Add(image);
image.PointerEntered += Image_PointerEntered;
image.PointerExited += Image_PointerExited;
stackPanel.Children.Add(mystackPanel);
}
this.Results.Children.Add(stackPanel);
}
private void Image_PointerExited(object sender, PointerRoutedEventArgs e)
{
var image = sender as Image;
var parent = VisualTreeHelper.GetParent(image) as StackPanel;
parent.BorderBrush = new SolidColorBrush(Colors.Red);
parent.BorderThickness = new Thickness(0);
image.Tapped -= Image_Tapped;
}
private void Image_PointerEntered(object sender, PointerRoutedEventArgs e)
{
var image = sender as Image;
Debug.WriteLine("The" + image.Name + "is Selected!");
var parent = VisualTreeHelper.GetParent(image) as StackPanel;
parent.BorderBrush = new SolidColorBrush(Colors.Red);
parent.BorderThickness = new Thickness(5);
image.Tapped += Image_Tapped;
}
private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
var image = sender as Image;
//download the image
}

how to make user control draggable only from specific places

im working now on a UserControl which ive made draggable using the code below (which is quite known and used). This UserControl looks and is used in a similar to MessageBox (the gray color and the blue rectangle) , the task is to make this UserControl draggable only from the blue rectangle just as any MessageBox , not as its now draggable from any place inside it!
any suggestions on how to be able to do this? thanks in advance!
below the code used to drag the UserControl
public UserControl1(Data data, Settings settings)
{
InitializeComponent();
MouseLeftButtonDown += new MouseButtonEventHandler(root_MouseLeftButtonDown);
MouseLeftButtonUp += new MouseButtonEventHandler(root_MouseLeftButtonUp);
MouseMove += new MouseEventHandler(root_MouseMove);
}
...
private void root_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var element = sender as FrameworkElement;
anchorPoint = e.GetPosition(null);
element.CaptureMouse();
isInDrag = true;
e.Handled = true;
}
private void root_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
if (isInDrag)
{
var element = sender as FrameworkElement;
element.ReleaseMouseCapture();
isInDrag = false;
e.Handled = true;
}
}
private void root_MouseMove(object sender, MouseEventArgs e)
{
if (isInDrag)
{
var element = sender as FrameworkElement;
currentPoint = e.GetPosition(null);
UIElement parentElement = (UIElement)this.Parent;
maxHeightParent = parentElement.RenderSize.Height;
maxWidthParent = parentElement.RenderSize.Width;
maxHeight = RenderSize.Height;
maxWidth = RenderSize.Width;
//Window.ActualHeightProperty
//element.ActualHeight
transform.X += (currentPoint.X - anchorPoint.X);
transform.Y += (currentPoint.Y - anchorPoint.Y);
this.RenderTransform = transform;
anchorPoint = currentPoint;
}
}
}

Two ways to solve this, which are actually the same way with different syntax:
Via code - in the constructor, instead of
MouseLeftButtonDown += new MouseButtonEventHandler(root_MouseLeftButtonDown);
MouseLeftButtonUp += new MouseButtonEventHandler(root_MouseLeftButtonUp);
MouseMove += new MouseEventHandler(root_MouseMove);
use
myBlueRect.MouseLeftButtonDown +=
new MouseButtonEventHandler(root_MouseLeftButtonDown);`
myBlueRect.MouseLeftButtonUp +=
new MouseButtonEventHandler(root_MouseLeftButtonUp);
myBlueRect.MouseMove += new MouseEventHandler(root_MouseMove);
Via XAML - in the tag of the relevant element that you want to grag from (lets say it's a Grid):
<Grid x:Name="myBlueRect"
MouseLeftButtonDown="root_MouseLeftButtonDown"
MouseLeftButtonUp="root_MouseLeftButtonUp"
MouseMove="root_MouseMove"
.../>

Two basic options I think about:
Inside your UserControl make the rectangle a Border (or other control), and put the events on this Border and not on the UserControl.
If from some reason you do want the events to be on the UserControl, put a Hidden Border on the place of the rectangle, and in the event do the dragging only if the mouse is over this Border.

I'm trying to show the current image in the pictureBox and stretch it but it's not showing anything why?

In For1 i have this code:
private void timer1_Tick(object sender, EventArgs e)
{
try
{
this.pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
pictureBox1.Load(file_array_satellite[file_indxs_satellite]);
file_indxs_satellite = file_indxs_satellite - 1;
if (file_indxs_satellite < 0)
{
file_indxs_satellite = file_array_satellite.Length - 1;
}
}
catch
{
timer1.Enabled = false;
}
}
private void satellitesToolStripMenuItem_Click(object sender, EventArgs e)
{
file_array_satellite = Directory.GetFiles(UrlsPath, "RainImage*.*");
if (file_array_satellite.Length > 0)
{
DateTime[] creationTimes8 = new DateTime[file_array_satellite.Length];
for (int i = 0; i < file_array_satellite.Length; i++)
creationTimes8[i] = new FileInfo(file_array_satellite[i]).CreationTime;
Array.Sort(creationTimes8, file_array_satellite);
file_indxs_satellite = 0;
file_indxs_satellite = file_array_satellite.Length - 1;
timer1.Enabled = true;
}
}
private void pictureBox1_MouseEnter(object sender, EventArgs e)
{
this.pictureBox1.Size = new Size(500, 500);
pictureBox1.Location = new Point(this.Bounds.Width / 2,
this.Bounds.Height / 2);
this.pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
pictureBox1.BringToFront();
}
private void pictureBox1_MouseLeave(object sender, EventArgs e)
{
this.pictureBox1.Size = new Size(100, 100);
pictureBox1.Location = new Point(12,
27);
}
In the original the picturebox1 size is 100x100 and each image i stretch to fit in the pictureBox.
When it's 100x100 everything is ok i see the animation of each image in the pictureBox.
Now i did an event that when i enter with the mouse to the pictureBox area it should move to the center of the form resize to 500x500 stretch the images and show the same animation.
And when i leave the pictureBox area it should return to it's original size and location.
When i enter with the mouse to the pictureBox1 area the pictureBox just vanish i don't see it anywhere once i leave the pictureBox area i see it 100x100 in it's original place and size.
Why when i enter with the mouse to the pictureBox1 area it's vanish i don't see it in the center of the form on size 500x500 ?
file_array_satellite is string[] and file_indxs_satellite is int.
RainImage*.* are the files names on the hard disk after downloaded them.
The idea is not to convert/change the files sizes on the hard disk each time i enter or leave so i wanted that once i enter the pictureBox1 area it will stretch the current image in the pictureBox and show it . It's working when it's 100x100 but not on 500x500.

When you mouse over the PictureBox and move it to the center of the form, you are moving it out from under the mouse cursor. This causes the MouseLeave event to immediately trigger, which places it back under your mouse cursor again, which causes the MouseEnter event to trigger again, etc.
You can do something like this:
bool suppressMouseLeave;
private void pictureBox1_MouseEnter(object sender, EventArgs e)
{
suppressMouseLeave = true;
this.pictureBox1.Size = new Size(500, 500);
pictureBox1.Location = new Point(this.Bounds.Width / 2,
this.Bounds.Height / 2);
this.pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
pictureBox1.BringToFront();
//point the cursor to the new Position so that it's still kept on the pictureBox1
//This is important because it makes your idea acceptable.
//Otherwise you have to move your mouse onto your pictureBox and leave the
//mouse from it then to restore the pictureBox
Cursor.Position = PointToScreen(new Point(pictureBox1.Left + 250, pictureBox1.Top + 250));
suppressMouseLeave = false;
}
private void pictureBox1_MouseLeave(object sender, EventArgs e)
{
if(suppressMouseLeave) return;
this.pictureBox1.Size = new Size(100, 100);
pictureBox1.Location = new Point(12, 27);
}

I would venture a guess that this.Bounds.Width and this.Bounds.Height are not what you expect them to be, so the PictureBox isn't vanishing, you are just setting it to some location that is offscreen/off your form. Run Visual Studio in Debug mode and put a breakpoint around that line and see what this.Bounds is equal to. This may give you a clue as to the proper location you need to set.

How about in "in place" zoom like this?
private void pictureBox1_MouseEnter(object sender, EventArgs e)
{
Rectangle rc = pictureBox1.Bounds;
rc.Inflate(200, 200);
pictureBox1.Bounds = rc;
pictureBox1.BringToFront();
}
private void pictureBox1_MouseLeave(object sender, EventArgs e)
{
Rectangle rc = pictureBox1.Bounds;
rc.Inflate(-200, -200);
pictureBox1.Bounds = rc;
}

How can i make the Canvas in a event visible?

i have following problem, i want to generate a little canvas by a button click, after generating i want to move it by a key press event but i cant see the canvas in the event. How can i make it visible? (In the sourcecode of WPF not in XAML)
public void Button_Click_1(object sender, RoutedEventArgs e)
{
Canvas c = new Canvas();
c.Height = System.Windows.SystemParameters.PrimaryScreenHeight;
c.Width = System.Windows.SystemParameters.PrimaryScreenWidth;
c.Loaded += c_Loaded;
Grid.Children.Add(c);
Canvas ship = new Canvas();
ship.Background = Brushes.Aquamarine;
ship.Height = 30;
ship.Width = 30;
ship.KeyDown += ship_KeyDown;
Canvas.SetTop(ship, 50);
c.Children.Add(ship);
}
void ship_KeyDown(object sender, KeyEventArgs e)
{
canvas.Setleft(ship, canvas.Getleft(ship) +10); //here i can not see the object "ship" :(
}

Use parameter sender:
Canvas ship = (Canvas) sender;

You would need to add you c or ship to the layoutroot`

The easiest way is to add it to a <list> of UIElement and modify it with a foreach-loop

EventHandlers for UIButton fail to assign to off screen elements in MonoTouch

I have a list of buttons that show up in a UIView that's assigned to a UIScrollView. Before I add them to the UIView that eventually gets added to the UIScrollView, I assign a TouchUpInside event handler to each one.
The problem that I have is, when I scroll down in the list, all of the UIButtons below the viewable area don't fire the event handler.
I tried removing the event handlers and reassigning them on the Scroll event of the UIScrollView but still nothing. What am I missing?

I have reproduced your case in this test controller. The UIButtons that fall under the view area successfully trigger the TouchUpInside event. Maybe you can compare with your own code and see the difference. (include statements has been left out)
public class ScrollController : UIViewController
{
UIScrollView scroll;
List<UIButton> buttons;
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
scroll = new UIScrollView();
scroll.Frame = View.Bounds;
View.AddSubview(scroll);
scroll.ContentSize = new SizeF(0, 1000);
buttons = new List<UIButton>();
for(int i = 0; i < 10; i++)
{
var button = CreateButton(i * 75, i.ToString());
buttons.Add(button);
scroll.AddSubview(button);
}
}
UIButton CreateButton(float y, string title)
{
var button = UIButton.FromType(UIButtonType.RoundedRect);
button.SetTitle(title, UIControlState.Normal);
button.Frame = new System.Drawing.RectangleF(0, y, 200, 50);
button.TouchUpInside += HandleButtonTouchUpInside;
return button;
}
void HandleButtonTouchUpInside (object sender, EventArgs e)
{
var button = sender as UIButton;
Console.WriteLine("{0} touched", button.Title(UIControlState.Normal));
}
}