We Keep Coding

Prevent WPF ViewModel from creating new instance when navigating to other views

I am attempting to prevent my application from deleting a view and then creating a new one each time it's navigated around. I have a dashboard that will run a test program, if I select the settings view, then back to the dashboard, it has deleted the running test and initialized a new view. I need to keep the same view instance alive so that the test can continue to run while the user navigates to the settings view and back again but I cant exactly figure out how to successfully do that. I have attempted making the instance static but that doesn't seem to make a difference.
MainViewModel
class MainVM : ViewModelBase
{
private object _currentView;
public object CurrentView
{
get { return _currentView; }
set { _currentView = value; OnPropertyChanged(); }
}
public ICommand DashboardCommand { get; set; }
public ICommand SettingsCommand { get; set; }
public static DashboardVM DashboardInstance { get; } = new DashboardVM();
public static SettingsVM SettingsInstance { get; } = new SettingsVM();
private void Dashboard(object obj) => CurrentView = DashboardInstance;
private void Settings(object obj) => CurrentView = SettingsInstance;
public MainVM()
{
DashboardCommand = new RelayCommand(Dashboard);
SettingsCommand = new RelayCommand(Settings);
// Startup Page
CurrentView = DashboardInstance;
}
}
ViewModelBase
public partial class ViewModelBase : ObservableObject, INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged([CallerMemberName] string propName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
}
public void NotifyPropertyChanged(string propName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
}
}
MainView - Navigation
<!-- Navigation Panel -->
<Grid HorizontalAlignment="Left" Width="76">
<Border Background="#3D5A8A" CornerRadius="10,0,0,10" />
<StackPanel Height="1200" Width="76">
<!-- Dashboard Button -->
<nav:Button Style="{StaticResource NavButton_Style}"
Command="{Binding DashboardCommand}"
IsChecked="True">
<Grid>
<Image Source="Images/dash_black_50.png"
Style="{StaticResource NavImage_Style}" />
<TextBlock Text="Dashboard"
Style="{StaticResource NavText_Style}" />
</Grid>
</nav:Button>
<!-- Settings Button -->
<nav:Button Style="{StaticResource NavButton_Style}"
Command="{Binding SettingsCommand}">
<Grid>
<Image Source="Images/gear_black_50.png"
Style="{StaticResource NavImage_Style}" />
<TextBlock Text="Settings"
Style="{StaticResource NavText_Style}" />
</Grid>
</nav:Button>
</StackPanel>
</Grid>
DashboardVM
class DashboardVM : ViewModelBase
{
enum TestItemStatus
{
Reset,
Queued,
InProgress,
Pass,
Fail
}
private readonly PageModel _pageModel;
private string _StartButtonText,
_WaveRelayEthernetText;
private bool isTestRunning;
public DashboardVM()
{
_pageModel = new PageModel();
_StartButtonText = "Start Test";
_WaveRelayEthernetText = string.Empty;
StartButtonCommand = new RelayCommand(o => StartButtonClick("StartButton"));
}
#region Text Handlers
public string StartButtonText
{
get { return _StartButtonText; }
set { _StartButtonText = value; NotifyPropertyChanged("StartButtonText"); }
}
public string WaveRelayEthernetText
{
get { return _WaveRelayEthernetText; }
set { _WaveRelayEthernetText = value; NotifyPropertyChanged("WaveRelayEthernetText"); }
}
#endregion
private bool TestRunning
{
get { return isTestRunning; }
set { isTestRunning = value;
if (isTestRunning) { StartButtonText = "Stop Test"; }
else { StartButtonText = "Start Test";
ResetTestItems();
}
NotifyPropertyChanged("TestRunning");
}
}
public ICommand StartButtonCommand { get; set; }
private void StartButtonClick(object sender)
{
if(TestRunning)
{
TestRunning = false;
}
else
{
SetTestItemsToQueued();
MessageBox.Show("Please plug in Tube 1");
// Start program.
TestRunning = true;
WaveRelayEthernetText = TestItemStatusEnumToString(TestItemStatus.InProgress);
}
}
private string TestItemStatusEnumToString(TestItemStatus temp)
{
if (temp == TestItemStatus.Reset) { return string.Empty; }
else if (temp == TestItemStatus.Queued) { return "Queued"; }
else if (temp == TestItemStatus.InProgress) { return "In Progress"; }
else if (temp == TestItemStatus.Pass) { return "Pass"; }
else if (temp == TestItemStatus.Fail) { return "Fail"; }
else { return string.Empty; }
}
private void SetTestItemsToQueued()
{
WaveRelayEthernetText = TestItemStatusEnumToString(TestItemStatus.Queued);
}
private void ResetTestItems()
{
WaveRelayEthernetText = TestItemStatusEnumToString(TestItemStatus.Reset);
}
}
Image for reference:

