Xamarin Forms IOS - MKUserTrackingButton position - c#

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)
});
}

Related

How to add show/hide password image in a Xamarin.Forms Editor for ios project. (scrolling and UI placement issues)

I am trying to place a button to implement show/hide password in a custom UITextView in Xamarin.iOS (Editor in Xamarin.Forms). However I am facing two (2) issues with the UI design.
I have used this code used for the show/hide password button setup, and it works perfectly:
UITextView vUpdatedEntry = (UITextView)Control;
var buttonRect = UIButton.FromType(UIButtonType.Custom);
buttonRect.SetImage(UIImage.FromBundle("show_black_24"), UIControlState.Normal);
buttonRect.TouchUpInside += (object sender, EventArgs e1) => {
if (vUpdatedEntry.SecureTextEntry)
{
vUpdatedEntry.SecureTextEntry = false;
buttonRect.SetImage(UIImage.FromBundle("hide_black_24"), UIControlState.Normal);
}
else
{
vUpdatedEntry.SecureTextEntry = true;
buttonRect.SetImage(UIImage.FromBundle("show_black_24"), UIControlState.Normal);
}
};
Issue 1. I am unable to prevent the button from scrolling away when the UITextView scrolls. Whenever scrolling occurs, this happens:
Basically the button scrolls along with the text which is not ideal. Any ideas on how to fix this would be much appreciated.
Issue 2. I am trying to get the button which allows the user to select whether they want the password to be visible or not to be on the right side of the UITextView. I have used the code below to do this.
buttonRect.Frame = new CoreGraphics.CGRect(10.0f, 0.0f, 15.0f, 15.0f);
buttonRect.ContentMode = UIViewContentMode.ScaleToFill;
buttonRect.BackgroundColor = UIColor.Orange;
UIView paddingViewRight = new UIView(new System.Drawing.RectangleF(0.0f, 0.0f, 30.0f, 18.0f));
paddingViewRight.BackgroundColor = UIColor.Purple;
paddingViewRight.AddSubview(buttonRect);
buttonRect.TranslatesAutoresizingMaskIntoConstraints = false;
buttonRect.CenterYAnchor.ConstraintEqualTo(paddingViewRight.CenterYAnchor).Active = true;
vUpdatedEntry.TextContainerInset = new UIEdgeInsets(8.0f, 0.0f, 8.0f, paddingViewRight.Frame.Width+5.0f);
vUpdatedEntry.AddSubview(paddingViewRight);
paddingViewRight.TranslatesAutoresizingMaskIntoConstraints = false;
paddingViewRight.TrailingAnchor.ConstraintEqualTo(vUpdatedEntry.LayoutMarginsGuide.TrailingAnchor, 9.0f).Active = true;
paddingViewRight.HeightAnchor.ConstraintEqualTo(vUpdatedEntry.HeightAnchor).Active = true;
paddingViewRight.WidthAnchor.ConstraintEqualTo(buttonRect.WidthAnchor,1.0f, 0.0f).Active = true;
Control.Layer.CornerRadius = 4;
Control.Layer.BorderColor = new CoreGraphics.CGColor(255, 255, 255);
Control.Layer.MasksToBounds = true;
vUpdatedEntry.TextAlignment = UITextAlignment.Left;
and it gives me this:
This is my desired visual outcome, as it looks like the image below when the background colors are removed:
However, this solution feels rather hacky with lots of constants used in places where I would expect that using an AutoLayout anchor property should have worked. I tried using the TrailingAnchor property with ConstraintEqualTo to achieve this (this being stickiness to the right side of UITextView), but it kept sticking to the left-side instead. A cleaner approach to achieving this would be much appreciated
With Inspiration, from #JackHua-MSFT (the poster of comment on the question) I was able to figure out how to fix Issue 1 which was the more pressing issue in the question, My code below:.
buttonRect.ContentMode = UIViewContentMode.ScaleToFill;
UIView paddingViewRight = new UIView(new System.Drawing.RectangleF(0.0f, 0.0f, 30.0f, 18.0f));
paddingViewRight.AddSubview(buttonRect);
buttonRect.TranslatesAutoresizingMaskIntoConstraints = false;
buttonRect.CenterYAnchor.ConstraintEqualTo(paddingViewRight.CenterYAnchor).Active = true;
vUpdatedEntry.AddSubview(paddingViewRight);
paddingViewRight.TranslatesAutoresizingMaskIntoConstraints = false;
paddingViewRight.TrailingAnchor.ConstraintEqualTo(vUpdatedEntry.LayoutMarginsGuide.TrailingAnchor, 8.0f).Active = true;
paddingViewRight.HeightAnchor.ConstraintEqualTo(vUpdatedEntry.HeightAnchor).Active = true;
paddingViewRight.BottomAnchor.ConstraintEqualTo(vUpdatedEntry.LayoutMarginsGuide.BottomAnchor).Active = true;
paddingViewRight.TopAnchor.ConstraintEqualTo(vUpdatedEntry.LayoutMarginsGuide.TopAnchor, -8.0f).Active = true;
paddingViewRight.WidthAnchor.ConstraintEqualTo(buttonRect.WidthAnchor, 1.0f, 3.0f).Active = true;
vUpdatedEntry.TextContainerInset = new UIEdgeInsets(8.0f, 0.0f, 8.0f, paddingViewRight.Frame.Width + 5.0f);
Control.Layer.CornerRadius = 4;
Control.Layer.BorderColor = new CoreGraphics.CGColor(255, 255, 255);
Control.Layer.MasksToBounds = true;
vUpdatedEntry.TextAlignment = UITextAlignment.Left;
However any suggestions for a cleaner solution (specifically one where I don't need to use constant float values with the LayoutMarginsGuide) would be appreciated. Also an explanation on the difference between using .TopAnchor and .BottomAnchor (which I tried using but didn't work) vs .LayoutMargins.TopAnchor and .LayoutMargins.BottomAnchor would be appreciated. :)

