ImageButton changing color of the image - ios

We are using Xamarin.Forms with Xamarin.Forms.Labs components for the ImageButton. This is iOS.
For some reason the ImageButton is changing the color of the image that we want to use in the control. The standard Button component does the same, however, the Image componet works fine.
In the image, you can see how we load the same file into an Image, ImageButton, and Button views, and you can see that the Image one is correct, but the other two are changed from red to blue.
Any idea how to make the ImageButton or Button component show the original image without altering the colors?.
Snippet:
// wrong colors
var addPins = new ImageButton() {
Image = (FileImageSource) ImageSource.FromFile("Marker.png"),
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Center,
ImageHeightRequest = 50,
ImageWidthRequest = 50,
HeightRequest = 50,
WidthRequest = 50
};
// good colors
var addPins2 = new Image {
Source = ImageSource.FromFile ("Marker.png"),
HeightRequest = 50,
WidthRequest = 50,
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Center
};
// wrong colors
var addPins3 = new Button {
Image = new FileImageSource { File = "Marker.png"} ,
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Center,
HeightRequest = 50,
WidthRequest = 50
};
grid.Children.Add (addPins, 1, 2);
grid.Children.Add (addPins2, 1, 1);
grid.Children.Add (addPins3, 1, 0);
Sample result:

Related

Vertical UIStackView alignment

I have a vertical UIStackview with 3 controls in it.
I want all the controls to be centered, and the first two to expand the whole width available. The third one should take 80% of the available width and be centered as well.
Here is the result I got so far:
As you can see the third control is left aligned.
Here is the code I have for all of this:
var container = new UIStackView
{
TranslatesAutoresizingMaskIntoConstraints = false,
Axis = UILayoutConstraintAxis.Vertical,
Distribution = UIStackViewDistribution.EqualCentering,
Alignment = UIStackViewAlignment.Fill,
Spacing = 10f
};
// Create the Title
UILabel title = new UILabel
{
TranslatesAutoresizingMaskIntoConstraints = false,
Text = item.name,
TextAlignment = UITextAlignment.Center,
Lines = 2,
};
container.AddArrangedSubview(title);
// Create the gauge
SFCircularGauge circularGauge = new SFCircularGauge { TranslatesAutoresizingMaskIntoConstraints = false };
circularGauge.Tag = circularGauge.GenerateViewTag();
circularGauge.HeightAnchor.ConstraintEqualTo(100f).Active = true;
#if DEBUG
circularGauge.BackgroundColor = UIColor.Cyan;
#endif
container.AddArrangedSubview(circularGauge);
// Add the evaluate button
var evaluate = UIButton.FromType(UIButtonType.RoundedRect);
evaluate.TranslatesAutoresizingMaskIntoConstraints = false;
evaluate.SetTitle(Utilities.GetLocalizedString("qol_rate_button_text"), UIControlState.Normal);
evaluate.SetTitleColor(UIColor.White, UIControlState.Normal);
evaluate.BackgroundColor = new UIColor(red: 1.00f, green: 0.37f, blue: 0.00f, alpha: 1.0f); // Optimistic Orange
evaluate.Layer.CornerRadius = 5f;
evaluate.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
evaluate.ContentEdgeInsets = new UIEdgeInsets(top: 0, left: 10f, bottom: 0, right: 10f);
evaluate.UserInteractionEnabled = true;
evaluate.TouchUpInside -= Evaluate_TouchUpInside;
evaluate.TouchUpInside += Evaluate_TouchUpInside;
evaluate.Tag = evaluate.GenerateViewTag();
viewIdsAutoEvalsIds.Add((int)evaluate.Tag, item.id);
container.AddArrangedSubview(evaluate);
evaluate.WidthAnchor.ConstraintEqualTo(container.WidthAnchor, 0.8f).Active = true;
evaluate.CenterXAnchor.ConstraintEqualTo(container.CenterXAnchor).Active = true;
I can't figure out where is my problem. In the UIStackView configuration? Somewhere else?
Thanks in advance.
The property Alignment is to sets the alignment of the non-axial subviews . In your case , you need to set it as
UIStackViewAlignment.Center
instead of
UIStackViewAlignment.Fill
This might be a bug of the control. We'll see.
In the meantime, thanks again to the Reveal Tool, the gauge has no width defined.
I solved the problem by setting the width constraint explicitly:
// Fix the width to be 100% of the container
circularGauge.WidthAnchor.ConstraintEqualTo(container.WidthAnchor).Active = true;

