I am trying to have the location of an image change when I mouseover. I have:
<Image
Name="cat"
Source="CatRun.bmp"
Visibility="Hidden"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="100"
Height="100"
UIElement.MouseEnter="cat_MouseEnter"/>
in XAML and:
private void cat_MouseEnter(object sender, MouseEventArgs e)
{
}
in C#.
How can I set the location specifically on the canvas?
Here's an example:
<Canvas x:Name="canvas">
<Rectangle x:Name="rect" Width="20" Height="20" Canvas.Left="10" Canvas.Top="10" Fill="Blue" MouseEnter="RectangleMouseEnter" />
</Canvas>
You need to set the attached properties top, left (or bottom, right)
private void RectangleMouseEnter(object sender, MouseEventArgs e)
{
Canvas.SetTop(rect, 50);
Canvas.SetLeft(rect, 50);
}
In order to set position of the Image on the Canvas from code-behind you can use something like:
private void cat_MouseEnter(object sender, MouseEventArgs e)
{
Canvas.SetLeft(cat, 100); //set x coordinate of cat Image to 100
Canvas.SetTop(cat, 300); //set y coordinate of cat Image to 300
}
Update:
In some cases you may not be able to access cat object by name from that method. In order to make it work, just use the sender object that should be the Image that caused the event, as H.B. described in his comment.
Related
I am using scroll viewer to zoom the image which is set as background for Grid.When, I am setting the zoom factor value on button click from code behind with scrollViewer.ZoomToFactor(zoomFactor) image is getting zoomed from Top left corner ,not from the center position.
Please get the sample from the below link or below code snippet for your reference.
Link: https://github.com/ragulsv/ScrollViewer
Code Snippet[C#]:
float count = 1;
private void Clr_Click(object sender, RoutedEventArgs e)
{
count = 1;
viewer.ZoomToFactor(count);
viewer.RenderTransformOrigin = new Point(0.5, 0.5);
}
private void Btn_Click(object sender, RoutedEventArgs e)
{
viewer.ZoomToFactor(count);
viewer.RenderTransformOrigin = new Point(0.5, 0.5);
count += 1;
}
Code Snippet[Xaml]:
<Grid x:Name="grid1">
<Grid.RowDefinitions>
<RowDefinition Height="0.1*">
</RowDefinition>
<RowDefinition Height="0.1*">
</RowDefinition>
<RowDefinition Height="0.8*">
</RowDefinition>
</Grid.RowDefinitions>
<Button x:Name="btn" Grid.Row="0"></Button>
<Button x:Name="clr" Grid.Row="1"></Button>
<ScrollViewer x:Name="viewer" Grid.Row="2" ZoomMode="Enabled">
<Grid>
<Image Source="Assets\EditedImage.jpg" Height="190" Width="190"/>
</Grid>
</ScrollViewer>
</Grid>
How to zoom at center in scroll viewer while using ZoomToFactor to increase zoom level in button click
For this scenario, you could set Image's parent Grid VerticalAlignment="Center" HorizontalAlignment="Center" that could make the image always fix on the center of ScrollViewer and then call ChangeView method to edit ZoomFactor.
private void Btn_Click(object sender, RoutedEventArgs e)
{
viewer.ChangeView(0, 0, (viewer.ZoomFactor + 1f));
}
I can't get why my canvas doesn't get pointer events. Below my code and a part of the XAML layout:
XAML
<Canvas
x:Name="cPad"
Canvas.ZIndex="99"
Grid.Column="0"
PointerPressed="Pad_PointerPressed">
<Rectangle
x:Name="rPicker"
Width="24"
Height="24"
Stroke="Black"
Fill="White"
StrokeThickness="3"/>
</Canvas>
C#
private void Pad_PointerPressed(object sender, PointerRoutedEventArgs e)
{
cPad.CapturePointer(e.Pointer);
var point = e.GetCurrentPoint(cPad).Position;
Canvas.SetLeft(rPicker, point.X);
Canvas.SetTop(rPicker, point.Y);
e.Handled = true;
}
The problem that rPicker moves only if I click on rPicker... But I need to Pad_PointerPressed executes for any point on canvas. How can I make it?
Set Canvas.Background property to Transparent to enable PointerPressed events:
<Canvas
...
Background="Transparent"
>
...
</Canvas>
Basically, I'm trying to make the canvas listen for a touch input (tap) and will increment the number of taps on screen. It isn't working when I touch the screen on my device. I debugged my code and nothing seems out of the ordinary except that the touch is not detected. I checked ZIndex and the canvas is in front of the screen to be touchable. How do I make it work?
XAML:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Name="counter" FontSize="150" HorizontalAlignment="Center" TextWrapping="Wrap" Text="0" VerticalAlignment="Center" Margin="188,10,187,397"/>
<Button Content="Reset" HorizontalAlignment="Stretch" Margin="-18,535,-18,0" VerticalAlignment="Top" Click="Button_Click"/>
<Canvas ZIndex="0" Name="Canvas" HorizontalAlignment="Center" Height="535" VerticalAlignment="Top" Width="446" MouseLeftButtonDown="Canvas_MouseLeftButtonDown" MouseLeftButtonUp="Canvas_MouseLeftButtonUp" MouseLeave="Canvas_MouseLeave"/>
</Grid>
C#:
int taps = 0; // create var to detect number of times, user touches the screen
// Constructor
public MainPage()
{
InitializeComponent();
}
// method to register the touch as the finger is placed on the screen
private void Canvas_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
//Canvas c = sender as Canvas;
counter.Text = "TOUCHED!";
}
//method register the touch as the finger is lifting up from the screen
private void Canvas_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
//Canvas c = sender as Canvas;
taps++;
counter.Text = taps.ToString(); //convert var from int to string
}
//method register the touch as the finger leaves the area of the screen
private void Canvas_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
//Canvas c = sender as Canvas;
MessageBox.Show("You left the screen without lifting your finger. That does not count as a tap!", "Caution!", MessageBoxButton.OK);
}
// method to reset the counter to zero when button is pressed and released
private void Button_Click(object sender, RoutedEventArgs e)
{
taps = 0; // reset the count
counter.Text = taps.ToString(); // convert var from int to string
}
I don't know why you want to do it with Canvas - it won't work as you have nothing in this Canvas, so it can't register your click/tap, Canvas is also hard to adjust to screen. I think it can be done simpler way if you want to do it with MouseUp/Down - subscribe directly to Grid containing your elements instead of filling this Grid with additional Canvas:
In XAML:
<Grid x:Name="ContentPanel" Margin="12,0,12,0" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="7*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Name="counter" FontSize="150" HorizontalAlignment="Center" TextWrapping="Wrap" Text="0" VerticalAlignment="Center" Grid.Row="0"/>
<Button Content="Reset" HorizontalAlignment="Stretch" VerticalAlignment="Center" Click="Button_Click" Grid.Row="1"/>
<TextBlock Name="Touched" FontSize="50" HorizontalAlignment="Center" TextWrapping="Wrap" Text="Touched" VerticalAlignment="Center" Visibility="Collapsed" Grid.Row="2"/>
</Grid>
In code behind:
private int taps = 0;
public MainPage()
{
InitializeComponent();
ContentPanel.MouseLeftButtonDown += ContentPanel_MouseLeftButtonDown;
ContentPanel.MouseLeftButtonUp += ContentPanel_MouseLeftButtonUp;
}
private void ContentPanel_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
taps++;
counter.Text = taps.ToString(); //convert var from int to string
Touched.Visibility = Visibility.Collapsed;
}
private void ContentPanel_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
Touched.Visibility = Visibility.Visible;
}
// method to reset the counter to zero when button is pressed and released
private void Button_Click(object sender, RoutedEventArgs e)
{
taps = 0; // reset the count
counter.Text = taps.ToString(); // convert var from int to string
}
As you can see I've subscribed to Grid events (which covers whole screen) - but to make it work I had to set its Background Brush to Transparent, otherwise it will work only if you touch text.
There are many other ways to make your App work, but I hope this will help.
Is there a reason why you don't use the touch-events?
Instead of using MouseLeftButtonDown and MouseLeftButtonUp you should use TouchDown and TouchUp.
Only when you don't handle the touch events or the manipulation events they will be mapped to mouse events. In my experience with touch a single tap also not always gets mapped to MouseLeftButtonDown. As far as I know you could also with mouse events only recoginse one finger. When you want to count more fingers it's necessary to use the TouchDown/TouchUp events.
The problem lies in the overlapping style of the grid
so either make grid rows or define a stackpanel inside the grid, something like this.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<stackpanel>
<TextBlock Name="counter" FontSize="150" HorizontalAlignment="Center" TextWrapping="Wrap" Text="0" Margin="0,0,0,0"/>
<Canvas ZIndex="0" Name="Canvas" HorizontalAlignment="Center" Height="535" VerticalAlignment="Top" Width="446" MouseLeftButtonDown="Canvas_MouseLeftButtonDown" MouseLeftButtonUp="Canvas_MouseLeftButtonUp" MouseLeave="Canvas_MouseLeave"/>
<Button Content="Reset" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Top" Click="Button_Click"/>
</stackpanel>
</Grid>
Try and check now.
You should set your Background property. If you don't want any background set it to Transparent:
<Canvas ZIndex="99" Background="Transparent" Name="Canvas" HorizontalAlignment="Center" Height="535" VerticalAlignment="Top" Width="446" Tapped="Canvas_CountMyTaps"/>
(If you want the canvas to be on Top be sure to make it have a greater ZIndex than the other elements that it overlaps)
If not set (the default value is null) the element won't capture any taps/click etc, it will be as if they "fall through".
Also, consider using the Tapped event which is a "higher level" event that will respond to clicks, taps with the finger, stylus, etc.
I want to add some images or controls dynamically in my canvas control and for each control I want to get its gesture event. How I Would I get that what will be the best approach.
void AddText()
{
TextBlock name = new TextBlock();
name.Text = "This is text " + Count;
Random rnd1 = new Random();
name.Width = rnd1.Next(0, 400);
name.Height = rnd1.Next(0, 800);
var gl = GestureService.GetGestureListener(name);
gl.Tap += new EventHandler<GestureEventArgs>(GestureListener_Tap);
gl.Hold += new EventHandler<GestureEventArgs>(GestureListener_Hold);
canvas1.Children.Add(name);
}
private void GestureListener_Tap(object sender, GestureEventArgs e)
{
MessageBox.Show("I Am Tapped");
}
private void GestureListener_Hold(object sender, GestureEventArgs e)
{
MessageBox.Show("I Am Holded");
}
But in this way my all controls are placed on same place even I used random function for thier width and height. And other thing when I tap on any textblock that i created with this way. It calls all gesture events.
Unlike StackPanel, Canvas control behaves like absolute positioning in HTML/CSS. Each element will be given its own specific location on the page. With elements absolutely positioned, they don’t adjust. Elements will overlap, without having any positioning-related effect on its neighbors.
<Canvas>
<Rectangle Fill="Red" Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" />
<Rectangle Fill="Orange" Width="100" Height="100" Canvas.Top="100" Canvas.Left="200" />
<Rectangle Fill="Green" Width="100" Height="100" Canvas.Top="200" Canvas.Left="100" />
<Rectangle Fill="Blue" Width="100" Height="100" Canvas.Top="200" Canvas.Left="200" />
</Canvas>
For each element in your Canvas, you will need to specify the Canvas.Top and Canvas.Left properties. Omitting these values will result in your elements being positioned in the top left corner of the Canvas, at position 0,0.
So you need to provide Left and Top properties as shown below,
Canvas.SetLeft(name, 50);
Canvas.SetTop(name, 100);
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".