Xamarin Forms - iOS Editor bottom border line - xamarin.forms

I am trying to add a bottom border in a Xamarin Forms Editor for iOS
public class LineEditor : Editor
{
public static readonly BindableProperty LineColorProperty =
BindableProperty.Create(nameof(LineColor), typeof(Color), typeof(LineEntry), Color.Default);
public Color LineColor
{
get { return (Color)GetValue(LineColorProperty); }
set { SetValue(LineColorProperty, value); }
}
}
and for the renderer :
[assembly: ExportRenderer(typeof(LineEditor), typeof(LineEditorRenderer))]
namespace [...]
{
public class LineEditorRenderer : EditorRenderer
{
private LineEditor _element;
private CALayer _bottomBorder;
private const float BorderWidth = 2.0f;
protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
{
base.OnElementChanged(e);
if (e.OldElement != null || e.NewElement == null)
{
return;
}
_element = (LineEditor)Element;
var textView = this.Control;
_bottomBorder = new CALayer
{
Frame = new CGRect(0.0f, Frame.height - BorderWidth, Frame.Width, 1.0f),
BorderWidth = BorderWidth,
BorderColor = _element.LineColor.ToCGColor()
};
textView.Layer.AddSublayer(_bottomBorder);
textView.Layer.MasksToBounds = true;
}
}
}
But it does not work at all, i tried to follow this but without success.

Related

How to set transparent border color for entry control in forms using renderer

Am using entry control and I need a transparent border color, so used render to achieve the same, but a border is always displayed. How to overcome this.
<local:EntryExt Text="1500"></local:EntryExt>
public class EntryExt : Entry
{
}
public class EntryExtRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.Layer.BorderColor = UIColor.Clear.CGColor;
Control.Layer.BorderWidth = 0;
}
}
}
If you want to remove the border, you can set the BorderStyle to UITextBorderStyle.None.
[assembly: ExportRenderer(typeof(Entry), typeof(MyEntryRenderer))]
namespace App650.iOS
{
public class MyEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
// do whatever you want to the UITextField here!
Control.Layer.BorderColor = UIColor.Clear.CGColor;
Control.Layer.BorderWidth = 0;
Control.BorderStyle = UITextBorderStyle.None;
}
}
}
}

Using a static nested class insted of toString