My Issue was in the App.xaml, I link a DataTemplate file like this:
<ResourceDictionary Source="Utilities/DataTemplate.xaml" />
Inside the data template, I had this code that linked the views to the view models.
<ResourceDictionary [...]">
<DataTemplate DataType="{x:Type vm:DashboardVM}">
<view:Dashboard />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:SettingsVM}">
<view:Settings />
</DataTemplate>
</ResourceDictionary>
I changed that code to link the two to this:
<ResourceDictionary [...]>
<view:Dashboard x:Key="DashboardViewKey"/>
<view:Settings x:Key="SettingsViewKey"/>
<DataTemplate DataType="{x:Type vm:DashboardVM}">
<ContentControl Content="{StaticResource DashboardViewKey}" />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:SettingsVM}">
<ContentControl Content="{StaticResource SettingsViewKey}" />
</DataTemplate>
</ResourceDictionary>
I am now receiveing the expected behavior of being able to navigate without the Dashboard constructor being called, thus the view does not destory and recreate.
I hope someone else finds this useful.

There is a way to group sliders in Xamarin.Forms to change value toghether?

I'm trying to group various sliders elements to work together. In example if I have two elements, both are set to 50 (values goes from 0 to 100), the sum of the values must be always 100, so if I set one of the sliders to value 70, the other one must decrease dynamically to 30 value.
<ListView x:Name="listView"
ItemSource="myList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Slider x:Name="slider"
Maximum="100"
Minimum="0"
Value="{Binding MyValue}"
HorizontalOptions="FillAndExpand"
MinimumTrackColor="Black"
MaximumTrackColor="Black"
ThumbColor="{StaticResource myColor}"
ValueChanged="OnValueChanged"
PropertyChanging="ChangingSliderValue"/>
<Label Text="{Binding Source={x:Reference slider}, Path=Value, StringFormat='{0:0}'}"
FontSize="Medium"
FontAttributes="Bold"
HorizontalOptions="End"
WidhtRequest="40"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The C# class of my objects is
public class MyClass : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private int _value;
private string _name;
private bool _someBool;
public int MyValue { get {return _value;} set {_value = value;} }
public string Name { get {return _name;} set {_name = value;} }
public bool SomeBool { get {return _someBool;} set {_someBool = value; OnPropertyChanged();} }
void OnPropertyChanged ([CallerMemberName] string propertyName = null)
{
var handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
And part of the class of the Xaml page is:
namespace MyApp
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SliderPage: ContentPage
{
private ObservableCollection<MyClass> list = new ObservableCollection<MyClass>();
...
public SliderPage ()
{
InitializeComponent();
InitList();
listView.ItemsSource = list;
...
}
private void InitList () ...
private void ChangingSliderValue (object sender, PropertyChangedEventArgs e)
{
//Code to stick together the slider...
}
}
Any suggestion of how to achieve my goal?

work but is not showing dynamically
You need to implement the interface INotifyPropertyChanged on property MyValue so that the element will update in runtime .
By the way , since you had used data binding in your project . It would be better to handle logic in ViewModel. So you could modify the code like following
in Xmal
<ListView
ItemsSource="{Binding MySource}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" HeightRequest="300" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Slider x:Name="slider"
Maximum="100"
Minimum="0"
Value="{Binding MyValue,Mode=TwoWay}"
HorizontalOptions="FillAndExpand"
MinimumTrackColor="Black"
MaximumTrackColor="Black"/>
<Label Text="{Binding Source={x:Reference slider}, Path=Value, StringFormat='{0:0}'}"
FontSize="20"
FontAttributes="Bold"
WidthRequest="40"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
in Code behind
Model
public class MyClass : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public int Id { get; set; } // add this property to index the slider
private int _value;
private string _name;
private bool _someBool;
public int MyValue {
get
{
return _value;
}
set
{
if(_value!=value)
{
_value = value;
OnPropertyChanged("MyValue");
}
}
}
public string Name { get { return _name; } set { _name = value; } }
public bool SomeBool { get { return _someBool; } set { _someBool = value; OnPropertyChanged("SomeBool"); } }
void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
var handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
ViewModel
public class MyViewModel
{
public ObservableCollection<MyClass> MySource { get; set; }
bool isFirstLoad = true;
public MyViewModel()
{
MySource = new ObservableCollection<MyClass>() {
new MyClass(){MyValue = 50,Id=0 },
new MyClass(){MyValue = 50,Id=1 },
};
foreach (MyClass model in MySource)
{
model.PropertyChanged += Model_PropertyChanged;
}
}
private void Model_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
if (e.PropertyName== "MyValue")
{
//handle your logic here as you need
MyClass model = sender as MyClass;
foreach (MyClass item in MySource)
{
if (model.Id != item.Id)
{
item.MyValue = 100 - model.MyValue;
}
}
}
}
}
ContentPage
public xxxPage()
{
InitializeComponent();
BindingContext = new MyViewModel();
}

