Right-aligned Labels in iOS - xamarin.forms

I'm using Xamarin Forms. Some of my labels are right-adjusted (i.e TextAlignment = TextAlignment.End) and have a whitespace character in the end to allow a bit of a margin at the right end. This works as designed in Android. However, it looks like iOS simply ignores the trailing space.
A leading space, for left-adjusted labels, works fine on both platforms.
I tried different whitespace characters other than "\u0020": "\u00A0", "\u2000", "\u202F", etc. iOS ignores them all the same.
I cannot use Label.Margin because my label has a different BackgroundColor, and the whole idea is to leave a little space of this color at the right of the text. The Margin is considered outside of the label, so the background color won't extend there.
Is placing the label inside a ContentView with Padding the only solution?

Answer
You're correct: we need to increase the Label's Padding, and Margin won't accomplish this!
The problem is that Label doesn't have a Padding property.
I recommend setting the BackgroundColor and Padding in the Layout that holds the Label:
Remove the BackgroundColor from the Label
Assign the BackgroundColor to the Layout
Set the Padding of the Layout
var stackLayout = new StackLayout
{
Children = { rightJustifiedLabel },
BackgroundColor = Color.Red,
Padding = new Thickness(0, 0, 5, 0)
}
Sample Code
public class App : Application
{
public App()
{
MainPage = new LabelPage();
}
}
public class LabelPage : ContentPage
{
public LabelPage()
{
var rightJustifiedLabel = new Label
{
Text = "Right-Justified Label",
HorizontalTextAlignment = TextAlignment.End,
};
Content = new StackLayout
{
Children = { rightJustifiedLabel },
BackgroundColor = Color.Red,
Padding = new Thickness(0, 0, 5, 0),
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
}
}

Related

The label does not change its size in the user element. (extends Control)

I need to make a custom element consisting of several elements. One of these elements is the Label. But this label does not set its size regardless of what is specified in the setPrefMinSize,setPrefSize, setPrefMaxSize methods. If you add a Canvas element, it is drawn normally.
Test method:
public class LinearMarkerTest extends Control {
double width = 100.0;
double height = 50.0;
public LinearMarkerTest() {
Label label = new Label("Label text");
label.setMinSize(width, height);
label.setPrefSize(width, height);
label.setMaxSize(width, height);
getChildren().add(label);
Canvas canvas = new Canvas(100,100);
GraphicsContext graphicsContext = canvas.getGraphicsContext2D();
graphicsContext.setFill(Color.RED);
graphicsContext.fillRect(0, 10, width, height);
getChildren().add(canvas);
}
}
Result:

Issue while setting slider thumb at a particular point if slider maximum value is too high?

I am working in xamarin forms. I have slider whose maximum value is more than 200. I want to move the slider thumb at particular point on slider for example at 120, but it becomes very tough to put the thumb at particular point. This happens with large maximum values. If values are less then its working fine.
So is there any solution so that we can move the slider's thumb easily at any point if slider's maximum value is very large?
You can set the increase value like this GIF.
Here is code.I set the StepValue to 20
public partial class MainPage : ContentPage
{
private double StepValue;
private Slider SliderMain;
public MainPage()
{
InitializeComponent();
StepValue = 20.0;
BindingContext = new HslColorViewModel();
SliderMain = new Slider
{
Minimum = 0.0f,
Maximum = 200.0f,
Value = 0.0f,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand
};
SliderMain.BackgroundColor = Color.Black;
SliderMain.ValueChanged += OnSliderValueChanged;
Content = new StackLayout
{
Children = { SliderMain },
Orientation = StackOrientation.Vertical,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
}
void OnSliderValueChanged(object sender, ValueChangedEventArgs e)
{
var newStep = Math.Round(e.NewValue / StepValue);
SliderMain.Value = newStep * StepValue;
}
}

How can I add a button inside var content page code-behind using Xamarin.Forms?

How can I add a button inside var content page in code-behind? I'm trying to make a list view of content pages each with its own button.
var content = new ContentPage
{
Title = EntryTitulo.Text,
Content = new Label
{
Text = EntryText.Text,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
//I want to add a button here....
};
A ContentPage can only have a single child. If you want to add multiple children, they need to be contained in a Layout container, like a StackLayout or a Grid
var label = new Label { ... };
var button = new Button { ... };
var layout = new StackLayout();
layout.Children.Add(label);
layout.Children.Add(button);
Content = layout;

How to set position of a Node relative to another Node in JavaFX?

I have two controls in my JavaFx Application
1. TextField
2. ListView
I want to place ListView just below the TextField using co-ordinates of TextField.
Because position of TextField changes.
Details :
I am creating auto suggestion text field for my project which requires to pop up a list when users type something in text field. that text field may exist anywhere in the scene it can be in another list view also. So what I need precisely is how to obtain co-ordinates of text field on screen so that I can place list view just below the text field.
I see multiple options here:
I think you might be better of using a ContextMenu. When you show a ContextMenu you can define a view that it should be shown relative to and a side of the view to show it.
Should a ContextMenu not fulfill your demands, the easiest idea that I have is that you replace your TextField with a VBox and input the TextField and the ListView in the VBox. That will make them be together and you can just position the VBox like you would position your TextField.
Last if you want to lay it out yourself, the TextField contains Properties like layoutX and layoutY and height and width. Using those you can calculate where to position your ListView (e.g. Y position of ListView would be textField.layoutY + textField.height). To keep this position up to date I see two options:
To position the TextField you have probably overwritten the layoutChildrens method of some Parent, so you can probably put this code there.
If not, you can also register ChangeListeners on those Properties to get notified when they change and reposition your ListView accordingly.
To get the location of a text field in the screen coordinates, you can do
Bounds boundsInScreen = textField.localToScreen(textField.getBoundsInLocal());
This returns a Bounds object, from which you can get the various coordinates, e.g.
Popup popup = ... ;
popup.setWidth(boundsInScreen.getWidth());
popup.show(textField, boundsInScreen.getMinX(), boundsInScreen.getMaxY());
I Created this helper class that does just that.
public class PositionUtils {
public static void position(Region movable, Region reference, Anchor movableAnchor, Anchor referenceAnchor, float xOffset, float yOffset) {
double x = reference.localToScene(reference.getBoundsInLocal()).getMaxX();
double y = reference.localToScene(reference.getBoundsInLocal()).getMaxY();
Point referencePoint = referenceAnchor.referencePoint;
Point movablePoint = movableAnchor.movablePoint;
x -= (0.5 * movable.getWidth()) * movablePoint.x;
y += (0.5 * movable.getHeight()) * movablePoint.y;
x += (0.5 * reference.getWidth()) * referencePoint.x;
y -= (0.5 * reference.getHeight()) * referencePoint.y;
movable.setLayoutX(x + xOffset);
movable.setLayoutY(y + yOffset);
}
public static void position(Pane movable, Pane reference, Anchor movableAnchor, Anchor referenceAnchor) {
position(movable, reference, movableAnchor, referenceAnchor, 0, 0);
}
public static void position(Pane movable, Pane reference, Side side) {
position(movable, reference, side, 0, 0);
}
public static void position(Pane movable, Pane reference, Side side, float xOffset, float yOffset) {
Anchor movableAnchor = null;
Anchor referenceAnchor = null;
switch (side) {
case TOP:
movableAnchor = Anchor.BOTTOM_CENTER;
referenceAnchor = Anchor.TOP_CENTER;
break;
case BOTTOM:
movableAnchor = Anchor.TOP_CENTER;
referenceAnchor = Anchor.BOTTOM_CENTER;
break;
case RIGHT:
movableAnchor = Anchor.CENTER_LEFT;
referenceAnchor = Anchor.CENTER_RIGHT;
break;
case LEFT:
movableAnchor = Anchor.CENTER_RIGHT;
referenceAnchor = Anchor.CENTER_LEFT;
break;
}
position(movable, reference, movableAnchor, referenceAnchor, xOffset, yOffset);
}
public enum Anchor {
TOP_LEFT(new Point(0, 0), new Point(-2, 2)),
TOP_CENTER(new Point(1, 0), new Point(-1, 2)),
TOP_RIGHT(new Point(2, 0), new Point(0, 2)),
CENTER_LEFT(new Point(0, -1), new Point(-2, 1)),
CENTER(new Point(1, -1), new Point(-1, 1)),
CENTER_RIGHT(new Point(1, -2), new Point(0, 1)),
BOTTOM_LEFT(new Point(0, -2), new Point(-2, 0)),
BOTTOM_CENTER(new Point(1, -2), new Point(-1, 0)),
BOTTOM_RIGHT(new Point(2, -2), new Point(0, 0));
public Point referencePoint;
public Point movablePoint;
Anchor(Point movablePoint, Point referencePoint) {
this.referencePoint = referencePoint;
this.movablePoint = movablePoint;
}
}
public enum Side {
TOP,
BOTTOM,
RIGHT,
LEFT
}
}

Xamarin.Forms Customize Padding for a Specific View

So I'm new to developing in Xamarin.Forms and I was working on a project where I had multiple views in a StackLayout on one page. I was wondering if there was a way that you could specify padding differently for each different view.
For example, there is an Image that I want to fill the entire width of the screen, but there is an Entry underneath it that I do not want to fill the entire screen. However, if I use the StackLayout.Padding attribute it sets the same padding to all views.
Is there any solution to this?
EDIT:
I forgot to mention earlier that I have already tried using the margin property but keep getting the error 'Entry' does not contain a definition for 'margin'
Here is my code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace HuntFishNY
{
class LandingPage : ContentPage
{
Image logo, silhouettes;
Entry username, password;
Button signIn, register;
Label title, trouble;
StackLayout heading, inputSection, footer;
public LandingPage()
{
this.BackgroundColor = Color.FromHex("#2B5237");
logo = new Image();
logo.Source = "dec_logo.png";
silhouettes = new Image();
silhouettes.Source = "sportinglicense_background.jpg";
username = new Entry();
username.HorizontalTextAlignment = TextAlignment.Start;
username.BackgroundColor = Color.White;
username.Placeholder = "Username";
username.PlaceholderColor = Color.Gray;
username.TextColor = Color.Black;
username.VerticalOptions = LayoutOptions.FillAndExpand;
password = new Entry();
password.HorizontalTextAlignment = TextAlignment.Start;
password.IsPassword = true;
password.BackgroundColor = Color.White;
password.Placeholder = "Password";
password.PlaceholderColor = Color.Gray;
password.TextColor = Color.Black;
password.VerticalOptions = LayoutOptions.FillAndExpand;
signIn = new Button();
signIn.Text = "Sign In";
signIn.BackgroundColor = Color.FromHex("#2b5237");
register = new Button();
register.Text = "Register New Account";
title = new Label();
title.TextColor = Color.FromHex("#E2AF28");
title.HorizontalTextAlignment = TextAlignment.Center;
trouble = new Label();
trouble.Text = "Having trouble signing in?";
heading = new StackLayout();
heading.VerticalOptions = LayoutOptions.Start;
heading.Children.Add(logo);
heading.Children.Add(title);
heading.Children.Add(silhouettes);
heading.Children.Add(username);
heading.Children.Add(password);
heading.Padding = new Thickness(10, 10, 20, 20);
this.Content = heading;
}
}
}
It seems you should be using a Grid(https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/grid/) instead of a StackLayout.
You can achieve different row height using RowDefinitions within a Grid.
You can also add a StackLayout inside another StackLayout.
That said, if your Entry do not have a Margin it´s probably because you're using an outdated version of Xamarin.Forms (Margin was introduced in 2.1 or 2.2. Current is 2.3)

Resources