I have this task:
"We do not want to rely on us Currency their toString() for how a currency is displayed in list our. We will be able to set this up ourselves.
Create a static nested class called "Currency Cell" in ValutaOversikController as extender List Cell <Value>.
Override methods updateItem (Currency and Currency, boolean empty).
Set how a currency should be presented in the list e.g. "Country - Currency Code"
Then put CellFactory for our ListView, which returns an instance of the new Currency Cell class."
I started to make the last method in Controller, but don't know if this is correct. As of now this is what I have:
public class Controller {
#FXML
private ComboBox<Valuta> listeMedValutaerEn, listeMedValutaerTo;
#FXML
private ComboBox<Sorteringen> listeMedSortering;
#FXML
private TextField textFieldValutaerEn, textFieldValutaerTo;
#FXML
private ImageView imageViewValutaerEn, imageViewValutaerTo;
#FXML
public void initialize() {
listeMedValutaerEn.setItems(DataHandler.hentValutaData());
listeMedValutaerTo.setItems(DataHandler.hentValutaData());
listeMedSortering.setItems(DataHandler.hentSorteringsData());
listeMedValutaerEn.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<Valuta>() {
#Override
public void changed(ObservableValue<? extends Valuta> observableValue, Valuta gammelValuta, Valuta nyValuta) {
fyllUtValutaEn(nyValuta);
}
});
listeMedValutaerTo.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<Valuta>() {
#Override
public void changed(ObservableValue<? extends Valuta> observableValue, Valuta gammelValuta, Valuta nyValuta) {
fyllUtValutaTo(nyValuta);
}
});
listeMedSortering.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<Sorteringen>() {
#Override
public void changed(ObservableValue<? extends Sorteringen> observableValue, Sorteringen gammelSortering, Sorteringen nySortering) {
sortere(nySortering);
}
});
}
private void sortere(Sorteringen nySortering) {
ObservableList<Valuta> valutaSomSkalSorteres = DataHandler.hentValutaData();
CompareToValuta sortere = new CompareToValuta(nySortering.getSorteringsKode());
Collections.sort(valutaSomSkalSorteres, sortere);
listeMedValutaerEn.setItems(valutaSomSkalSorteres);
listeMedValutaerTo.setItems(valutaSomSkalSorteres);
}
private void fyllUtValutaEn(Valuta enValuta) {
if (enValuta != null) {
Image flaggEn = new Image("https://www.countryflags.io/" + enValuta.getLandskode() + "/shiny/64.png");
imageViewValutaerEn.setImage(flaggEn);
}
}
private void fyllUtValutaTo(Valuta enValuta) {
if (enValuta != null) {
Image flaggTo = new Image("https://www.countryflags.io/" + enValuta.getLandskode() + "/shiny/64.png");
imageViewValutaerTo.setImage(flaggTo);
}
}
#FXML
private void buttonBeregn(ActionEvent event) {
Integer valutaAntall = Integer.valueOf(textFieldValutaerEn.getText());
double valutaNrEn = listeMedValutaerEn.getSelectionModel().getSelectedItem().getValutakurs();
double valutaNrTo = listeMedValutaerTo.getSelectionModel().getSelectedItem().getValutakurs();
double valutaResultat = valutaAntall * (valutaNrEn / valutaNrTo);
textFieldValutaerTo.setText(String.valueOf(valutaResultat));
}
private static ListCell<Valuta> ValutaCelle() {
ListCell<Valuta> tja = new ListCell<>();
return tja;
}
}
Class DataHandler:
public class DataHandler {
private final static ObservableList<Valuta> valutaListe = FXCollections.observableArrayList();
private final static ObservableList<Sorteringen> sorteringsListe = FXCollections.observableArrayList();
public static ObservableList<Sorteringen> hentSorteringsData() {
if (sorteringsListe.isEmpty()) {
sorteringsListe.add(new Sorteringen("Sortere alfabetisk på land synkende", 1));
sorteringsListe.add(new Sorteringen("Sortere alfabetisk på land stigende", 2));
sorteringsListe.add(new Sorteringen("Sortere på valutakode, stigende", 3));
sorteringsListe.add(new Sorteringen("Sortere på valutakode, synkende", 4));
}
return sorteringsListe;
}
public static ObservableList<Valuta> hentValutaData() {
if (valutaListe.isEmpty()) {
valutaListe.addAll(genererValutaData());
}
return valutaListe;
}
private static ArrayList<Valuta> genererValutaData() {
File kilden = new File("src/no/hiof/aleksar/oblig5/valutakurser.csv");
ArrayList<Valuta> valutaerFraFiler = lesFraCSVFil(kilden);
return valutaerFraFiler;
}
private static ArrayList<Valuta> lesFraCSVFil(File filSomLesesFra) {
ArrayList<Valuta> valutaerFraFil = new ArrayList<>();
try (BufferedReader bufretLeser = new BufferedReader(new FileReader(filSomLesesFra))) {
String linje;
while( (linje = bufretLeser.readLine()) != null ){
String[] deler = linje.split(";");
Valuta enValuta = new Valuta(deler[0], deler[1], deler[2], Double.parseDouble(deler[3]));
valutaerFraFil.add(enValuta);
}
} catch (IOException e) {
System.out.println(e);
}
return valutaerFraFil;
}
}

UWP Custom renderer with Xamarin Forms