How can I wtite my code behind for checkbox in MVVM?

I have a code for checkbox. Please tell me how to write it in MVVM?
There is a function that I can choose only one checkbox. In general I understand that I must to write command.
XAML:
<StackLayout>
<!-- Place new controls here -->
<ListView ItemsSource="{Binding Items}" ItemSelected="ListView_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<CheckBox HorizontalOptions="Start" Color="Black" CheckedChanged="CheckBox_CheckedChanged"
IsChecked="{Binding IsSelected}"
/>
<Label Text="meow" TextColor="Gray"></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
CODE BEHIND
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = new MainPageViewModel();
}
Model previousModel;
private void CheckBox_CheckedChanged(object sender, CheckedChangedEventArgs e)
{
if (previousModel != null)
{
previousModel.IsSelected = false;
}
Model currentModel = ((CheckBox)sender).BindingContext as Model;
previousModel = currentModel;
if (currentModel.IsSelected)
{
var viewModel = BindingContext as MainPageViewModel;
int index = viewModel.Items.IndexOf(currentModel);
}
}
private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
if (previousModel != null)
{
previousModel.IsSelected = false;
}
Model currentModel = e.SelectedItem as Model;
currentModel.IsSelected = true;
previousModel = currentModel;
}
}
ViewModel
public class MainPageViewModel
{
public List<Model> Items { set; get; }
public MainPageViewModel()
{
List<Model> list = new List<Model>();
for (int i=0; i<10; i++)
{
list.Add(new Model { IsSelected = false });
}
Items = list;
}
}
Model
public class Model : INotifyPropertyChanged
{
bool isSelected;
public bool IsSelected
{
set
{
isSelected = value;
onPropertyChanged();
}
get => isSelected;
}
public event PropertyChangedEventHandler PropertyChanged;
void onPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}

For an event to command use Corcav.Behavior nuget
https://github.com/corradocavalli/Corcav.Behaviors
...
xmlns:corcav="clr-namespace:Corcav.Behaviors;assembly=Corcav.Behaviors"
...
<CheckBox>
<corcav:Interaction.Behaviors>
<corcav:BehaviorCollection>
<corcav:EventToCommand EventName="CheckedChanged" Command="{Binding Path=CheckBoxChangedCommand}" Commandparameter="{Binding .}"/>
</corcav:BehaviorCollection>
</corcav:Interaction.Behaviors>
</CheckBox>
Add this command in ViewModel and write your logic
public ICommand CheckBoxChangedCommand{ get; set; }
...
CheckBoxChangedCommand= new Command<object>(CheckBoxChanged);
...
private void CheckBoxChanged(object obj)
{
//set all list/collection element to false with linq
if(obj is Model model)
{
model.IsSelected = true;
}
}

For now, CheckBox do not support Command. This issue has reported on Github and have not fixed. We could follow this enhancement. https://github.com/xamarin/Xamarin.Forms/issues/6606
You could use the InputKit instead. Install Xamarin.Forms.InputKit on NuGet.
It provides CheckChangedCommand.
CheckChangedCommand: (Command) Bindable Command, executed when check changed.
<input:CheckBox HorizontalOptions="Start" Color="Black" CheckChangedCommand="{Binding CheckBoxChangedCommand}">

Change content of UserControl from Page code behind

So I have a user control:
<StackPanel Orientation="Vertical"
Margin="10">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Stretch"
Margin="10">
<TextBlock Text="{x:Bind FileName, Mode=OneTime}"
HorizontalAlignment="Left"/>
<TextBlock Text="{x:Bind DownloadSpeed, Mode=OneWay}"
HorizontalAlignment="Right"/>
</StackPanel>
<ProgressBar Name="PbDownload"
HorizontalAlignment="Stretch" />
<TextBlock Text="{x:Bind DownloadCompletePercent, Mode=OneWay}"/>
</StackPanel>
User control code behind:
public sealed partial class UCDownloadCard : UserControl
{
public UCDownloadCard()
{
this.InitializeComponent();
}
public string FileName { get; set; }
public string DownloadSpeed { get; set; }
public string DownloadCompletePercent { get; set; }
}
What I am trying to do is to show file download status using this user control. Whenever a new download is started, I want to programmatically add a new user control and then update the values in it as the download happens.
Currently I am doing something like this:
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
public CancellationTokenSource CancellationTokenSource { get; set; }
public List<DownloadOperation> ActiveDownloads { get; set; } = new List<DownloadOperation>();
public List<UCDownloadCard> AddedCards { get; set; } = new List<UCDownloadCard>();
private async Task HandleDownloadAsync(DownloadOperation downloadOperation, CancellationToken cancellationToken = new CancellationToken())
{
ActiveDownloads.Add(downloadOperation);
...
...
try
{
AddDownloadProgressCard();
await downloadOperation.StartAsync().AsTask(CancellationTokenSource.Token, progressCallback);
}
finally
{
...
...
}
}
private void AddDownloadProgressCard()
{
var card = new UCDownloadCard
{
Name = $"Card{AddedCards.Count}",
FileName = "Filename.pdf",
DownloadCompletePercent = "0% completed",
DownloadSpeed = "0 KB/s"
};
AddedCards.Add(card);
OutputArea.Children.Add(card);
}
private void DownloadProgressChanged(DownloadOperation downloadOperation)
{
var downloadPercent = 100 * ((double)downloadOperation.Progress.BytesReceived / (double)downloadOperation.Progress.TotalBytesToReceive);
this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.High, () =>
{
AddedCards[0].DownloadCompletePercent = downloadPercent.ToString();
Debug.WriteLine($"Updating Progress: {downloadPercent}%");
});
}
}
I am able to add the UserControl to the OutputArea but the values in it are not updating. But I am sure that the AddedCards[0].DownloadCompletePercent = downloadPercent.ToString(); is being executed multiple times because the Debug.WritLine just below it is actually printing to the output window.
How can I update the values in the UserControl ?