How to set LeftBarButton at the place of BackButton in ios

I have set LeftBarButton in the NavigationItem is below way.
Code :
UIButton leftBtn = new UIButton();
leftBtn.Frame = new CoreGraphics.CGRect(0, 14, 30, 30);
leftBtn.SetImage(UIImage.FromBundle("cancel_white_icon"), UIControlState.Normal);
leftBtn.TintColor = GargiColor.WhiteColor();
UIBarButtonItem barBtnLeft = new UIBarButtonItem();
barBtnLeft.CustomView = leftBtn;
barBtnLeft.TintColor = GargiColor.WhiteColor();
NavigationItem.SetLeftBarButtonItem(barBtnLeft, true);
Output :
EDIT :
After adding #SushiHangover code the Output is below
What I am Expected :
The Cancel Button have more space in the Left Side. How to set it to LeftSide as the backbutton.
My Require Output is below :
#SushiHangover final output :
var negativeSpace = new UIBarButtonItem (UIBarButtonSystemItem.FixedSpace);
negativeSpacae.Width = -8;
var leftBtn = new UIButton (new RectangleF (0, 0, 25, 25));
leftBtn.SetImage(UIImage.FromBundle("cancel_white_icon"), UIControlState.Normal);
leftBtn.TintColor = GargiColor.WhiteColor();
UIBarButtonItem [] bArray = {
negativeSpace, new UIBarButtonItem (leftBtn)
};
NavigationItem.SetLeftBarButtonItems (bArray, true);

How to Change Title Kerning Value of NavigationBar in iOS using Xamarin

I'm trying to adjust the kerning for the title text in the NavigationBar. I've gotten as far as assigning a custom UIStringAttributes to the NavigationBar title. Setting the font and the text color seems to work fine, but when I input the Kerning Adjustment, nothing happens, regardless of what value I input.
public void SetTitleFont (string fontName, float fontSize, Color foregroundColor)
{
var TitleAttr = new UIStringAttributes {
ForegroundColor = foregroundColor.ToUIColor(),
Font = UIFont.FromName (fontName, fontSize),
KerningAdjustment = 50
};
this.NavigationController.NavigationBar.TitleTextAttributes = TitleAttr;
}
Figured this one out.
What worked out for me was creating a new UILabel, set the attributes for the UILabel, then set the TitleView to the UILabel.
// We will grab the actual title of the Page further down.
string viewTitle = string.Empty;
UINavigationItem navItem = new UINavigationItem();
if (this.NavigationController != null)
{
if (this.NavigationController.VisibleViewController != null)
{
if (this.NavigationController.VisibleViewController.NavigationItem != null)
{
navItem = this.NavigationController.VisibleViewController.NavigationItem;
// Grab the title of the Page you are on.
if (navItem.Title != null)
{
viewTitle = this.NavigationController.VisibleViewController.NavigationItem.Title;
}
}
}
}
// We do not want to set an arbitrary size for the UILabel.
// Otherwise, positioning it will be very difficult.
// The StringSize function will set the size of the UILabel to the absolute
// minimum size of whatever string you specify - given the correct
// parameters (font and fontSize).
CGSize titleSize = viewTitle.StringSize(UIFont.FromName (fontName, size));
// Create the new title UILabel. Make sure to set the Bounds!
pageTitleView = new UILabel {
Bounds = new CGRect (0, 0, titleSize.Width, titleSize.Height),
BackgroundColor = UIColor.FromRGBA(0, 0, 0, 0)
};
var titleAttributes = new NSAttributedString (viewTitle,
new UIStringAttributes () {
ForegroundColor = foregroundColor.ToUIColor(),
Font = UIFont.FromName (fontName, size),
KerningAdjustment = 1.1f
});
// Apply the new attributes to the UILabel and center the text.
pageTitleView.AttributedText = titleAttributes;
pageTitleView.TextAlignment = UITextAlignment.Center;
// Set the TitleView to the new UILabel.
navItem.TitleView = pageTitleView;
I hope this helps!