I have the following code for my custom renderer. The Element in use is a Label and I'm trying to set a background colour with rounded edges.
[assembly: ExportRenderer(typeof(RoundedLabel), typeof(RoundedLabelCustomRenderer))]
namespace MyNamespace.UWP.CustomRenderers
{
public class RoundedLabelCustomRenderer : LabelRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
var view = (RoundedLabel)e.NewElement;
Children.Clear();
var border = new Border
{
CornerRadius = new CornerRadius(view.RoundedCornerRadius),
Background = new SolidColorBrush(view.RoundedBackgroundColor.ToWindows()),
Child = Control
};
Control.Padding = new Windows.UI.Xaml.Thickness(
view.InsidePadding.Left,
view.InsidePadding.Top,
view.InsidePadding.Right,
view.InsidePadding.Bottom);
Control.Foreground = new SolidColorBrush(view.TextColor.ToWindows());
Children.Add(border);
}
}
}
}
For the likes of a button (which is a composite object in UWP), this would be fine and if it was in "pure" XAML, something like
<Border background="gray" cornerradius="12">
<TextBlock />
</Border>
would do the job.
I'm just having fun and games trying to reconcile the two snippets together.
Any pointers to what I'm doing wrong would be appreciated.
It is difficult to realize your requirement with custom LabelRenderer. Because there is no such interface to modify background color and Radius. However, you can do that via custom View. And then in UWP client project you could use UserControl to render the control you want.
CustomNewLabelControl.cs
public class CustomNewLabelControl : View
{
public static readonly BindableProperty LabelTextProperty = BindableProperty.Create(
propertyName: "LabelText",
eturnType: typeof(string),
declaringType: typeof(CustomNewLabelControl),
defaultValue: default(string));
public string LabelText
{
get { return (string)GetValue(LabelTextProperty); }
set { SetValue(LabelTextProperty, value); }
}
public static readonly BindableProperty LabelRadiusProperty = BindableProperty.Create(
propertyName: "LabelRadius",
eturnType: typeof(double),
declaringType: typeof(CustomNewLabelControl),
defaultValue: default(double));
public double LabelRadius
{
get { return (double)GetValue(LabelRadiusProperty); }
set { SetValue(LabelRadiusProperty, value); }
}
public static readonly BindableProperty LabelBackgroundProperty = BindableProperty.Create(
propertyName: "LabelBackground",
eturnType: typeof(Color),
declaringType: typeof(CustomNewLabelControl),
defaultValue: default(Color));
public Color LabelBackground
{
get { return (Color)GetValue(LabelBackgroundProperty); }
set { SetValue(LabelBackgroundProperty, value); }
}
}
NewLabelControl.xaml.cs
public sealed partial class NewLabelControl : UserControl
{
public NewLabelControl()
{
this.InitializeComponent();
this.DataContext = this;
}
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(NewLabelControl), new PropertyMetadata(0));
public SolidColorBrush LabelBackground
{
get { return (SolidColorBrush)GetValue(LabelBackgroundProperty); }
set { SetValue(LabelBackgroundProperty, value); }
}
public static readonly DependencyProperty LabelBackgroundProperty =
DependencyProperty.Register("LabelBackground", typeof(SolidColorBrush), typeof(NewLabelControl), new PropertyMetadata(0));
public CornerRadius LabelRadius
{
get { return (CornerRadius)GetValue(LabelRadiusProperty); }
set { SetValue(LabelRadiusProperty, value); }
}
public static readonly DependencyProperty LabelRadiusProperty =
DependencyProperty.Register("LabelRadius", typeof(CornerRadius), typeof(NewLabelControl), new PropertyMetadata(0));
public SolidColorBrush LabelForeground
{
get { return (SolidColorBrush)GetValue(LabelForegroundProperty); }
set { SetValue(LabelForegroundProperty, value); }
}
public static readonly DependencyProperty LabelForegroundProperty =
DependencyProperty.Register("LabelForeground", typeof(SolidColorBrush), typeof(NewLabelControl), new PropertyMetadata(0));
}
NewLabelControl.xaml
<Grid>
<Border CornerRadius="{Binding LabelRadius}" Background="{Binding LabelBackground}">
<TextBlock Text="{Binding Text}" Foreground="{Binding LabelForeground }" />
</Border>
</Grid>
CustomNewLabelRanderer.cs
internal class CustomNewLabelRanderer : ViewRenderer<CustomNewLabelControl, NewLabelControl>
{
protected override void OnElementChanged(ElementChangedEventArgs<CustomNewLabelControl> e)
{
base.OnElementChanged(e);
if (Control == null)
{
SetNativeControl(new NewLabelControl());
}
if (e.OldElement != null)
{
}
if (e.NewElement != null)
{
Control.Text = Element.LabelText;
Control.LabelRadius = new Windows.UI.Xaml.CornerRadius(Element.LabelRadius);
Color color = Element.LabelBackground;
Control.LabelBackground = new Windows.UI.Xaml.Media.SolidColorBrush(
Windows.UI.Color.FromArgb(
(byte)(color.A * 255),
(byte)(color.R * 255),
(byte)(color.G * 255),
(byte)(color.B * 255)));
}
}
}
Usage
<local:CustomNewLabelControl LabelText="Welcome to Xamarin Forms!"
LabelBackground="Gray" LabelRadius="5"
VerticalOptions="Center"
HorizontalOptions="Center" />
What you're probably looking for is Frame (which actually is rendered as a Border on UWP). Frame let's you set both background color and corner radius:
<Frame BackgroundColor="Grey" CornerRadius="12" HasShadow="false" Padding="0">
<Label />
</Frame>
Frame has a drop shadow and padding set to 20 by default, so you'll have to removed those for your desired result.

