Move Image on window WPF - wpf

Here is my code :
<Image x:Name="Layer_22_copy" Height="542" Canvas.Left="16" Opacity="0.522" Source="gammon2_Images\Layer 22 copy.png" Canvas.Top="13" Width="315"/>
how can i change position of this image on Code Behind?
i am new in WPF.
thank you.

Layer_22_copy.SetValue(Canvas.TopProperty, newTopValue);
Layer_22_copy.SetValue(Canvas.LeftProperty, newLeftValue);

You can set the Margin Property like
Layer_22_copy.Margin = new Thickness(10, 30, 0, 0);

Related

How to draw a circle in silverlight using coordinates?

I am making an application in Silverlight. In that application I want to draw a circle at runtime using coordinates. I have drawn the circle dynamically but I want to that circle at specific co-ordinates(X,Y). But I am not getting that.
Please help me. Thanks in advance.
Ellipse ellipse = new Ellipse() { Width = 150, Height = 150, Stroke = new SolidColorBrush(Colors.Black),
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center
};
ellipse.SetValue(Grid.RowProperty, 0);
ellipse.SetValue(Grid.ColumnProperty, 0);
this.LayoutRoot.Children.Add(ellipse);
TextBlock textblock = new TextBlock() { Text = "Hello", HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center };
textblock.SetValue(Grid.ColumnProperty, 0);
textblock.SetValue(Grid.RowProperty, 0);
this.LayoutRoot.Children.Add(textblock);
And have a look in below sites.....
http://pietschsoft.com/post/2010/06/28/Silverlight-Bing-Maps-Draw-Circle-Around-Latitude-Longitude-Location.aspx
http://www.kunal-chowdhury.com/2011/07/how-to-create-circular-loader-using.html
HOpe this post will help you to solve your problem... If so please mark it answer...
To achieve this, use a canvas container and set the Canvas.Left and Canvas.Top attributes on the ellipse. See http://msdn.microsoft.com/en-us/library/system.windows.controls.canvas.left(v=vs.95).aspx (and the corresponding Canvas.Top article) for more information.

WPF Margin Thickness

