We Keep Coding

Xamarin.Forms Update Binding Label inside CarouselView

I have this label like so:
<Label x:Name="QuestionText" FontSize="62" Text="{Binding question}" HorizontalTextAlignment="Center" Padding="0,20,0,0" />
This is inside a CarouselView:
<CarouselView
x:Name="Questions"
HeightRequest="475">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="Center" Padding="10">
<Label x:Name="QuestionText" FontSize="62" Text="{Binding question}" HorizontalTextAlignment="Center" Padding="0,20,0,0" />
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
And I am populating the CarouselView like so:
protected override async void OnAppearing()
{
base.OnAppearing();
questions = await webService.GetTaskQuestions(taskcategory);
List<QuestionsClass> currentPage = new List<QuestionsClass>();
currentPage.Add(questions[currentPageIndex]);
Questions.ItemsSource = currentPage;
}
And I am trying to update my text like so:
questions[currentPageIndex].question = questions[currentPageIndex].question.Replace("_", questions[currentPageIndex].answer);
I have even tried:
Device.BeginInvokeOnMainThread(() =>
{
questions[currentPageIndex].question = questions[currentPageIndex].question.Replace("_", questions[currentPageIndex].answer);
});
And still nothing, here is my class:
public class QuestionsClass
{
public string question { get; set; }
public string answer { get; set; }
}
How do I update a label inside a CarouselView?
UPDATE
I have tried with INotifyPropertyChanged:
public class QuestionsClass : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public string question { get; set; }
public string actualQuestion
{
get
{
return question;
}
set
{
question = value;
OnPropertyChanged();
}
}
public string answer { get; set; }
protected void OnPropertyChanged([CallerMemberName] string quetion = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(question));
}
}
Here is my label:
<Label FontSize="62" Text="{Binding actualQuestion}" HorizontalTextAlignment="Center" Padding="0,20,0,0" />
and here is how I am updating it:
questions[currentPageIndex].question = questions[currentPageIndex].question.Replace("_", questions[currentPageIndex].answer);
UPDATE
My class was wrong, this is the correct class and is now working:
public class QuestionsClass : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string _question;
public string question {
get
{
return _question;
}
set
{
_question = value;
NotifyPropertyChanged("question");
}
}
public string answer { get; set; }
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}

Stopwatch MVVM Xamarin Forms

