We Keep Coding

Changing Xamarin Label in ListCell does not work

I have a problem with a ListView. I want each Cell to have a label and a switch but the text of the label does not appear.
Here is my code:
public class FilterPage : ContentPage
{
public FilterPage()
{
List<FilterCell> listContent = new List<FilterCell>();
foreach(string type in Database.RestaurantTypes)
{
FilterCell fc = new FilterCell();
fc.Text = type;
listContent.Add(fc);
}
ListView types = new ListView();
types.ItemTemplate = new DataTemplate(typeof(FilterCell));
types.ItemsSource = listContent;
var layout = new StackLayout();
layout.Children.Add(types);
Content = layout;
}
}
public class FilterCell : ViewCell
{
private Label label;
public Switch CellSwitch { get; private set; }
public String Text{ get { return label.Text; } set { label.Text = value; } }
public FilterCell()
{
label = new Label();
CellSwitch = new Switch();
var layout = new StackLayout
{
Padding = new Thickness(20, 0, 0, 0),
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = { label, CellSwitch }
};
View = layout;
}
}
If I enter a fixed Text in the FilterCell-Constructor it works fine (e.g.: label.Text = "Hello World")
When I create a Method for the ItemSelected-Event and read out the SelectedItem.Text Property I get the text I assigned as Value but it's never displayed. Only the switch is displayed when I try to run this Code.
Thanks for your help
Niko

Ohh boy. This code looks like a rape (sorry I had to say this).
Now let's see what's wrong:
The reason is you are mixing up data and view heavily.
The line
types.ItemTemplate = new DataTemplate(typeof(FilterCell));
means: "For each item in the list (ItemsSource) create a new filter cell". The FilterCells that you create in the loop are never displayed.
The easy fix
public class FilterPage : ContentPage
{
public FilterPage()
{
var restaurantTypes = new[] {"Pizza", "China", "German"}; // Database.RestaurantTypes
ListView types = new ListView();
types.ItemTemplate = new DataTemplate(() =>
{
var cell = new SwitchCell();
cell.SetBinding(SwitchCell.TextProperty, ".");
return cell;
});
types.ItemsSource = restaurantTypes;
Content = types;
}
}
There is a standard cell type that contains a label and a switch SwitchCell, use it.
As ItemsSource of your list, you have to use your data. In your case the list of restaurant types. I just mocked them with a static list.
The DataTemplate creates the SwitchCell and sets the Databinding for the Text property. This is the magic glue between View and data. The "." binds it to the data item itself. We use it, because our list contains items of strings and the Text should be exactly the string. (read about Databinding: https://developer.xamarin.com/guides/xamarin-forms/getting-started/introduction-to-xamarin-forms/#Data_Binding )
I striped away the StackLayout that contained the list. You can directly set the list as Content of the page.
Lesson
use standard controls, if possible
You should always try to remember to keep data and view apart from each other and use data binding to connect to each other.
Try to avoid unnecessary views.

How to bind values between two bindable properties in composite control Xamarin Forms?

I have created a Forms control extends from Frame with a Editor and a box view on left side. And i exposed the Text property for Frame so that i can use in XAML Bindings. If i bind the value for text from xaml it appears in editor. But how to set the user edit text back to Frame Text Property without triggering property changed?
public class MyEditor : Frame
{
public static readonly BindableProperty TextProperty = BindableProperty.Create("Text", typeof(string), typeof(MyEditor), String.Empty);
public string Text
{
get { return (string)this.GetValue(TextProperty); }
set
{
this.SetValue(TextProperty, value);
// this set is not calling when used from XAML Bindings
if (this.editor != null)
this.editor.Text = value;
}
}
private Editor editor;
private BoxView leftView;
private StackLayout contentHolder;
public MyEditor()
{
this.HasShadow = false;
this.Padding = 0;
this.IsClippedToBounds = true;
contentHolder = new StackLayout()
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Orientation = StackOrientation.Horizontal,
Spacing = 0
};
this.Content = contentHolder;
editor = new Editor();
editor.TextChanged += editor_TextChanged;
editor.HorizontalOptions = LayoutOptions.FillAndExpand;
editor.VerticalOptions = LayoutOptions.FillAndExpand;
leftView = new BoxView()
{
IsVisible = false,
WidthRequest = 5,
BackgroundColor = Color.FromHex("ff9900")
};
contentHolder.Children.Add(leftView);
contentHolder.Children.Add(editor);
}
void editor_TextChanged(object sender, TextChangedEventArgs e)
{
// how to update user edited text back to (Text)TextProperty without triggering OnPropertyChanged ?
//Text = editor.text;
// this triggers the Property change again.
}
protected override void OnPropertyChanged(string propertyName = null)
{
base.OnPropertyChanged(propertyName);
//update the Text property of MyEditor to actual editor
if (propertyName == TextProperty.PropertyName)
{
editor.Text = Text;
}
}
}
Xaml Code:
<CustomControl:MyEditor x:Name="cEditor" Text="{Binding Text}" WidthRequest="300" HeightRequest="150"/>

