I am new to iOS development but not so new to C#. I chose to do the tutorial provided by Xamarin/Microsoft and then to try and expand on that. I was looking for a way to set an image in the center of the UINavigationBar, and I found that the proper way to do so was to use NavigationItem.TitleView = myImageView;
This works great! However, there is one issue: the image I used is simply bigger than the NavigationBar. I want to scale (and keep the aspect ratio) the image to fit inside of the NavigationBar while also looking nice. Here is what I've done up to this point to get the image:
var logo = UIImage.FromFile("PolarisLogoBlank.png");
var iView = new UIImageView(logo);
NavigationItem.TitleView = iView;
And here is a picture of what I'm getting:
Any help is much appreciated; thanks SO!
You have to set both the height of the imageView and the contentMode of the imageView so that the image is not stretched. This is what you are looking for:
iView.contentMode = .scaleAspectFit
if let navigationController = navigationController {
iView.frame.size.height = navigationController.navigationBar.frame.size.height
}
or with force unwrapping
iView.contentMode = .scaleAspectFit
iView.frame.size.height = navigationController!.navigationBar.frame.size.height
You can set the size of the imageView:
iView.frame.size.height = self.navigationController.navigationBar.frame.size.height;
I'm not sure what exactly that looks like in C#, but that's how you'd do it in Objective-C.
Hope that helps.
Related
I'm used to the CardView widget on Android.
I'm trying to get something similar programmatically on iOS. I've found some resources like this one. A simple CardView that derives from UIView.
I think that the interesting part of the code is:
Layer.CornerRadius = CornerRadius;
UIBezierPath bezierPath = UIBezierPath.FromRoundedRect(Bounds, CornerRadius);
Layer.MasksToBounds = false;
Layer.ShadowColor = ShadowColor.CGColor;
Layer.ShadowOffset = new CGSize(shadowOffsetWidth, shadowOffsetHeight);
Layer.ShadowOpacity = shadowOpacity;
Layer.ShadowPath = bezierPath.CGPath;
This gives me the following result:
This is almost fine but I'd like to see the elevation much clearer on the top and left side of the card, as I have on Android:
I'm no expert on drawing and or design of UI Interface.
Any help appreciated.
you can set shadowOffset to zero as shadowOffset represents the location of shadow according to UIView frame .
An offset of (2,2) will put the shadow 2 pixels to the right and 2 pixels down with respect to the element.
layer.ShadowOffset = .zero
I'm using the Svg.Core library (version 3.0.49.2) to render SVGs (defined in strings) to PNG images. No matter what I do, any shape seems to be rendered with a black stroke and a black fill.
Here's the code I'm using for a simple rectangle, as an example:
var svgString = #"<svg width=""300"" height=""300"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink""><rect x=""5"" y=""5"" height=""90"" width=""50"" fill=""#ef0000"" stroke=""#00ef00"" /></svg>";
var svgDocument = SvgDocument.FromSvg<SvgDocument>(svgString);
var bitmap = svgDocument.Draw();
bitmap.Save(fileName, ImageFormat.Png);
which ends up rendering a rectangle of the correct height and width, but all black:
I've seen a number of posts that mention various versions of inlining styles, but regardless of whether I'm using a style="" approach or a fill="", the problem continues. Also seems to happen without fill color specified or using standard color names instead of RGB values.
Any help or ideas are appreciated!
The best answer I have come up with here is from the comment earlier. If you put the following around it: svgDoc.Color = new SvgColourServer(Color.DarkGreen); svgDoc.StopColor = new SvgColourServer(Color.DarkGreen); svgDoc.Stroke = new SvgColourServer(Color.DarkGreen); svgDoc.Fill = new SvgColourServer(Color.DarkGreen); , you will get colors in the SVG. Posting this as the answer in case anyone runs into this issue down the road.
I am rendering text but the output of small fontsizes is quite bad. This seems to be an old wpf rendering issue. But there should be solutions available, see WPF Blurry fonts issue- Solutions.
As far as i understand it comes down to setting the TextOptions.TextRenderingMode to TextRenderingMode.Aliased in order to get sharper output.
I tried doing that, but the result did not change.
My question is, on wich dependency object do i need to set the renderoption?
I am doing it like this:
var text = new FormattedText(...);
var textGeometry = text.BuildGeometry(position);
var drawing = new GeometryDrawing(brush, null, textGeometry);
TextOptions.SetTextFormattingMode(drawing, TextFormattingMode.Display);
TextOptions.SetTextRenderingMode(drawing, TextRenderingMode.Aliased);
theDrawing.Children.Add(drawing);
Later i am using a RenderTargetBitmap in order to render the drawings.
That bitmap has also set all renderoptions like posted above. Finally this bitmap gets displayed within a Imagecontrol (all UI elements have Textoptions + Renderoptions set aswell) But no sucess...
Maybe my problem is that i am using a GeometryDrawing and thus my text does not get recognized as text...
Thanx for all your input!
Edit:
UI Code:
TextOptions.SetTextFormattingMode(this, TextFormattingMode.Display);
TextOptions.SetTextFormattingMode(this.ImageControl, TextFormattingMode.Display);
TextOptions.SetTextRenderingMode(this, TextRenderingMode.Aliased);
TextOptions.SetTextRenderingMode(this.ImageControl, TextRenderingMode.Aliased);
my Problem is, that when i put an image as the content of an MapOverlay on a Map,
the image starts to disappear if i zoom in close enough.
I created an image to illustrate the problem.
I recalculate the width and height of the image everytime i zoom, so it stays perfectly on the map. I checked it and the dimensions of the image are not the problem.
Does anybody can explain to me why this is happening?
Does anybody know how to fix this?
Thank you very much.
Unfortunately the windows SDK for HERE Maps has been deprecated and is no longer supported. It might be possible to achieve the requirement using the HERE JavaScript SDK 3.1 which supports better map overlays.
function addOverlayToMap(map) {
var imgCounter = 0;
// create an overlay that will use a weather map as a bitmap
var overlay = new H.map.Overlay(
new H.geo.Rect(
70.72849153520343, -24.085683364175395,
29.569664922291, 44.216452317817016
),
rainRadar[imgCounter],
{
// the bitmap is frequently updated mark the object as volatile
volatility: true
}
);
// update overlay's bitmap every 250 milliseconds
setInterval(function() {
imgCounter = imgCounter < 10 ? ++imgCounter : 0;
overlay.setBitmap(rainRadar[imgCounter]);
}, 250);
// add overlay to the map
map.addObject(overlay);
}
Reference : https://developer.here.com/documentation/examples/maps-js/geoshapes/image-overlay
Is there a way to get a control's absolute screen co-ordinates on Windows Phone? also, will help if that method will work with UserControl components. WPF seems to have Control.PointToScreen, which isb't in the WP APIs
The idea is I'm trying to use a Callout control to point to a UserControl on the screen as a help bubble, and the anchor point doesn't take in absolute coordinates either - so it's a huge connected problem which I'll build up as an answer to this post.
Use UIElement.TransformToVisual()
something like this should do the trick:
var control = this; // assign the control you want to get the position of.
var transform = control.TransformToVisual(Application.Current.RootVisual);
var controlPosition = transform.Transform(new Point(0, 0));
probably you could try Control.MousePosition instead
is this want you want (though it's for WP7): How do you find the screen position of a control in silverlight on WP7?