It is my first time working in xamarin forms, I am now trying to make an app for myself. In my app I made a timer in my view model, but the seconds only go to 59 and reset automatically to 0. Does anyone have an idea how I can solve this and How I can make a stop button and a reset button my view model?
public class TimerPageViewModel : ViewModelBase, INotifyPropertyChanged
{
Stopwatch stopwatch = new Stopwatch();
private string _stopWatchHours;
private string _stopWatchMinutes;
private string _stopWatchSeconds;
public TimerPageViewModel(INavigationService navigationService)
: base(navigationService)
{
Title = "Timer";
Start = new Command(OnStartTimerExecute);
Stop = new Command(OnStop);
Reset = new Command(onReset);
StopWatchHours = stopwatch.Elapsed.Hours.ToString();
StopWatchMinutes = stopwatch.Elapsed.Minutes.ToString();
StopWatchSeconds = stopwatch.Elapsed.Seconds.ToString();
}
public string StopWatchHours
{
get { return _stopWatchHours; }
set { _stopWatchHours = value; OnPropertyChanged("StopWatchHours"); }
}
public string StopWatchMinutes
{
get { return _stopWatchMinutes; }
set { _stopWatchMinutes = value; OnPropertyChanged("StopWatchSeconds"); }
}
public string StopWatchSeconds
{
get { return _stopWatchSeconds; }
set { _stopWatchSeconds = value; OnPropertyChanged("StopWatchSeconds"); }
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
var changed = PropertyChanged;
if (changed != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public ICommand Start { get; set; }
public ICommand Stop { get; set; }
public ICommand Reset { get; set; }
private void OnStartTimerExecute()
{
stopwatch.Start();
Device.StartTimer(TimeSpan.FromSeconds(1), () =>
{
StopWatchHours = stopwatch.Elapsed.Hours.ToString();
StopWatchMinutes = stopwatch.Elapsed.Minutes.ToString();
StopWatchSeconds = stopwatch.Elapsed.Seconds.ToString();
return true;
});
}
private void OnStop()
{
stopwatch.Stop();
stopwatch = null;
}
private void onReset()
{
stopwatch.Reset();
}
}
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
prism:ViewModelLocator.AutowireViewModel="True"
NavigationPage.HasNavigationBar="false"
x:Class="MyApp.Views.TimerPage"
IconImageSource="timer_icon_2x.png"
Title="{Binding Title}">
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Label HorizontalOptions="Center" FontSize="45" TextColor="#00A8E8">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding StopWatchHours}"/>
<Span Text=":"/>
<Span Text="{Binding StopWatchMinutes}"/>
<Span Text=":"/>
<Span Text="{Binding StopWatchSeconds}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Button Command="{Binding Start}"/>
<Button Command="{Binding Stop}"/>
<Button Command="{Binding Reset}"/>
</StackLayout>
</ContentPage>

you are raising OnPropertyChanged("StopWatchSeconds"); instead of OnPropertyChanged("StopWatchMinutes");
public string StopWatchMinutes
{
get { return _stopWatchMinutes; }
set { _stopWatchMinutes = value;
OnPropertyChanged("StopWatchSeconds");
}
}

WPF databinding and refreshing its UI

I've posted the same question before but it wasn't clear (and contained too many self-induced errors in attempt to fix the code) so re-posting it with more details.
So I have "MainUiWindow.xaml" file which uses databinding like this:
<ItemsControl x:Name="gridSettingsMonster" Grid.Row="0" Grid.Column="0" ItemsSource="{Binding SettingsMonster}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type core:Setting}">
<Grid x:Name="gridMonster">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Label}" IsEnabled="{Binding Enabled}" ToolTip="{Binding Description}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10 5 10 5" FontWeight="{Binding Fontweight}" ></TextBlock>
<ts:ToggleSwitch x:Name="toggleSwitchMonsterAll" IsEnabled="{Binding Enabled}" Grid.Row="0" Grid.Column="1" Command ="{Binding TriggerAction}" IsChecked="{Binding Value}" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5 0 20 2" Foreground="White" UncheckedText="" CheckedText="" UncheckedBorderBrush="#FF333333" CheckedBorderBrush="#FF2D2D30"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
SettingsMonster binding:
SettingsMonster.Add(new Setting(ConfigHelper.Main.Values.Overlay.MonsterWidget.IsVisible, true, "Monster_1", "Monster Widget", "Show/Hide Monsters Widget", new Command(_ =>
{
ConfigHelper.Main.Values.Overlay.MonsterWidget.IsVisible = !ConfigHelper.Main.Values.Overlay.MonsterWidget.IsVisible;
ConfigHelper.Main.Save();
})));
SettingsMonster.Add(new Setting(ConfigHelper.Main.Values.Overlay.MonsterWidget.ShowUnchangedMonsters, ConfigHelper.Main.Values.Overlay.MonsterWidget.IsVisible, "Monster_2", " Show unchanged monsters", "Automatically hide monsters if they are not damaged", new Command(_ =>
{
ConfigHelper.Main.Values.Overlay.MonsterWidget.ShowUnchangedMonsters = !ConfigHelper.Main.Values.Overlay.MonsterWidget.ShowUnchangedMonsters;
ConfigHelper.Main.Save();
})));
And finally, the Setting class:
public class Setting
{
public bool Value { get; set; }
public bool Enabled { get; set; }
public string Name { get; }
public string Label { get; }
public string Description { get; }
public string Checkbox_visibility { get; }
public string Fontweight { get; }
public List<Setting>SubSettings { get; }
public Command TriggerAction { get; }
public Setting(bool value, bool enabled, string name, string label, string description, Command action = null)
{
Value = value;
Enabled = enabled;
Name = name;
Label = label;
Description = description;
SubSettings = new List<Setting>();
TriggerAction = action;
}
}
Problem:
When I run the build and use the "ToggleSwitch" (it's basically a open-source checkbox) to change the value of "ConfigHelper.Main.Values.Overlay.MonsterWidget.IsVisible", it unchecks the UI correctly.
I want this checkbox to control the other checkboxes (i.e. "Monster_2") as well, so that when the main one is turned off, set IsEnabled value for the child checkboxes/textblocks to FALSE.
I got to the stage where if I check off the main one, restart the build, then the child checkboxes/textblocks are all set as IsEnabled=False. However, I want the same to happen in real time (i.e. refresh the UI without having to restart).
Any help would be appreciated.
EDIT 1.
So I have attempted implementing the INotifyPropertyChanged in my Settings class which looks like the following:
public class Setting : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private bool _value;
private bool _enabled;
public bool Value
{
get
{
return _value;
}
set
{
if (_value == value)
return;
_value = value;
OnPropertyChanged(nameof(Enabled));
}
}
public bool Enabled
{
get
{
return _enabled;
}
set
{
if (_enabled == value)
return;
_enabled = value;
OnPropertyChanged(nameof(Enabled));
}
}
protected void OnPropertyChanged(string name)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
public string Name { get; }
public string Label { get; }
public string Description { get; }
public string Checkbox_visibility { get; }
public string Fontweight { get; }
public List<Setting>SubSettings { get; }
public Command TriggerAction { get; }
public Setting(bool value, bool enabled, string name, string label, string description, Command action = null)
{
Value = value;
Enabled = enabled;
Name = name;
Label = label;
Description = description;
SubSettings = new List<Setting>();
TriggerAction = action;
}
But my UI is still not refreshing yet... any help?

My viewmodel was referencing incorrect variable in the first place.
I have implemented INotifyPropertyChange in my Setting object as below, and also added a command to be run when the checkbox is triggered.
public class Setting : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string name)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
private bool _value;
private bool _enabled;
public bool Value
{
get
{
return _value;
}
set
{
if (_value == value)
return;
_value = value;
OnPropertyChanged(nameof(Value));
}
}
public bool Enabled
{
get
{
return _enabled;
}
set
{
if (_enabled == value)
return;
_enabled = value;
OnPropertyChanged(nameof(Enabled));
}
}
public string Name { get; }
public string Label { get; }
public string Description { get; }
public string Fontweight { get; }
public List<Setting>SubSettings { get; }
public Command TriggerAction { get; }
public Setting(bool _value, bool _enabled, string name, string label, string description, Command action = null)
{
Value = _value;
Enabled = _enabled;
Name = name;
Label = label;
Description = description;
SubSettings = new List<Setting>();
TriggerAction = action;
}
}