In your code you set editor's text in the setter of your bindableproperty and in OnPropertyChanged fucntion and also set frame's text in OnTextChanged event - 3 pieces of code.
Instead all this try binding these two texts with two-way binding, like this:
public MyEditor()
{
...
editor.SetBinding(Editor.TextPropety, new Binding("Text", BindingMode.TwoWay,source:this));
}
Also in your Xaml code change binding mode to two-way binding to reflect text changes in the binding context. Actually, I think if you change the Xaml it will solve your current problem ("set the user edit text back to Frame Text Property"), but imho binding the two texts is more elegant.

How do you use RelativeLayout with controls that depend on their own size for their position?

I'm having quite a few other problems with layout that require a lot of extra InvalidateLayout() calls, so I'm starting to question if I understand how RelativeLayout works.
Here's a very simple example of a UI that wants a right-aligned label:
public class MainPage : ContentPage {
public MainPage() {
var layout = new RelativeLayout();
var label = new Label() {
Text = "I want to be right-aligned."
};
layout.Children.Add(label,
Constraint.RelativeToParent((rl) => rl.Width - label.Width),
Constraint.Constant(10));
var button = new Button() {
Text = "Invalidate"
};
button.Clicked += (object sender, EventArgs e) => layout.ForceLayout();
layout.Children.Add(button,
Constraint.Constant(10),
Constraint.Constant(10));
Content = layout;
}
}
I expect this to start with the label properly aligned, but it does not align the label correctly until another layout pass is forced. By overriding methods like OnSizeRequest() in my custom control, I've determined this is because the calls to OnSizeRequest() don't happen until after the calls to the RelativeLayout's constraint lambdas. So, when the page is laid out, the label's Width is -1. When ForceLayout() is called later, the Label has had a chance to perform its layout logic and has properly set the Width property, so it gets laid out correctly.
In a larger context, I'm trying to make a button that, when clicked, fades out and a label slides into place where it was. It's to be aligned in the bottom-right corner of my layout, but I'm finding that modifying Opacity or IsVisible only inconsistently updates the layout. The only consistent behavior is RelativeLayout really likes to ask for the control's size before it gets a chance to resize itself.
Am I interpreting how to use a RelativeLayout wrong, or is this a mistake in its logic?

Delving deep into the (current) implementation of RelativeLayout, I found a truth I did not expect: it does not consult a view's GetSizeRequest() method or call its Layout() method before the constraints are calculated, because those constraints might affect the control's final size. The consequence: while the constraints are being calculated, the control's bounds reflect its old position and size.
To "fix" this, call the view's GetSizeRequest() inside constraints that need the most up-to-date size of the control:
public class MainPage : ContentPage {
public MainPage() {
var layout = new RelativeLayout();
var label = new Label() {
Text = "I want to be right-aligned."
};
Func<RelativeLayout, double> getLabelWidth = (parent) => label.GetSizeRequest(parent.Width, parent.Height).Request.Width;
layout.Children.Add(label,
Constraint.RelativeToParent((rl) => rl.Width - getLabelWidth(rl)),
Constraint.Constant(10));
var button = new Button() {
Text = "Invalidate"
};
button.Clicked += (object sender, EventArgs e) => layout.ForceLayout();
layout.Children.Add(button,
Constraint.Constant(10),
Constraint.Constant(10));
Content = layout;
}
}

Call self in object construction

I am initializing an object with several properties. However, there are multiple properties that are always the same (styling).
Consider the following initializing block of code:
private static Button _saveButton = new Button
{
Text = "Save",
HorizontalOptions = LayoutOptions.Center,
WidthRequest = 500,
IsVisible = false
//applyStandard(this) ?
};
I would like to pass _saveButton to a method, which changes its TextColor and BorderColor property with something like void applyStandard(View v).
How could I do that, if possible?

