How to have a clear elevation effect with a CardView on iOS? - c#

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

Related

Scale Image in NavigationItem.TitleView to fit inside of the UINavigationBar

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.

Show the heading direction of a compass on a map

I have a Windows Phone application with a map. On this map, there are several pushpins (different infos on the map) and a pushpin of the current position. I want to show the heading direction (the direction the user looks with his phone) on the current position pushpin (using the compass angle). I already have a custom control that rotates according to the compass value. What I don't know is how to incorporate it into the map, i.e. show it on the current position on the map.
Do you have any ideas?
Thank you very much.
PS: If you don't know what I mean, I intend to do something like it's available in the (Nokia) Here Maps .
I don't have a complete answer. What I know is you can add any control to a map using this technique:
myMap.Layers.Add(new MapLayer()
{
new MapOverlay()
{
GeoCoordinate = new GeoCoordinate(37.795032,-122.394927),
Content = new Ellipse
{
Fill = new SolidColorBrush(Colors.Red),
Width = 40,
Height = 40
}
}});
This comes from http://developer.nokia.com/Community/Wiki/What's_new_in_Windows_Phone_8
Now this will display a simple red dot, but I understand you can put just about any control in there. Use your control, bind the rotation to a value that will hold the rotation in your view model and I think you are quite done. Does this work for you?

Control.PointToScreen on Windows Phone

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?

Transparency of ModelVisual3D with DiffuseMaterial

I come across a problem which seems a bug for me. I'm making an app that visualizes atoms in a crystal. That problem is that it draws a transparent object and hides the object behind.
Here is the code:
foreach (var atom in filteredAtoms)
{
var color = new Color();
color.ScR = (float)atom.AluminiumProbability;
//color.G = 50;
color.ScB = (float)atom.MagnesiumProbability;
//setting alpha channel but Opacity doens't work as well
color.ScA = (float)(1.0 - atom.VacancyProbability); //(float)1.0;//
DiffuseMaterial material = new DiffuseMaterial(new SolidColorBrush(color));
//material.Brush.Opacity = 1.0 - atom.VacancyProbability;
// make visuals and add them to
atomBuldier.Add(new Point3D(atom.X * Atom.ToAngstrom, atom.Y * Atom.ToAngstrom, atom.Z * Atom.ToAngstrom), material);
}
When I change the material to e.g. EmissiveMaterial there are no "cut" atoms. I googled this post, but the advices given don't apply to this case.
Is this a bug with 2D brush applied to 3D?
The full source code can be found here http://alloysvisualisation.codeplex.com the dll and a test file http://alloysvisualisation.codeplex.com/releases beta link.
Steps to reproduce:
Lunch app
Click Open file button
Open test file (xyzT2000.chmc)
Click Mask button
Check 11 (series of atoms are almost transparent)
Ckick Redraw
For the transparent atoms, you must disable z-buffer-writing. I'm unfamiliar with WPF, but you can probably set this in an Appearance or Material object or so.
The problem occurs because of the following:
When a transparent atom is rendered, it writes its depth to the z-buffer. Subsequent non-transparent atoms that are rendered and should appear, do not get written to the frame buffer, because their z-values fail the z-test, because of the z-values already in the z-buffer of the transparent atom.
In short, the graphics card treats the transparent atom as opaque and hides anything behind it.
Edit: Upon looking into WPF it seems pretty high-level, without direct control of z-buffer behavior.
According to this link, the emissive and specular materials do not write to the z-buffer, so using those is your solution when working with transparent objects.

ZedGraph: just the dots

I am new to ZedGraph. So far I could draw curves and bars. How can I display just the dots without connecting them?
I am using C# and Windows Forms.
The Scatter Plot Demo from ZedGraph's site shows how to do it. There is an IsVisible property on the Line which you set to false to only show the points.
LineItem myCurve = myPane.AddCurve("Title", list, Color.Black, SymbolType.Diamond);
myCurve.Line.IsVisible = false;
I think your solution is on The Code Project. Have a look at the part where he talks about "The Fill class". There is a dot-only example.

Categories

Resources