So, after finding my anwser in previos question here what I would like is to add GestureRecognizer on this UIImageView. When user tap, the color change. And when he tap again default image is restored.
Any tip to do that?
I was thinking about a List that I update in each click but not sure it is the best thing to do that.
here is the GestureRecognizer
UITapGestureRecognizer CreateTouchGesture(UIImageView imageView)
{
var touchGesture = new UITapGestureRecognizer((tg) =>
{
imageView.Image = DrawSelectedBorder(imageView.Image);
});
return touchGesture;
}
Based on comments, I can offer you this solution.
You use UIImageView AnimationImages property to store you base image.
And when you press again the image you retrieve it from this array.
And to know in which state you are, you use Ighlighted property.
Like this :
var touchGesture = new UITapGestureRecognizer((tg) =>
{
if(!imageView.Highlighted){
imageView.Highlighted = true;
imageView.AnimationImages = new UIImage[]{imageView.Image};
imageView.Image = DrawSelectedBorder(imageView.Image);
}else{
imageView.Highlighted = false;
imageView.Image = imageView.AnimationImages[0];
System.Diagnostics.Debug.WriteLine(imageView.AccessibilityLabel);
}
});
Related
I need to customized my pins/markers, I already added all the renderers and classes need it but I still don't know how to change the marker and place an image.
I followed the steps from Microsoft https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/map-pin#consuming-the-custom-map
My question is in the map implementation
CustomPin pin = new CustomPin
{
Type = PinType.Place,
Label = "Test pin",
Position = new Position(37.79752, -122.40183)
};
map.CustomPins = new List<CustomPin> { pin };
map.Pins.Add(pin);
What do I have to add/change to place an image that I already have in the resources as the marker of this pin?
For now it takes only the image named pin.png which I as a pin, but need also sometimes to use a different image
The renderer have this:
protected override MarkerOptions CreateMarker(Pin pin)
{
var marker = new MarkerOptions();
marker.SetPosition(new LatLng(pin.Position.Latitude, pin.Position.Longitude));
marker.SetTitle(pin.Label);
marker.SetSnippet(pin.Address);
marker.SetIcon(BitmapDescriptorFactory.FromResource(Resource.Drawable.pin));
return marker;
}
Selects directly Resource.Drawable.pin and maybe it's possible to call this and change it, but I don't know how to use it.
I know this is an old question but I will reply for purposes of futures queries that will coming until here. You can add your image at Assets folder and change:
BitmapDescriptorFactory.FromResource(Resource.Drawable.pin) by BitmapDescriptorFactory.FromAsset("pin.png")
Does anybody know of any ways to use an image as a mask for another image in UWP, the only masking function I can see is CompositionMaskBrush which I don't believe can achieve what I want.
An example of what I'm looking to achieve is the following.
I have a solid black PNG in the shape of a mobile phone case, the user adds their own image which is then clipped and masked to the dimensions of the solid black PNG - Resulting in the image below.
Any help whatsoever would be greatly appreciated. I've spent quite a while browsing for a solution.
Example Image Here
Just posting for anybody else who needs and answer to this, but I finally managed to find a solution using Win2D and an Imageloader.
Here is a link to the ImageLoader. Note that I had to roll back a few versions in order make it work how the documentation states. The link below is to the version that I'm using. Anything later than this version will not work with the sample code I'm going to post.
https://www.nuget.org/packages/Robmikh.Util.CompositionImageLoader/0.4.0-alpha
private Compositor _compositor;
private IImageLoader _imageLoader;
private CompositionEffectFactory _effectFactory;
private async void InitMask()
{
// Store our Compositor and create our ImageLoader.
_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
_imageLoader = ImageLoaderFactory.CreateImageLoader(_compositor);
// Setup our effect definition. First is the CompositeEffect that will take
// our sources and produce the intersection of the images (because we selected
// the DestinationIn mode for the effect). Next we take our CompositeEffect
// and make it the source of our next effect, the InvertEffect. This will take
// the intersection image and invert the colors. Finally we take that combined
// effect and put it through a HueRotationEffect, were we can adjust the colors
// using the Angle property (which we will animate below).
IGraphicsEffect graphicsEffect = new HueRotationEffect
{
Name = "hueEffect",
Angle = 0.0f,
Source = new InvertEffect
{
Source = new CompositeEffect
{
Mode = CanvasComposite.DestinationIn,
Sources =
{
new CompositionEffectSourceParameter("image"),
new CompositionEffectSourceParameter("mask")
}
}
}
};
// Create our effect factory using the effect definition and mark the Angle
// property as adjustable/animatable.
_effectFactory = _compositor.CreateEffectFactory(graphicsEffect, new string[] { "hueEffect.Angle" });
// Create MangedSurfaces for both our base image and the mask we'll be using.
// The mask is a transparent image with a white circle in the middle. This is
// important since the CompositeEffect will use just the circle for the
// intersectionsince the rest is transparent.
var managedImageSurface = await _imageLoader.CreateManagedSurfaceFromUriAsync(new Uri("http://sendus.pics/uploads/" + ImagePass + "/0.png", UriKind.Absolute));
//var managedImageSurface = await _imageLoader.CreateManagedSurfaceFromUriAsync(new Uri("ms-appx:///Assets/colour.jpg", UriKind.Absolute));
var managedMaskSurface = await _imageLoader.CreateManagedSurfaceFromUriAsync(new Uri("ms-appx:///" + MaskImage, UriKind.Absolute));
// Create brushes from our surfaces.
var imageBrush = _compositor.CreateSurfaceBrush(managedImageSurface.Surface);
var maskBrush = _compositor.CreateSurfaceBrush(managedMaskSurface.Surface);
// Create an setup our effect brush.Assign both the base image and mask image
// brushes as source parameters in the effect (with the same names we used in
// the effect definition). If we wanted, we could create many effect brushes
// and use different images in all of them.
var effectBrush = _effectFactory.CreateBrush();
effectBrush.SetSourceParameter("image", imageBrush);
effectBrush.SetSourceParameter("mask", maskBrush);
// All that's left is to create a visual, assign the effect brush to the Brush
// property, and attach it into the tree...
var visual = _compositor.CreateSpriteVisual();
visual.Size = new Vector2(MaskH, MaskW);
visual.Offset = new Vector3(0, 300, 0);
visual.Brush = effectBrush;
ElementCompositionPreview.SetElementChildVisual(this, visual);
}
I currently have a Custom map renderer in my Xamarin Forms that use for each platform the native Map renderer.
For iOS, I'm trying to add a tracking button to come back to current position.
I have the code to create the button :
var button = MKUserTrackingButton.FromMapView(Map);
button.Layer.BackgroundColor = UIColor.White.CGColor;
button.Layer.BorderColor = UIColor.FromRGB(211, 211, 211).CGColor;
button.Layer.BorderWidth = 1;
button.Layer.CornerRadius = 5;
button.TranslatesAutoresizingMaskIntoConstraints = false;
Map.AddSubview(button);
But I need to move it to the bottom right corner ( see image below )
So I just need the line of code to move the button in the MAP View :)
If you want to use Frame to change a Control's position. You should delete button.TranslatesAutoresizingMaskIntoConstraints = false;. This code will disable the Frame, and use autoLayout to place your controls.
Also you can try to use autoLayout:
button.TopAnchor.ConstraintEqualTo(Map.TopAnchor, 100).Active = true;
button.LeadingAnchor.ConstraintEqualTo(Map.LeadingAnchor, 100).Active = true;
button.WidthAnchor.ConstraintEqualTo(52).Active = true;
button.HeightAnchor.ConstraintEqualTo(44).Active = true;
This will also give the tracking button on the bottom right. Note that this only works for iOS 11 and above, so be sure to put a device check in there also.
if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0))
{
var button = MKUserTrackingButton.FromMapView(map);
button.Layer.BackgroundColor = UIColor.White.CGColor;
button.Layer.BorderColor = UIColor.FromRGB(0, 0, 127).CGColor;
button.Layer.BorderColor = UIColor.White.CGColor;
button.Layer.BorderWidth = 1;
button.Layer.CornerRadius = 5;
button.TranslatesAutoresizingMaskIntoConstraints = false;
View.AddSubview(button);
NSLayoutConstraint.ActivateConstraints(new NSLayoutConstraint[]{
button.BottomAnchor.ConstraintEqualTo(View.BottomAnchor, -10),
button.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor, -10)
});
}
My Image Item
I'm create a GalleryItem and attached a image to GalleryControl.
by the way, description position is always right of image.
I want to change the position to bottom of image.
How can I move it?
List<GalleryItem> galleryItemList = new List<GalleryItem>();
GalleryItem gi = new GalleryItem();
BitmapImage bmpImg = new BitmapImage();
bmpImg.BeginInit();
bmpImg.UriSource = newUri(#"C:\temp\2.jpg");
bmpImg.EndInit();
gi.Glyph = bmpImg;
gi.Description = Path.GetFileName(bmpImg.UriSource.LocalPath);
galleryItemList.Add(gi);
myGalleryItemGroup.ItemSource = galleryItemList;
It is my code.
Set Gallery.ItemGlyphLocation to Top.
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
<dxb:GalleryControl>
<dxb:Gallery ItemGlyphLocation="Top">
<dxb:GalleryItemGroup x:Name="myGalleryItemGroup">
<!--...-->
</dxb:GalleryItemGroup>
</dxb:Gallery>
</dxb:GalleryControl>
Also, it might be best to direct your questions to DevExpress the next time you have one. Their customer support is awesome.
I have a procedure which draws in the player picture box, as below:
public static PictureBox drawPlayer(Engine.Tile location, Image looks)
{
PictureBox player = new PictureBox();
player.Location = location.img.Location;
player.BackColor = Color.Yellow;
player.Size = new Size(50, 50);
player.Name = "Player";
player.Visible = true;
player.BringToFront();
return player;
}
However, it is not working, it is called as such:
t.Controls.Add(drawPlayer(location, image));
Any help with this would be great or an answer as to why this doesn't work, I have temporarily set the colour of the box to yellow just to make it really stand out when it does finally decide to load.
Thanks,
Laurence
You need to use player.BringToFront(); after the control has been added into the form, as it does not exist on the form when you call this in the method that is making the PictureBox.