Xamarin Forms Binding with namespace declaration error

I'm new to Xamarin and I'm trying to bind my ViewModel to the View but I couldn't do it yet.
Here's the code.
(Model)
namespace CadastroProdutos
{
public class Produto
{
public string Codigo { get; set; }
public string Identificacao { get; set; }
public string Tipo { get; set; }
}
}
(Observable Model)
namespace CadastroProdutos
{
public class ObservableProduto : INotifyPropertyChanged
{
Produto produto;
public ObservableProduto()
{
}
public event PropertyChangedEventHandler PropertyChanged;
public string Codigo
{
set
{
if (!value.Equals(produto.Codigo, StringComparison.Ordinal))
{
produto.Codigo = value;
OnPropertyChanged("Codigo");
}
}
get
{
return produto.Codigo;
}
}
public string Identificacao
{
set
{
if (!value.Equals(produto.Identificacao, StringComparison.Ordinal))
{
produto.Identificacao = value;
OnPropertyChanged("Identificacao");
}
}
get
{
return produto.Identificacao;
}
}
public string Tipo
{
set
{
if (!value.Equals(produto.Tipo, StringComparison.Ordinal))
{
produto.Tipo = value;
OnPropertyChanged("Tipo");
}
}
get
{
return produto.Tipo;
}
}
void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
var handler = PropertyChanged;
if (handler == null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
(ViewModel)
namespace CadastroProdutos
{
public class ListProdutoViewModel
{
ObservableCollection<ObservableProduto> produtos;
public ListProdutoViewModel()
{
produtos = new ObservableCollection<ObservableProduto>();
}
public ObservableCollection<ObservableProduto> Produtos
{
set
{
if (value != produtos)
{
produtos = value;
}
}
get
{
return produtos;
}
}
}
}
(View)
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CadastroProdutos;assembly=CadastroProdutos"
x:Class="CadastroProdutos.ListProduto"
Title="Listagem de Produtos">
<ContentPage.Content>
<ListView x:Name="listView" Margin="20,40,20,20" ItemsSource="{Binding Produtos}">
<ListView.BindingContext>
<local:ListProdutoViewModel />
</ListView.BindingContext>
<ListView.Header>
<StackLayout Orientation="Vertical" >
<Label Text="Produtos" HorizontalOptions="Center"/>
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" >
<TextCell Text="{Binding Identificacao}"/>
</StackLayout>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
Getting an error "Xamarin.Forms.Xaml.XamlParseException Position 10:6. Type local:ListProdutoViewModel not found in xmlns clr-namespace:CadastroProdutos;assembly=CadastroProdutos".
What am I missing on the namespace declaration?
Thanks in advance.

Ensure that whether ListProdutoViewModel is deifined under the namespace - CadastroProdutos.
Also, you no need to mention the assembly there in, local: assembly=CadastroProdutos. So try to run the application after removing the above assembly code. Like as below,
local="clr-namespace:CadastroProdutos"

Xamarin Forms Binding not showing on ListView

I'm new to Xamarin and I'm trying to bind my ViewModel to the View but I couldn't do it yet.
Here's the code.
(Model)
namespace CadastroProdutos
{
public class Produto
{
public string Codigo { get; set; }
public string Identificacao { get; set; }
public string Tipo { get; set; }
}
}
(Observable Model)
namespace CadastroProdutos
{
public class ObservableProduto : INotifyPropertyChanged
{
Produto produto;
public ObservableProduto()
{
produto = new Produto()
{
Identificacao = "Primeiro",
Codigo = "123456"
};
produto = new Produto()
{
Identificacao = "Segundo",
Codigo = "123456"
};
produto = new Produto()
{
Identificacao = "Terceiro",
Codigo = "123456"
};
}
public event PropertyChangedEventHandler PropertyChanged;
public string Codigo
{
set
{
if (!value.Equals(produto.Codigo, StringComparison.Ordinal))
{
produto.Codigo = value;
OnPropertyChanged("Codigo");
}
}
get
{
return produto.Codigo;
}
}
public string Identificacao
{
set
{
if (!value.Equals(produto.Identificacao, StringComparison.Ordinal))
{
produto.Identificacao = value;
OnPropertyChanged("Identificacao");
}
}
get
{
return produto.Identificacao;
}
}
public string Tipo
{
set
{
if (!value.Equals(produto.Tipo, StringComparison.Ordinal))
{
produto.Tipo = value;
OnPropertyChanged("Tipo");
}
}
get
{
return produto.Tipo;
}
}
void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
var handler = PropertyChanged;
if (handler == null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
(ViewModel)
namespace CadastroProdutos
{
public class ListProdutoViewModel
{
ObservableCollection<ObservableProduto> produtos;
public ListProdutoViewModel()
{
produtos = new ObservableCollection<ObservableProduto>();
}
public ObservableCollection<ObservableProduto> Produtos
{
set
{
if (value != produtos)
{
produtos = value;
}
}
get
{
return produtos;
}
}
}
}
(View)
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CadastroProdutos;"
x:Class="CadastroProdutos.ListProduto"
Title="Listagem de Produtos">
<ContentPage.Content>
<ListView x:Name="listView" Margin="20,40,20,20" ItemsSource="{Binding Produtos}">
<ListView.BindingContext>
<local:ListProdutoViewModel />
</ListView.BindingContext>
<ListView.Header>
<StackLayout Orientation="Vertical" >
<Label Text="Produtos" HorizontalOptions="Center"/>
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" >
<TextCell Text="{Binding Identificacao}"/>
</StackLayout>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
It not worked, It didn't show those elements on the list. Can someone help me?
Thanks in advance.

You're not quite understanding the MVVM approach, but you're almost there. You don't need to have the ObservableProduto class. You can make your Produto class your model.
This is your Produto model. I went ahead and changed it up for you.
namespace CadastroProdutos
{
public class Produto : INotifyPropertyChanged
{
private string codigo;
public string Codigo
{
get {return codigo;}
set {codigo=value; OnPropertyChanged(); }
}
private string identificacao;
public string Identificacao
{
get {return identificacao;}
set {identificacao=value; OnPropertyChanged(); }
}
private string tipo ;
public string Tipo
{
get {return tipo;}
set {tipo=value; OnPropertyChanged(); }
}
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName]string propertyName = "") =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
You should contain an ObservableCollection of your Produtos in a viewmodel. I see you've done that. I've edited it a bit. You may need to be careful about totally resetting your ObservableCollection on a set.
namespace CadastroProdutos
{
public class ListProdutoViewModel
{
ObservableCollection<Produto> produtos;
public ListProdutoViewModel()
{
produtos = new ObservableCollection<Produto>();
}
public ObservableCollection<Produto> Produtos
{
set
{
if (value != produtos)
{
produtos = value;
}
}
get
{
return produtos;
}
}
}
}
Note: you will need to add items to your ObservableColleciton still.