I am trying to relate the label text to the radio buttons value e.g. if radio is checked, then the label text is "x". If not, it's "y".
In my XML:
<RadioButton x:Name="radio1" Content="Option1" GroupName="Group1" IsChecked="{Binding BoolValue, Converter={StaticResource BooleanConverter}, ConverterParameter='true', Mode=TwoWay}" />
<RadioButton Content="Option2" GroupName="Group2" IsChecked="{Binding BoolValue, Converter={StaticResource BooleanConverter}, ConverterParameter='false', Mode=TwoWay}"/>
...
...
<Label Content="{Binding LabelText, UpdateSourceTrigger=PropertyChanged}" Width="70"/>
In the code:
(The _shape is bind to the radio button IsChecked;)
private bool _boolValue;
public bool BoolValue
{
get { return _boolValue; }
set
{
_boolValue= value;
PackLengthLabel = (_boolValue == true)? "x" : "y";
OnPropertyChanged("BoolValue");
}
}
And the label text property:
private string _labelText;
public string LabelText
{
get { return _labelText; }
set
{
_labelText = value;
OnPropertyChanged("LabelText");
}
}
The problem is that the changes don't affect the label text - it is the same all the time, no matter which checkbox is checked. The boolean value and the text value are changing (checked in the setters). I've also checked if the label is trying to get the _labelText from the getter but it doesn't. I also tried different binding modes, but the text was all the same.
The only way it affects the other controls is by binding directly to the other properties e.g.:
IsEnabled="{Binding IsChecked, ElementName=radio1}"
Edit1:
I can get it working in two ways:
setting the label content value in the View code behind, refering to the elements properties
using the code here: https://stackoverflow.com/a/23642108/3974198
But I'm still curious, why the simple getter and setter of the label text value didn't do the job.
Finally I got it. I had the property setters and getters in the View and the ViewModel. The problem was that the View had inherited from INotifyPropertyChanged, but the ViewModel didnt THOUGH in the ViewModel I could use the OnPropertyChanged, without getting any errors.
Related
Is it possible to get a control’s background color from a property in ViewModel?
The purpose is to be able to change color of Border or Button based on user actions. Because I’m using the MVVM approach, ideally, I simply set the background color of my control through a property in my view model.
I tried the following but it didn’t work:
<Border
BackgroundColor="{Binding MyBorderBackgroundColor}">
<Label Text=“Hello World” />
</Border>
In my view model, I use a string property and set it to either a color name such as Red or a Hex value such as #FF0000. I have an Init() method that I call from OnAppearing() and set the value -- see below:
[ObservableProperty]
string myBorderBackgroundColor;
...
public void Init()
{
MyBorderBackgroundColor = "Red"; // Or Hex value => MyBorderBackgroundColor = "#FF0000";
}
The app simply ignores the color setting and defaults to page background. No error but just doesn't use the value set through the view model property.
Any suggestions?
Your backing property is a string, while it should be a Color. However, I do understand you would think this works, because in XAML you can simply add a string to it.
Background
To understand why that works in XAML but not code, we'll have to learn about TypeConverter. Since XAML can only contain strings, we have to find a way to convert that string into a type that is actually useable. With a TypeConverter we do just that.
On an object where we expect people to use a string in XAML but still expect the desired outcome we add this attribute, here it is for Color:
[TypeConverter(typeof(Converters.ColorTypeConverter))]
public class Color
{
/// The class
}
Here is the full implementation of ColorTypeConverter in case you're curious.
This means that when the XAML parser finds this property and the corresponding (string) value, it will invoke that TypeConverter first and that results into the concrete type, in our case Color, to be used.
When you do a binding like you're doing, the TypeConverter is not invoked, and thus we're now binding a string value to a property that expects a Color object and therefore: not working.
The Fix
To fix this, change the backing property to a Color and initialize it as such.
[ObservableProperty]
Color myBorderBackgroundColor;
// ...
public void Init()
{
MyBorderBackgroundColor = Colors.Red; // Or Hex value => MyBorderBackgroundColor = Color.FromArgb("#FF0000");
}
Your XAML contains a small error with no quotes around the binding. Not sure if that is in your actual code, but just to be sure. Make sure there is quotes around the value of BackgroundColor like so:
<Border
BackgroundColor="{Binding MyBorderBackgroundColor}">
<Label Text="Hello World" />
</Border>
First of all, you need to make sure that the binding is set up correctly using double quotes:
<Border
BackgroundColor="{Binding MyBorderBackgroundColor}">
<Label Text=“Hello World” />
</Border>
Then, I would recommend using the Color type in the ViewModel instead of a string since there is no implicit conversion between those types. That's how I am doing it in my own apps, too.
So, you could change your code to the following and define the color in a variety of different ways (the list is not final):
[ObservableProperty]
string myBorderBackgroundColor;
//...
public void Init()
{
// use hex value
MyBorderBackgroundColor = Color.FromArgb("#FF0000");
// parse string
MyBorderBackgroundColor = Color.Parse("Red");
// use RGB
MyBorderBackgroundColor = Color.FromRgb(255,0,0);
// use named color
MyBorderBackgroundColor = Colors.Red;
//...
}
You can find more information about Colors in the official documentation.
Here is my .xaml
<Picker x:Name="Title" SelectedItem="{Binding Title, Mode=TwoWay}" ItemsSource="{Binding Titles}" ItemDisplayBinding="{Binding Text}" Title="Title" />
<Entry x:Name="Name" Text="{Binding Name}" Placeholder="Name" />
Bound to a View Model .cs which looks like this
public class Person
{
public string Name { get; set; }
public string Title { get; set; }
List<SelectListItem> Titles = new(){
new SelectListItem { Text = "Mister", Value="Mr" }
new SelectListItem { Text = "Doctor", Value="Dr" }
...
}
}
Containing this data
Person person = new() { Name = "Bill Jones", Title = "Mr" };
So the picker displays the list just fine. But I have two issues.
How do I get the picker to display the correct entry when it loads, in this case, default to Mr
If I change the value in the picker, how do I get the bound ViewModel to take on that entry? (Remember I want to store the selected value, not the displayed value). I know it works with a simple string list, but that's not what I want here.
It almost feels like I need an ItemValueBinding property or something like that. (Obviously, I just made that up)
I've seen quite a lot of complicated code using INotifyPropertyChanged and doing clever bits of code in the SelectedIndexChanged event. But if I have a lot of pickers on my page that seems like a lot of code I have to write.
Is there a simpler way that I might have missed, to achieve both requirements?
If you want to set a default value of your picker, you could try like this:
Title.SelectedIndex = 0; // That means the picker chooses the first item. PickerIndex is 0-based
In your ViewModel , change Title property
public string Title {get; set;}
to this:
public SelectListItem Title {get; set;} // This will get selectedItem instead of just a Text
You could use BindingContext to bind Entry with Picker. Here i give you an example:
<Picker x:Name="Title" SelectedItem="{Binding Title, Mode=TwoWay}" ItemsSource="{Binding Titles}" ItemDisplayBinding="{Binding Text}" Title="Title"/>
<Entry x:Name="Name" BindingContext="{x:Reference Title}" Text="{Binding SelectedItem.Text}" Placeholder="Name"/>
In the above code, the x:Reference markup extension is required to reference the source object, which is the Picker named "Title". When the picker value changed, it also changed Entry's Text.
For more information, you could refer to Basic bindings and Picker.
Model:
public class Question : INotifyPropertyChanged
{
private float? _answer;
public float? Answer
{
get => _answer;
set
{
_answer = value;
NotifyPropertyChanged();
}
}
protected void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
View model:
public class QuestionViewModel
{
private ObservableCollection<Question> _questions;
public ObservableCollection<Question> Questions
{
get => _questions;
set
{
if (_questions != value)
{
_questions = value;
}
}
}
}
XAML:
<ListView x:Name="ListViewQuestions" SelectionMode="Single" HasUnevenRows="True" HeightRequest="250" VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Entry x:Name="EntryAnswer" Text="{Binding Answer,Mode=TwoWay}" Keyboard="Numeric" FontSize="Medium" VerticalOptions="End"
HorizontalOptions="FillAndExpand" Grid.Row="0" Grid.Column="1" >
<Entry.Behaviors>
<behaviors:EntryMaxValueBehavior MaxValue="{Binding MaxVal}" BindingContext="{Binding BindingContext, Source={x:Reference EntryAnswer}}" />
<behaviors:EntryMinValueBehavior MinValue="{Binding MinVal}" BindingContext="{Binding BindingContext, Source={x:Reference EntryAnswer}}" />
</Entry.Behaviors>
</Entry>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In my page OnAppearing method, I set the ListViewQuestions like this:
var questions = await DataStore.GetQuestions(_inspection.Id);
var questionsViewModel = new QuestionViewModel { Questions = new ObservableCollection<Question>(questions) };
ListViewQuestions.ItemsSource = null;
ListViewQuestions.ItemsSource = questionsViewModel.Questions;
However, when values are entered into EntryAnswer, the setter in the Question model is not called, as I would expect. I thought that maybe this was because the BindingContext for the ListView needed to be set, so I set it like this:
ListViewQuestions.BindingContext = questionsViewModel;
However, the setter in the Question model is still not called. I also tried implementing INotifyPropertyChanged in the QuestionViewModel, but still no joy. I checked that the ObservableCollection in the View Model is set correctly, with actual data, and it is. Can anyone spot what might be going wrong here?
Edit 1: I also tried not setting the ItemSource, but only setting the ListViewQuestions.BindingContext to the view model, but then the ListView was not being populated with any data.
Here is how this works together.
The BindingContext is the object that will be the scope for whatever bindings that are in the page or it's children, unless you specify a different context for a certain child object, but let's not overcomplicate things for now.
This means, that when you have set the BindingContext, all Bindings will now start looking into the object referenced in the BindingContext. In your case, you set the BindingContext to an instance of QuestionViewModel.
You want your ListView, to get its items from the QuestionViewModel.Questions property. So, you set a binding like this:
<ListView x:Name="ListViewQuestions" ItemsSource="{Binding Questions}" ...>.
Questions needs to be a public property in the BindingContext, in our case QuestionViewModel. You got this right already.
Now, whenever you assign something to Questions this should also propagate to your ListView because of the binding.
Inside your ListView you are using a ViewCell, now note, that the scope does change here. Each cell represents an instance of an object inside the ItemsSource. In our case, each cell will hold a Question. You are using this:
<Entry x:Name="EntryAnswer" Text="{Binding Answer,Mode=TwoWay}" ...>
This means Answer needs to be a public property inside Question. You got this right already.
When you implement it like this, basically the only thing you do is fill your view model and assign that to the BindingContext of your page. If you are using an MVVM framework, this might happen automatically.
At some point, you might run into some trouble that the UI doesn't update and you will have to implement the INotifyPropertyChanged interface. Have a close look at what object doesn't update on screen and implement the interface on that object along with the needed plumbing, but from what I can see in this code, this isn't needed right now. And besides, you have implemented it the right way in your Question right now.
I hope this makes sense! It's a bit hard to wrap your head around the first time, but once you get the swing of it, it is pretty easy!
In your Answer Setter try:
set
{
float? temp = null;
if(float.TryParse(value, out temp)
{
_answer = temp;
NotifyPropertyChanged("Answer");
}
}
It seems like for this to work though your setter would have to be called, and you indicate that it is not, so I think it must be the min, max binding where this is kicking out the error. For now perhaps get rid of that and see if the setter will get called.
In WPF using a converter is typical and I think will work with the Xamarin as well. See this for a good example of how to implement IValueConverter.
I am totally new in ZK. I need to create N combobox with their labels dynamically and populate them. I already populate a combobox with its id, but as there can be many combobox I should not know their ids, so It does not solve my problem.
I need to add N combobox, their labels and populate them dynamically. Is there any way to create that group of combobox and set them dynamically? Any ideas?
The code bellow works to populate the combo already knowing its fixed id.
//In this example I assume I have a label and a combobox. But could have 0 to N of them.
private Label lblComboMetadatos;
private Combobox cmbMetadatos;
//THEN
if (cmbMetadatos.getItemCount() == 0) {
lblComboMetadatos.setValue(trdMetaTipoDocumental.getNombreMetadato()); //Here I set the name of label but I should really can not know how many of them could be. There may exist 0..N
for (TrdMetadato trdMetaDato: trdMetaTipoDocumental.getTrdMetadatos()) {
String enumValores = trdMetaDato.getValoresEnumerado(); //Here I set the values of a combobox but I can not know how many of them could be. There may exist 0..N
cmbMetadatos.appendItem(enumValores]);
}
}
<zk>
<window id="idWindow" title="nameWindow" apply="controller.java" border="normal" closable="true" sizable="true" maximizable="true" maximized="true" height="85%" width="150%" style="overflow:auto;">
<!-- CONTINUES -->
<groupbox>
<hlayout>
<label id="lblComboMetadatos" />
<combobox id="cmbMetadatos"></combobox>
</hlayout>
</groupbox>
<!-- CONTINUES -->
</window>
</zk>
This question is very similar to your last question. You should wire the parent container (hlayout in this case) to your controller and then create the components there.
#Wire
private Component container; // your hlayout
#Override // This method should be specified by a composer super class
public void doAfterCompose(Component comp) throws Exception
for (<count an index or loop over data>) {
hlayout.appendChild(new Label("Hello World");
Combobox cb = new Combobox();
// append Comboitems
cb.addEventListener(Events.ON_SELECT, ...);
hlayout.appendChild(cb);
}
}
If you used MVVM, you could use children binding to create the components in zul.
I am able to bind SelectedItem if Selection Mode is single but if it is set to multiple then how do you bind it?
Here is what I tried for Single Selection Mode
<sync:SfDataGrid Grid.Row="1" AutoGenerateColumns="False" AllowSorting="True"
AllowGroupExpandCollapse="True" AutoExpandGroups="True"
SelectionMode="Multiple" ColumnSizer="Star"
ItemsSource="{Binding LstItems}"
SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}"
>
<sync:SfDataGrid.Columns>
<sync:GridTextColumn HeaderText="Name" MappingName="Name" />
<sync:GridTextColumn HeaderText="MRP" MappingName="MRP"/>
<sync:GridTextColumn HeaderText="Category" MappingName="Category" Width="0"/>
</sync:SfDataGrid.Columns>
<sync:SfDataGrid.GroupColumnDescriptions>
<sync:GroupColumnDescription ColumnName="Category"/>
</sync:SfDataGrid.GroupColumnDescriptions>
</sync:SfDataGrid>
In the above xaml, selection mode is set to multiple but I am unable to get the SelectedItems in xaml as mentioned here
https://help.syncfusion.com/xamarin/sfdatagrid/selection
In SfDataGrid, it is not possible to bind the SfDataGrid.SelectedItems property to the view model as like SelectedItem property since we can only get the selected items in SfDataGrid. Hence, you will not be able to bind the values in XAML for SelectedItems property.
However, you can achieve your requirement by writing behavior for SfDataGrid which will not affect the MVVM pattern. Please refer the below code snippet.
<sfGrid:SfDataGrid x:Name="dataGrid"
AutoGenerateColumns="True"
ItemsSource="{Binding OrdersInfo}"
SelectionMode="Multiple">
<b:Interaction.Behaviors>
<b:BehaviorCollection>
<b:EventToCommand Command="{Binding SelectionCommand}"
CommandParameter="{x:Reference Name=dataGrid}"
EventName="SelectionChanged" />
</b:BehaviorCollection>
</b:Interaction.Behaviors>
</sfGrid:SfDataGrid>
// In ViewModel.cs
public ViewModel()
{
selectionCommand = new Command<SfDataGrid>(onSelectionChanged);
selectedItems = new ObservableCollection<object>();
}
private Command<SfDataGrid> selectionCommand;
public Command<SfDataGrid> SelectionCommand
{
get { return selectionCommand; }
set { selectionCommand = value; }
}
private ObservableCollection<object> selectedItems;
public ObservableCollection<object> SelectedItems
{
get { return selectedItems; }
set { selectedItems = value; }
}
private void onSelectionChanged(SfDataGrid obj)
{
//you can get the selected items in the datagrid
selectedItems = obj.SelectedItems;
}
Also, we have prepared a sample for your reference and you can download the same from the below link.
Sample link: http://www.syncfusion.com/downloads/support/directtrac/168321/ze/DataGridDemo352928928
Regards,
Divakar.