I'm trying to use the microsoft_maps_mapcontrol. I see how one could create a pushpin and the lat long location... but i can't figure out how to instead use an image in place of that pushpin. doesn't look like pushpin will allow using a different image. So, that being the case how do you create an image and then wire it to the proper spot. Once wired can will i be able to use an event for when that image is clicked on.
thanks
shannon
added 3/2/2010
I've looked at the example given at http://www.microsoft.com/maps/isdk/silverlightbeta/#MapControlInteractiveSdk.Tutorials.UIElements.Media.TutorialPositionPointMedia
and i must not be converting something correctly to vb.
Here is there code
Image image = new Image();
image.Source = new BitmapImage(new Uri(ImageUriValue.Text, UriKind.RelativeOrAbsolute));
double opacity;
if (double.TryParse(OpacityText.Text, out opacity))
{
image.Opacity = opacity;
}
image.ImageFailed += MediaFailed;
Point point = GetPoint();
Canvas.SetLeft(image, point.X);
Canvas.SetTop(image, point.Y);
myCanvas.Children.Add(image);
element = image;
and what i converted it to
Dim image As New Image()
image.Source = New BitmapImage(New Uri("\Images\1.png", UriKind.RelativeOrAbsolute))
Canvas.SetLeft(image, 100)
Canvas.SetTop(image, 100)
myCanvas.Children.Add(image)
element = image
Hopefully that helps in spotting what i'm not doing correctly.
thanks
shannon
Here's a code snippet that should show you how to add an image.
public void addImageToMap()
{
MapLayer imageLayer = new MapLayer();
Image image = new Image();
//Define the URI location of the image
image.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri("myimage.png", UriKind.Relative));
//Define the image display properties
image.Opacity = 0.8;
image.Stretch = System.Windows.Media.Stretch.None;
//The map location to place the image at
Location location = new Location() { Latitude = -45, Longitude = 122 };
//Center the image around the location specified
PositionOrigin position = PositionOrigin.Center;
//Add the image to the defined map layer
imageLayer.AddChild(image, location, position);
//Add the image layer to the map
TestMap.Children.Add(imageLayer);
}
http://msdn.microsoft.com/en-us/library/ee681895.aspx
Related
I need to recreate a program similar to whatsapp that can send and receive messages, images videos and audio. I have created a WPF form to show messages that looks like this:
I have a stack panel that contains text bubbles on them. Text messages work fine but if I send an image I want the user to be able to click on the image text bubble and it must become full screen. The image text bubble consists of a label that has a frame in it and then within that frame the image is stored. The label was used since we could resize the label.
However, because the image is done like this dynamically, we cannot seem to register an on-click event on this image bubble. If you have any better ways that we can display the image or how to log this event it would be much appreciated. Here is the method used to add the image.
public void AddMessage_Image(string path, string displayName, int role, string date = "")
{
//Create an image from the path
ImageBrush image = new ImageBrush();
image.ImageSource = new BitmapImage(new Uri(path, UriKind.Absolute));
image.Stretch = Stretch.Uniform;
//Create a frame in which to place the image
Frame fr = new Frame();
fr.Background = image;
fr.MinHeight = 120;
fr.MinWidth = 160;
//Ensure scalabilty of the image
Viewbox vb = new Viewbox();
vb.Child = fr;
vb.Stretch = Stretch.Uniform;
//Place the image in a sizable container
Label lbl = new Label();
lbl.MinHeight = 10;
lbl.MinWidth = 10;
lbl.MaxHeight = 300;
lbl.MaxWidth = 400;
lbl.Content = vb;
if (role == (int) Role.Sender)
lbl.HorizontalAlignment = HorizontalAlignment.Right;
else
lbl.HorizontalAlignment = HorizontalAlignment.Left;
lbl.Background = Brushes.Black;
//Place the image in the chat
chatbox.Children.Add(lbl);
}
In WPF, I have an image that is dropped onto an InkCanvas and added as a child:
ImageInfo image_Info = e.Data.GetData(typeof(ImageInfo)) as ImageInfo;
if (image_Info != null)
{
Image image = new Image();
image.Width = image_Info.Width * 4;
image.Stretch = Stretch.Uniform;
image.Source = new BitmapImage(image_Info.Uri);
Point position = e.GetPosition(ic);
InkCanvas.SetLeft(image, position.X);
InkCanvas.SetTop(image, position.Y);
ic.Children.Add(image);
}
Then by way of an adorner, the image is moved and resized. It is then persisted to a database as:
public List<string> Children;
var uiList = ic.Children.Cast<UIElement>().ToList();
foreach (var p in uiList)
{
string uis = System.Windows.Markup.XamlWriter.Save(p);
s.Add(uis);
}
Children = s;
Children then being sent on to the database. The resulting record in the database shows as:
"<Image Source="pack://application:,,,/Images/Female - Front.png" Stretch="Uniform" Width="Auto" InkCanvas.Top="296" InkCanvas.Left="695" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" /> "
There is no reference to the new location, size, or rotation of the image--only its initial drop point. Recreating the image with xmlreader restores the image to its initial drop point and size.
foreach (string s in behavior.Children)
{
var stringReader = new StringReader(s);
var xmlReader = System.Xml.XmlReader.Create(stringReader, new System.Xml.XmlReaderSettings());
Image b = (Image)System.Windows.Markup.XamlReader.Load(xmlReader);
ic.Children.Add(b);
}
(The image source is packed as an application resource).
How can I persist the image with its size, location, and rotation and then restore it?
TIA.
Either you can add additional fields to your DB Table for Size / Location / Rotation and store info there.
Or, you can add these fields together as comma(,) separated and store in Tag field of your Image control. <Image Tag="(120,230);(50,50);(-30)" ... />
You can also save entire manipulated image as byte[] in DB.
Please tell if this solves your problem at hand.
i am working on a Mobile project (iPad with iOS 8.0.2);
I want to make clipping of my immage in order to display less from it.
When displaying on PC it works perfectly well, while we test it on the tablet the clipped image is not displayed at all.
Do you have any suggestions
this.background = new createjs.Bitmap('some_image.png');
//create a clipping of drawn image!
var dims = this.background.getBounds();
this.background.sourceRect = new createjs.Rectangle(0, 15, dims.width, dims.height);
this.background.x = 248;
this.background.y = 86;
this.stage.addChild(this.background);
I met the same trouble like this.I have given up using Bitmap to clipping the image. I have found another solution ,here is "
easeljs splitting an image into pieces
".Good luck.
I am working out, the code like this:
var img, stage;
function init() {
//wait for the image to load
img = new Image();
img.onload = handleImageLoad;
img.src = "./res/image.png";
}
function handleImageLoad(evt) {
// create a new stage and point it at our canvas:
stage = new createjs.Stage("canvas");
// create a new Bitmap, and slice out one image from the sprite sheet:
var bmp = new createjs.Bitmap(evt.target).set({x:200, y:200});
bmp.sourceRect = new createjs.Rectangle(916, 101, 84, 84);
//x,y,width,height
stage.addChild(bmp);
stage.update();
}
This is the example:
https://github.com/CreateJS/EaselJS/blob/master/examples/Filters_animated.html
Hello i have a canvas with the name Layout. I want to add some childs to it in code behind. Here is the code.
private void AddItem(int TruePosition, int CurrentPosition, string ImageFileName)
{
Image img = new Image();
img.Source = new BitmapImage(new Uri(#"/Images/" + ImageFileName, UriKind.Relative));
img.Width = 100.0;
img.Height = 400.0;
img.VerticalAlignment = System.Windows.VerticalAlignment.Bottom;
img.Stretch = Stretch.None;
Border b = new Border();
b.SetValue(Canvas.TopProperty, 200.0);
b.SetValue(Canvas.LeftProperty, (double)CurrentPosition);
b.SetValue(Canvas.ZIndexProperty, 1);
b.Background = new SolidColorBrush(Colors.Blue);
b.MouseMove += new MouseEventHandler(Border_MouseMove);
b.MouseLeftButtonDown += new MouseButtonEventHandler(Border_MouseLeftButtonDown);
b.MouseLeftButtonUp += new MouseButtonEventHandler(Border_MouseLeftButtonUp);
b.Child = img;
Layout.Children.Add(b);
UpdateLayout();
}
The image Uri is probably good because if i try to add only the border(without the image) it's still not rendering. Also i call this AddItem function from a button click event handler so initializations should not be a problem. Probably i am missing a very basic stuff here. Any ideas are welcome, thank you for your help.
Update: Ok i had something wrong with the browser cache probably, the border is added, but the image in the border isn't showing up. In the Visual Studio project i have an Images dir with the image files. Am i setting the path to them wrong?
So, now i am allowed to answer it. Well it was a newbie mistake.
The first / before Images is not needed. new Uri(#"Images/" + ImageFileName, UriKind.Relative) is correct.
Does anybody knows how to image cropping in silverlight without any library.
I have Child window and inside the child window I havev a image and this image center one rectange is there so I can panning the image to the around the rectange and selecet the perticular part of the image and this selected part I want to crop.
Also I am using WriteableBitmap and try to Crop, this will not work if correct me if I am wrong.
sheetRectangle.Children is the Image.
foreach (ucPicRect item in sheetRectangle.Children)
{
WriteableBitmap obj = new WriteableBitmap(item.imgCell.Source as BitmapSource);
obj.Crop(0,0,400,400);
obj.Invalidate();
item.imgCell.Effect = dlgcwEditPhoto.imgEdit.Effect;
item.imgCell.Source = obj;// dlgcwEditPhoto.imgEdit.Source;
}
Thanks...!!!
you can use this utility function to crop your image
public static WriteableBitmap cropImage(Image image, double[] coordonnee)
{
Image cloneImage = new Image();
cloneImage.Source = image.Source;
RectangleGeometry myRec = new RectangleGeometry();
myRec.Rect = new Rect(coordonnee[0], coordonnee[1], coordonnee[2], coordonnee[3]);
cloneImage.Clip = myRec;
TranslateTransform t = new TranslateTransform();
t.X = -coordonnee[0];
t.Y = -coordonnee[1];
WriteableBitmap wb = new WriteableBitmap(cloneImage, t);
wb.Invalidate();
return wb;
}
good luck !!