JavaFX8: Treeview, get mouseclick on icon or text

Can I get different mouse-click events from a TreeViewItem depending on the user clicks on the icon or on the text label? The icon is not the collapse image of the tree.
According to Disable TreeItem's default expand/collapse on double click JavaFX 2.2 I have changed the constructor of the TreeMouseEventDispatcher:
class TreeMouseEventDispatcher implements EventDispatcher {
private final EventDispatcher originalDispatcher;
private final TreeCell<?> cell;
public TreeMouseEventDispatcher(EventDispatcher originalDispatcher, TreeCell<?> cell) {
this.originalDispatcher = originalDispatcher;
this.cell = cell;
}
private boolean isMouseEventOnGraphic(Node icon, Point2D coord) {
if (icon == null) {
return false;
}
return icon.localToScene(icon.getBoundsInLocal()).contains(coord);
}
#Override
public Event dispatchEvent(Event event, EventDispatchChain tail) {
if (event instanceof MouseEvent) {
MouseEvent mouseEvent = (MouseEvent) event;
if (mouseEvent.getButton() == MouseButton.PRIMARY
&& mouseEvent.getClickCount() >= 2) {
if (!mouseEvent.isConsumed()) {
if (isMouseEventOnGraphic(cell.getGraphic(), new Point2D(mouseEvent.getSceneX(), mouseEvent.getSceneY()))) {
// action for double click on graphic
} else {
// action for double click on all other elements of
// the TreeCell (like text, text gap, disclosure node)
}
}
event.consume();
}
}
return originalDispatcher.dispatchEvent(event, tail);
}
}
and then use this TreeMouseEventDispatcher for the TreeCell:
treeView.setCellFactory(new Callback<TreeView<T>, TreeCell<T>>() {
#Override
public TreeCell<T> call(TreeView<T> param) {
return new TreeCell<T>() {
#Override
protected void updateItem(T item, boolean empty) {
if (item != null && !empty) {
EventDispatcher originalDispatcher = getEventDispatcher();
setEventDispatcher(new TreeMouseEventDispatcher(originalDispatcher, this));
}
}
};
}
}

JavaFx Create Table Cell Accepts numbers only?

I have TableView with column inside it that must only accept numbers.
and I added onMouseClickListener to enter edit mode on the mouse click instead of double click on the cell
I want a way to not allowing the user to enter any character except numbers. My code is:
Callback<TableColumn<DailyDetails, String>, TableCell<DailyDetails, String>> defaultCellFactory
= TextFieldTableCell.<DailyDetails>forTableColumn();
dailyCredit.setCellFactory(column -> {
TableCell<DailyDetails, String> cell = defaultCellFactory.call(column);
cell.setOnMouseClicked(e -> {
if (!cell.isEditing() && !cell.isEmpty()) {
cell.getTableView().edit(cell.getIndex(), column);
}
});
return cell;
});
I implemented Table cell from the scratch:
class NumberCell extends TableCell<DailyDetails, String> {
private TextField textField;
public NumberCell() {
}
#Override
public void startEdit() {
super.startEdit();
if (textField == null) {
createTextField();
}
setGraphic(textField);
setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
textField.selectAll();
}
#Override
public void cancelEdit() {
super.cancelEdit();
setText(String.valueOf(getItem()));
setContentDisplay(ContentDisplay.TEXT_ONLY);
}
#Override
public void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setText(null);
setGraphic(null);
} else {
if (isEditing()) {
if (textField != null) {
textField.setText(getString());
}
setGraphic(textField);
setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
} else {
setText(getString());
setContentDisplay(ContentDisplay.TEXT_ONLY);
}
}
}
private void createTextField() {
textField = new TextField(getString());
//textField.setMinWidth(this.getWidth() - this.getGraphicTextGap() * 2);
textField.lengthProperty().addListener(new ChangeListener<Number>(){
#Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
if (newValue.intValue() > oldValue.intValue()) {
char ch = textField.getText().charAt(oldValue.intValue());
// Check if the new character is the number or other's
if (!(ch >= '0' && ch <= '9' )) {
// if it's not number then just setText to previous one
textField.setText(textField.getText().substring(0,textField.getText().length()-1));
}
}
}
});
}
private String getString() {
return getItem() == null ? "" : getItem().toString();
}
}
Callback<TableColumn<DailyDetails, String>,
TableCell<DailyDetails, String>> cellFactory
= (TableColumn<DailyDetails, String> p) -> new NumberCell();
dailyDebit.setCellFactory(cellFactory);
the problem is i lost the on mouse listener cell.setOnMouseClicked!!!
how do i get the cell again to assign the listener ???
Just for driving the new api into everybody's brain: a full example with a slightly different TextFormatter (than in the other answer) that is Locale-aware and (dirtily!) hooked into core TextFieldTableCell, can be used in any custom editing TableCell as well:
/**
* Example of how-to use a TextFormatter in a editing TableCell.
*/
public class CellFormatting extends Application {
private Parent getContent() {
ObservableList<IntData> data = FXCollections.observableArrayList(
new IntData(1), new IntData(2), new IntData(3)
);
TableView<IntData> table = new TableView<>(data);
table.setEditable(true);
TableColumn<IntData, Integer> column = new TableColumn<>("Data");
column.setCellValueFactory(new PropertyValueFactory("data"));
// core default: will throw exception on illegal values
// column.setCellFactory(TextFieldTableCell.forTableColumn(new IntegerStringConverter()));
NumberFormat format = NumberFormat.getIntegerInstance();
UnaryOperator<TextFormatter.Change> filter = c -> {
if (c.isContentChange()) {
ParsePosition parsePosition = new ParsePosition(0);
// NumberFormat evaluates the beginning of the text
format.parse(c.getControlNewText(), parsePosition);
if (parsePosition.getIndex() == 0 ||
parsePosition.getIndex() < c.getControlNewText().length()) {
// reject parsing the complete text failed
return null;
}
}
return c;
};
column.setCellFactory(c -> new ValidatingTextFieldTableCell<>(
// note: each cell needs its own formatter
// see comment by #SurprisedCoconut
new TextFormatter<Integer>(
// note: should use local-aware converter instead of core!
new IntegerStringConverter(), 0,
filter)));
table.getColumns().add(column);
VBox box = new VBox(table);
return box;
}
/**
* TextFieldTableCell that validates input with a TextFormatter.
* <p>
* Extends TextFieldTableCell, accesses super's private field reflectively.
*
*/
public static class ValidatingTextFieldTableCell<S, T> extends TextFieldTableCell<S, T> {
private TextFormatter<T> formatter;
private TextField textAlias;
public ValidatingTextFieldTableCell() {
this((StringConverter<T>)null);
}
public ValidatingTextFieldTableCell(StringConverter<T> converter) {
super(converter);
}
public ValidatingTextFieldTableCell(TextFormatter<T> formatter) {
super(formatter.getValueConverter());
this.formatter = formatter;
}
/**
* Overridden to install the formatter. <p>
*
* Beware: implementation detail! super creates and configures
* the textField lazy on first access, so have to install after
* calling super.
*/
#Override
public void startEdit() {
super.startEdit();
installFormatter();
}
private void installFormatter() {
if (formatter != null && isEditing() && textAlias == null) {
textAlias = invokeTextField();
textAlias.setTextFormatter(formatter);
}
}
private TextField invokeTextField() {
Class<?> clazz = TextFieldTableCell.class;
try {
Field field = clazz.getDeclaredField("textField");
field.setAccessible(true);
return (TextField) field.get(this);
} catch (NoSuchFieldException | SecurityException | IllegalArgumentException | IllegalAccessException e) {
e.printStackTrace();
}
return null;
}
}
public static class IntData {
IntegerProperty data = new SimpleIntegerProperty(this, "data");
public IntData(int value) {
setData(value);
}
public void setData(int value) {
data.set(value);
}
public int getData() {
return data.get();
}
public IntegerProperty dataProperty() {
return data;
}
}
#Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setScene(new Scene(getContent()));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
BTW, the formatter is re-used from another question where the task at hand was to restrict input into a Spinner.
Use a TextFormatter on the TextField like this:
TextFormatter<String> formatter = new TextFormatter<String>( change -> {
change.setText(change.getText().replaceAll("[^0-9.,]", ""));
return change;
});
textField.setTextFormatter(formatter);
Works with Java8u40 upwards. Use e. g. the TableView example from the Oracle site as base.

Resources