Firstly, you should change your UserControl with x:Bind Mode=TwoWay.See {x:Bind} markup extension for more details.
Then you should implement the INotifyPropertyChanged interface and implement the PropertyChanged event. The code you can refer the PropertyChanged event.
Here is a simple sample, you can have a reference.
UserControl.xaml,
<StackPanel Orientation="Vertical"
Margin="10">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Stretch"
Margin="10">
<TextBlock Text="{x:Bind DownloadCompletePercent, Mode=TwoWay}"/>
</StackPanel>
UserControl.xaml.cs,
public sealed partial class UCDownloadCard : UserControl, INotifyPropertyChanged
{
public UCDownloadCard()
{
this.InitializeComponent();
}
private string downloadCompletePercent;
public string DownloadCompletePercent
{
get
{
return downloadCompletePercent;
}
set
{
downloadCompletePercent = value;
RaisePropertyChanged("DownloadCompletePercent");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string name)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
}
Then you can add this UserControl and update its downloadCompletePercent,
In the MainPage.xaml.cs,
private void DownloadProgress(DownloadOperation obj)
{
BackgroundDownloadProgress currentProgress = obj.Progress;
double percent;
if (currentProgress.TotalBytesToReceive > 0)
{
percent = currentProgress.BytesReceived * 100 / currentProgress.TotalBytesToReceive;
Debug.WriteLine(percent);
uCDownloadCard.DownloadCompletePercent = percent.ToString();
}
}
UCDownloadCard uCDownloadCard;
private void Button_Click_2(object sender, RoutedEventArgs e)
{
uCDownloadCard = new UCDownloadCard();
MainPagePanel.Children.Add(uCDownloadCard);
}

Binding string property to a status bar text

I'm trying to bind a string property to show in my status bar if my database is connected. Here's the code:
C#
public class TimeBase : INotifyPropertyChanged
{
private DXTickDB db;
string[] args = new string[] { };
public event PropertyChangedEventHandler PropertyChanged;
private bool isTBconnected;
public string connectionStatus { get; set; }
public bool tb_isconnected
{
get { return isTBconnected; }
set
{
if (value != isTBconnected)
{
isTBconnected = value;
if(isTBconnected == false)
{
connectionStatus = "TimeBase is not connected";
}
else
{
connectionStatus = "TimeBase is connected";
}
OnPropertyChanged("connectionStatus");
}
}
}
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
#region TimeBase Connection
public void ConnectToTimeBase()
{
if (args.Length == 0)
args = new string[] { "not available for security reasons" };
db = TickDBFactory.createFromUrl(args[0]);
try
{
db.open(true);
tb_isconnected = true;
}
catch
{
tb_isconnected = false;
}
}
#endregion
This is the Xaml for the status bar in my main window:
<StatusBar Height="23" DockPanel.Dock="Bottom" Background="Green">
<StatusBarItem>
<StackPanel Orientation="Horizontal">
<TextBlock
Foreground="{StaticResource Foreground}"
Text="{Binding Path=connectionStatus}">
</TextBlock>
</StackPanel>
</StatusBarItem>
</StatusBar>
I'm trying to bind it to the string property connectionStatus but no text appears even though when I debug it I can see connectionStatus updated. Any suggestions to what's wrong here?

DataContext property should contain your model like so:
TimeBase timeBaseInstance;
public MainWindow()
{
timeBaseInstance = new TimeBase();
//Set the dataContext so bindings can iteract with your data
DataContext = timeBaseInstance;
InitializeComponent();
}