Corona tabBar creation fails

In my menu.lua I have the following code:storyboard.gotoScene( "vegScreen" ), meaning: vegetable screen/menu
In the scene:createScene function of my vegScreen.lua I try to create a tabBar with 2 tabs. Using the following code:
local tabButtons = {
{
width = 50, height = 40,
defaultFile = "assets/tabIcon.png",
overFile = "assets/tabIcon-down.png",
label = "Per catagory",
onPress = function() storyboard.gotoScene( "catagory" ); end,
selected = true
},
{
width = 50, height = 40,
defaultFile = "assets/tabIcon.png",
overFile = "assets/tabIcon-down.png",
label = "All products",
onPress = function() storyboard.gotoScene( "all" ); end,
}
}
productBar = widget.newTabBar{ -- line 82
top = 65,
width = display.contentWidth,
backgroundFile = "assets/tabBar_background.png",
tabSelectedLeftFile = "assets/tabBar_background.png",
tabSelectedMiddleFile = "assets/tabBar_background.png",
tabSelectedRightFile = "assets/tabBar_background.png",
tabSelectedFrameWidth = 20,
tabSelectedFrameHeight = 52,
buttons = tabButtons
}
group:insert(productBar)
Using this code I get the following error:
http://i.imgur.com/0koV4PK.png
Line 82 in vegScreen.lua is where I create the new tabBar ( productBar = widget.newTabBar )
Though I don't know if the images I created are used correctly, it should show me something right? I have the module require statements at the top of my vegScreen.lua file (for storyboard and widget), created the catagory.lua and all.lua files which are located in the same folder as the vegScreen.lua and I have defined the group variable. Could somebody help me out? The error doesn't make any sense to me.
Not really an answer but I solved my problem. I had created files in which I used code to load content. I think the issue with that lies in not being able to add content to existing titanium views.
So what I did was deleted those files and created the views through code, which works like a charm.

IOS: UIDatePicker renders poorly with a black background

When I create a new UIDatePicker with its Mode set to a CountDownTimer, it renders poorly with a black background. Anyone have any insight?
Normal Picker looks like this:
CODE: Note the UIButton is a full screen button behind the picker to dismiss the view
intervalPicker = new UIDatePicker(new RectangleF(0, this.tvc.View.Bounds.Height - 135, this.tvc.View.Bounds.Width, 200));
intervalPicker.Mode = UIDatePickerMode.CountDownTimer;
intervalPicker.CountDownDuration = DeviceSession.CurrentBehavioralEvent.Duration*60;
intervalPicker.ValueChanged += new EventHandler(intervalPicker_EditingChanged);
UIButton b = UIButton.FromType(UIButtonType.Custom);
b.Opaque = false;
b.BackgroundColor = UIColor.Clear;
b.Frame = new RectangleF(0, 0, this.tvc.View.Bounds.Width, this.tvc.View.Bounds.Height);
b.TouchUpInside += (o, s) => {
intervalPicker.RemoveFromSuperview();
b.RemoveFromSuperview();
};
this.tvc.NavigationController.View.AddSubview(b);
this.tvc.NavigationController.View.AddSubview(intervalPicker);
The UIDatePicker in CountDownTimer mode displays this way when you set a frame height of less than 216. The other modes don't have this problem.
Your example is setting the height to 200.
Change the height to 216.

Resources