You can't access the button instance in the initializer, but you can make an extension method that you call right after it:
public static class Extensions {
public static Button ApplyStandard(this Button button) {
button.TextColor = Colors.Red;
return button;
}
}
By returning the button from the extension method, you can chain it into the creation:
private static Button _saveButton = new Button {
Text = "Save",
HorizontalOptions = LayoutOptions.Center,
WidthRequest = 500,
IsVisible = false
}.ApplyStandard();

You can't do the in the object initializer. You need to separate the method call from initialization.

What you have is nearly there, i think youre approaching the problem from the wrong direction. As already mentioned, you cant do what youre proposing with object initialization syntax. The simplest way to solve your problem (without simply creating your own button type) would be to have a method that creates a button, and sets all of your common properties. You can then set any of the others on a per instance basis:
private static Button CreateCustomButton()
{
Button button = new Button();
button.ForeColor = Color.Black;
// set other properties, initial setup etc...
return button;
}

Define VisualStates from Codebehind

is it possible to define (not switch) VisualStates in CodeBehind?
I'm creating an Adorner, that draws some rectangles in OnRender. What I'd like to do is to change the Opacity of these Rectangles by it's Property IsMouseOver (say from 0.3 to 0.8).
In any control with a visual tree I'd add some VisualStates and switch those with a DataStateBehavior. How do I do this with an Adorner?

this is entirely possible.
if anyone is interested here is how I did it:
public class MyAdorner: Adorner
{
ctor (...):base(...)
{
...
var storyboard = new Storyboard();
var doubleAnimation = new DoubleAnimation(0.2,new Duration(TimeSpan.Zero));
Storyboard.SetTarget(doubleAnimation,this);
Storyboard.SetTargetProperty(doubleAnimation,new PropertyPath(RectOpacityProperty));
storyboard.Children.Add(doubleAnimation);
var storyboard2 = new Storyboard();
var doubleAnimation2 = new DoubleAnimation(0.5, new Duration(TimeSpan.Zero));
Storyboard.SetTarget(doubleAnimation2, this);
Storyboard.SetTargetProperty(doubleAnimation2, new PropertyPath(RectOpacityProperty));
storyboard2.Children.Add(doubleAnimation2);
var stateGroup = new VisualStateGroup { Name = "MouseOverState" };
stateGroup.States.Add(new VisualState { Name = "MouseOut", Storyboard = storyboard });
stateGroup.States.Add(new VisualState { Name = "MouseOver", Storyboard = storyboard2});
var sgs = VisualStateManager.GetVisualStateGroups(this);
sgs.Add(stateGroup);
var dsb = new DataStateBehavior
{
Value = true,
FalseState = "MouseOut",
TrueState = "MouseOver"
};
BindingOperations.SetBinding(dsb, DataStateBehavior.BindingProperty, new Binding {Source = this, Path = new PropertyPath(IsMouseOverProperty)});
dsb.Attach(this);
}
protected override void OnRender(DrawingContext drawingContext)
{
drawingContext.DrawRectangle(_mouseOverBrush, _pen, _rects[i]); //mouseoverbrush is a Solidcolorbrush
}
public double RectOpacity
{
get { return (double)GetValue(RectOpacityProperty); }
set { SetValue(RectOpacityProperty, value); }
}
public static readonly DependencyProperty RectOpacityProperty =
DependencyProperty.Register("RectOpacity", typeof(double), typeof(XmlNodeWrapperAdorner), new FrameworkPropertyMetadata(0.0,FrameworkPropertyMetadataOptions.AffectsRender,(o, args) =>
{
var adorner = o as MyAdorner;
adorner._mouseOverBrush.Color = Color.FromArgb((byte)((double)args.NewValue * 0xFF), 0xFF, 0xBE, 0x00);
}));
}
pretty straightforward actually.
key points here are:
you cannot set the VisualStateGroups attached property. you have to get the collection and then add your own group
you cannot do new DataStateBehavior{Binding = new Binding(...){...}} as this will assign not bind some value to the property. As Behvior<T> doesn't derive from FrameworkElement you also can't use SetBinding but have to use the BindingOperations class.
for automatic rerendering when the property changes keep in mind to set FrameworkPropertyMetadataOptions.AffectsRender.

Since you're already creating a custom adorner with your own behavior, i would suggest that you override the MouseOver method of the adorner and change the opacity of your rectangles there...
another way would be to listen to your own PropertyChanged event and monitor the change in IsMouseOver, or maybe monitor the MouseMove event...

If you could add States in code, tools such as Blend would have to run all code in all possible configurations to find out what states are present/possible.
So, no, you can't do this in code. It only possible using attributes.
EDIT
I stand corrected but the problem mentioned still remains. This technique is not useful for designers.