Background:
I'm loading images into a Stack Panel (called MainStack) displayed horizontally (for argument sake, 10 images) with only room for 4 images in view. As I load the images from the List I'm setting the width of each to 300 so they're all in the same size box.
I want to move the images from right to left using the Stack Panel's Margin (left) property. I want the appearance of scrolling left by exactly the same amount of the width of each image (looped with 4 second delay) until the last image is in view. Here's my code for the Margin animation:
Dim result As New Storyboard
Dim animation As New ThicknessAnimation
animation.From = MainStack.Margin
animation.EasingFunction = New PowerEase() With {.EasingMode = EasingMode.EaseInOut, .Power = 3}
animation.To = New Thickness(-300, 0, 0, 0)
animation.Duration = New Duration(TimeSpan.FromSeconds(1.5))
Storyboard.SetTarget(animation, MainStack)
Storyboard.SetTargetProperty(animation, New PropertyPath("Margin"))
result.Children.Add(animation)
result.Begin()
Strange thing is happening. The Stack Panel is moving to the left but only by about half the width of the image.
What is going on?!?
/* edit */
As per H.B. suggestion, I've tried to implement a TranslateTransform but not having much success.
Can anyone see any problems with this code?
Dim translatePosition = New Point(300, 0)
RenderTransform = New TranslateTransform()
Dim d As New Duration(New TimeSpan(0, 0, 0, 1, 30))
Dim x As New DoubleAnimation(translatePosition.X, d)
Storyboard.SetTarget(x, MainStack)
Storyboard.SetTargetProperty(x, New PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"))
Dim sb As New Storyboard()
sb.Children.Add(x)
sb.Begin()
Nothing seems to be happening.
Ben
I think you should try putting your entire stackpanel in a canvas and just animating the Canvas.Left property to scroll the images.
Another option for you is to use a horizontal ListBox, then you can animate the ScrollViewer. If you want to try it this way, here's a link that may help: WPF - Animate ListBox.ScrollViewer.HorizontalOffset?.

WPF, C#: Draw a line onto existing bitmap in image control

I have a bitmap image in an image control
I need to draw a red line on the bitmap each time I click with the mouse onto it, at the place where I clicked the mouse.
I first thought of creating a Line object, but found out, that I cannot add the Line. I would need a canvas. But if I put my image in a canvas, my bitmap does not stretch over the whole canvas (I found out, that the coordinates of the bitmap determine the place on the canvas, so my bitmap is wrongly displayed.)
Then I tried using graphics
Graphics graphics = Graphics.FromImage(bitmapImg);
graphics.DrawLine(new System.Drawing.Pen(System.Drawing.Color.Red), 0, 0, bitmapImg.Width, bitmapImg.Height); //not the line yet, just for testing
graphics.DrawImage(bitmapImg, 0, 0, bitmapImg.Width,bitmapImg.Height);
graphics.Dispose();
However, I don`t get anything painted onto my bitmap........
Now I think, I probably have to get the bitmap into an array and then change the pixel color to get the line in the bitmap. I believe, that this would be very slow.
I am now trying something with visualDrawing, however, I have not got it to work yet:-(
What is a good way to get a line onto an existing bitmap in WPF C#???? and how to remove it?
I would be glad for any help! Thank you! I posted it already on the MS forum page, but no answer so far.
When you do Graphics.FromImage, this Graphics class (and also the System.Drawing.Pen) do not belong to WPF, they are part from WinForms and they are internally using Windows' GDI+ calls to draw and cannot draw on top of WPF.
If you didn't got an error when compiling the first line of your code, then probably your bitmapImg is a System.Drawing.Image (from WinForms) not an Image control from WPF (System.Window.Controls.Image).
As adrianm mentioned, the easiest way will probably be to use a Grid:
<Grid>
<Image Source="your image" />
<Line Name="line" Visibility="Hidden" Stroke="Red" StrokeThickness="1" />
</Grid>
Then, in your click event handler you can make the line visible and give it the coordinates you want:
line.Visibility = Visible;
line.X1 = mouse_x;
line.Y1 = mouse_y;
line.X2 = ...;
line.Y2 = ...;
You can place a canvas with the background as transparent on top of your BitmapImage and then draw the line as required.
Code from xaml file:
<Grid>
<Image Source="C:\Users\sm143444\Desktop\download.jpg" />
<Canvas Background="Transparent" x:Name="draw" />
</Grid>
Code from Xaml.cs:
public MainWindow()
{
InitializeComponent();
Point startPoint = new Point(50, 50);
Line newLine = new Line();
newLine.Stroke = Brushes.Black;
newLine.Fill = Brushes.Black;
newLine.StrokeLineJoin = PenLineJoin.Bevel;
newLine.X1 = startPoint.X;
newLine.Y1 = startPoint.Y;
newLine.X2 = startPoint.X + 100;
newLine.Y2 = startPoint.Y + 100;
newLine.StrokeThickness = 2;
this.draw.Children.Add(newLine);
}
output
Or you can even add a ZIndex to your image and Line so that they are laid on different layers on canvas.

How to remove the border of a Button in code?

I am developing a windows phone 7 application. I am new to windows phone 7 applications. In my application I have created a button control dynamically and added the background image to the button control as follows.
Button AlphabetButton = new Button();
AlphabetButton.Content = vAlphabet;
ImageBrush brush = new ImageBrush();
brush.ImageSource = new BitmapImage(new Uri("button_off.png", UriKind.Relative));
//brush.Stretch = Stretch.None;
AlphabetButton.Background = brush;
AlphabetButton.BorderBrush = new SolidColorBrush(Colors.Gray);
AlphabetButton.Margin = new Thickness(-12, -27, 0, 0);
AlphabetButton.Width = 80;
AlphabetButton.Height = 80;
I want to remove the border of the button control because with that border the image does not appear as per requirement. How to do this? Can we do this with the BorderThickness attribute of button control or is there any other way? Can you please provide me any code or link through which I can resolve the above issue? If I am doing anything wrong then please guide me.
The easiest way is to set the BorderThickness to 0 like for Example:
Button alphabetButton = new Button();
alphabetButton.BorderThickness = new Thickness(0.0);
Another option could be to set the BorderBrush to Transparent or to change the whole Style of the button and especially its ControlTemplate.
I think Button.StrokeTHickness is the correct property to adjust the borders.

Why isn't the image in my image control clear?

BitmapImage B = new BitmapImage();
B.BeginInit();
B.StreamSource = asm.GetManifestResourceStream("WpfApplication26.Back1.png");
B.EndInit();
image1.Source = B;
The size of the image (Back1.png) is 32*32, and I set the size of my image control to 32*32 and set the property "Scale" to "None".
Try
RenderOptions.BitmapScalingMode="NearestNeighbor"
on the image control in xaml or
RenderOptions.SetBitmapScalingMode(image1, BitmapScalingMode.NearestNeighbor)
in code.
Try SnapsToDevicePixels="True" on the image control.
If you still want to clear the image, meaning, turning it to blank, just set the source to "null"
image1.Source = null;
This does not require a BitmapImage.
Sorry for the late reply...

Resources