Chart series are not shown until clicking on scrollbar

Here is my init method for the chart in my C# program.
private void initGraph()
{
chartTrend.Cursor = Cursors.Hand;
chartTrend.ChartAreas[0].CursorX.LineColor = Color.Red;
chartTrend.ChartAreas[0].CursorX.LineWidth = 2;
chartTrend.ChartAreas[0].CursorX.LineDashStyle = ChartDashStyle.Dot;
chartTrend.ChartAreas[0].CursorX.IsUserEnabled = true;
// let us select a portion of chart so then zoom that portion
chartTrend.ChartAreas[0].CursorX.IsUserSelectionEnabled = true;
chartTrend.ChartAreas[0].CursorX.Interval =1 ;
chartTrend.ChartAreas[0].CursorX.IntervalType = DateTimeIntervalType.Seconds;
chartTrend.ChartAreas[0].CursorX.AutoScroll = false;
chartTrend.ChartAreas[0].AxisY.IsStartedFromZero = true;
chartTrend.ChartAreas[0].AxisX.ScaleView.Zoomable = true;
chartTrend.ChartAreas[0].AxisY.ScaleView.Zoomable = false;
// disable zoom-reset button (only scrollbar's arrows are available)
chartTrend.ChartAreas[0].AxisX.ScrollBar.ButtonStyle = ScrollBarButtonStyles.SmallScroll;
chartTrend.ChartAreas[0].AxisX.ScrollBar.IsPositionedInside = true;
chartTrend.ChartAreas[0].AxisX.ScrollBar.Enabled = true;
chartTrend.ChartAreas[0].AxisX.ScaleView.SizeType = DateTimeIntervalType.Seconds;
chartTrend.ChartAreas[0].AxisX.ScaleView.Size = 528;
}
The problem is that, when I add data to the chart, It will not be shown until I click on the scroll. I even tried to move the scroll by software but it didn't work. what can I do?
By the way, it is all for the last line of initGraph() method. when I comment it out, data will be shown, but in the way that I'm not interested.
The problem was the position of scroll. I understood that when I added data to the chart, It was depicting chart from a time which was far away from the start of my time range and after clicking on the scroll, it took it to the proper time. So I decided to move the scroll after adding my first points and finally, the problem solved by this line:
chartTrend.ChartAreas[0].AxisX.ScaleView.Position = chartTrend.ChartAreas[0].AxisX.Minimum;

UIImageView change UIImage on touch then restore previous UIImage

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);
}
});

Unity Gui fontSize dont change

I'm using this code below to add a Retry and Quit button to the GameOver screen for my android game.
//if retry button is pressed load scene 0 the game
if(GUI.Button(new Rect(Screen.width/2-50,Screen.height/2 +100,200,140),"Retry?")){
Application.LoadLevel(0);
}
//and quit button
if(GUI.Button(new Rect(Screen.width/2-50,Screen.height/2 +200,200,140),"Quit")){
Application.Quit();
}
But the fontSize of the Gui text is so small and no matter what I try then I cant make it bigger. What can I do to solve this.
Use style object for this.
GUIStyle style = new GUIStyle();
style.fontSize = 20;
if(GUI.Button(new Rect(Screen.width/2-50,Screen.height/2 +100,200,140),"Retry?", style)){
Application.LoadLevel(0);
}
//and quit button
if(GUI.Button(new Rect(Screen.width/2-50,Screen.height/2 +200,200,140),"Quit", style)){
Application.Quit();
}
But it is going to overwrite the original style so you probably want to make some other changes too. For example put these lines after declaration of ´style´ and before the first use of it:
style.alignment = TextAnchor.MiddleCenter;
RectOffset margin = new RectOffset();
margin.bottom = 10;
margin.top = 10;
style.margin = margin;
style.normal.background = new Texture2D(1, 1);
For all possible settings check unity's manuals.

Cursor lines in chart

I'm using a chart control within a C# windows forms project. What I would like is to have dotted lines follow my mouse around as it moves about the chart. I may make the lines centered about the cursor or the data point; at this point I am flexible. I've included a screen shot of what it is I'm looking for below.
So here you can see black dotted lines (the cursor doesn't appear because it was a screen grab). I already have a mouseMove event but I'm not sure which code to include in that mousemove to get this working (right now it only works when I click the mouse, but I think taht is just because I have CursorX.IsUserSelection enabled). I already formatted the lines in the chart creation function but is there some CursorX.LineEnable function or something similar? I've not been able to find any. I know that I could accomplish this with a painted object but I was hoping to avoid the hassle.
Thanks in advance! I'll include my line formatting below. This is in the chart creation section.
chData.ChartAreas[0].CursorX.IsUserEnabled = true;
chData.ChartAreas[0].CursorX.IsUserSelectionEnabled = true;
chData.ChartAreas[0].CursorY.IsUserEnabled = true;
chData.ChartAreas[0].CursorY.IsUserSelectionEnabled = true;
chData.ChartAreas[0].CursorX.Interval = 0;
chData.ChartAreas[0].CursorY.Interval = 0;
chData.ChartAreas[0].AxisX.ScaleView.Zoomable = true;
chData.ChartAreas[0].AxisY.ScaleView.Zoomable = true;
chData.ChartAreas[0].CursorX.LineColor = Color.Black;
chData.ChartAreas[0].CursorX.LineWidth = 1;
chData.ChartAreas[0].CursorX.LineDashStyle = ChartDashStyle.Dot;
chData.ChartAreas[0].CursorX.Interval = 0;
chData.ChartAreas[0].CursorY.LineColor = Color.Black;
chData.ChartAreas[0].CursorY.LineWidth = 1;
chData.ChartAreas[0].CursorY.LineDashStyle = ChartDashStyle.Dot;
chData.ChartAreas[0].CursorY.Interval = 0;
Inside the chart's MouseMove event handler, you can do the following to make the cursor move:
private void chData_MouseMove(object sender, MouseEventArgs e)
{
Point mousePoint = new Point(e.X, e.Y);
Chart.ChartAreas[0].CursorX.SetCursorPixelPosition(mousePoint, true);
Chart.ChartAreas[0].CursorY.SetCursorPixelPosition(mousePoint, true);
// ...
}
This is the documentation for the SetCursorPixelPosition method: http://msdn.microsoft.com/en-us/library/system.windows.forms.datavisualization.charting.cursor.setcursorpixelposition.aspx

Categories

Resources