Set WPF Combobox selected item from property setter - xaml

I am using WPF with databinding. I have a Combobox bound to a list of strings. I want the selected item in the list to set a field in my View Model. However, I sometimes want to override the user's selection and re-set the selected value in the Combobox but I don't seem to be able to do that.
Here's the View Model code:
public class SettingsViewModel : INotifyPropertyChanged
{
public enum RateTypes
{
[Description("128Hz")]
Hz128 = 4,
[Description("256Hz")]
Hz256 = 6,
[Description("400Hz")]
Hz400 = 7,
[Description("512Hz")]
Hz512 = 8,
[Description("600Hz")]
Hz600 = 9
}
RateTypes m_SelectedRate;
List<string> RateOptions = ((RateTypes [])Enum.GetValues(typeof(RateTypes)))
.Select(o => o.Description())
.ToList();
public string SelectedRate
{
get {return m_SelectedRate.Description();}
set
{
if (value == RateType.Hz256)
{
MessageBox.Show("256Hz not an option with your system");
m_SelectedRate= IMURate.Hz400;
}
else
{
m_SelectedRate = value;
}
OnPropertyChanged(nameof(SelectedRate));
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyChanged)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
var e = new PropertyChangedEventArgs(propertyChanged);
handler(this, e);
}
}
}
and the XAML has:
<ComboBox Grid.SelectedItem="{Binding SelectedRate, Mode=TwoWay}" ItemsSource="{Binding RateOptions}">
However, when I select 256Hz in the GUI, the value displayed stays as 256Hz instead of changing to 400Hz. If I call OnPropertyChanged(SelectedRate) from a separate function, the value does change.
I've tried using SelectedValue and UpdateSourceTrigger but can't find anything that works.
Any ideas?

Unbelieveable. I spent hours searching for an answer before posting that question but then 10 minutes after posting, I thought of a new search term that led me to the answer.
I simply needed to add IsAsync="true" to SelectedValue in the XAML:
<ComboBox Grid.SelectedItem="{Binding SelectedRate, Mode=TwoWay, IsAsync="true"}" ItemsSource="{Binding RateOptions}">
Oh well, hopefully this will help someone else.

Add Delay=1 fixed the problem for me. The IsAsync=true approach worked, too, but it seems to update the combobox slower sometimes and it created a bug in my GUI where changing the Combobox value in the gui doesnt work once after App start up.
<ComboBox Grid.SelectedItem="{Binding SelectedRate, Mode=TwoWay, Delay=1}" ItemsSource="{Binding RateOptions}">

Related

XAML forms have second picker sorted based on selection in first picker

I have 2 dropdowns (pickers) on a XAML form. The first is an ObservabelCollection of Territories. The second is an ObservableCollection of type Tracks. When the form loads my ViewModel loads both collections and each collection is bound to a picker. I want to filter and display only those tracks that are associated with the selected territory in the second picker.
FYI-the second picker is disabled until a selection is made in the first. Actually I don't require that the second picker's data source be set as the form loads, unless the solution requires it. The selection in the first picker will be the key to filter the data for the second.
I have tried to handle the filtering in the Territory picker's SelectedIndexChanged event but my ObservableCollection 'tracks' is not exposed here.
private void territoryPicker_SelectedIndexChanged(object sender, EventArgs e)
{
var picker = (Picker)sender;
string territory = picker.SelectedItem.ToString();
Tracks _track = tracks.Where(X => X.Territory = territory);<<<==== Does not work
trackPicker.ItemsSource = _track.Track;<<<==== Does not work
trackPicker.IsEnabled = true;
}
I've also tried to not build the Tracks OC until after the Territory is selected like this:
private void territoryPicker_SelectedIndexChanged(object sender, EventArgs e)
{
var picker = (Picker)sender;
string territory = picker.SelectedItem.ToString();
TrackViewModel vm = new TrackViewModel();
var _tracks = (Tracks)vm.Tracks; <<<<<==== This does not work
trackPicker.IsEnabled = true;
}
The ViewModel runs and the tracks are loaded via the API but when it returns here Tracks is empty.
I'm open to a reasonable solution (not 3rd party controls/packages) that will accomplish this task . Thanks
I figured it out by stumbling over the answer while researching another issue. I have been referencing my viewmodel in the {content].xaml page like this.
<ContentPage.BindingContext>
<vm:TrackViewModel />
</ContentPage.BindingContext>
When doing so the resources of that vm were not available in the code behind. But when I reference the VM in the page constructor Like this:
public partial class RequestmyTracks : ContentPage
{
TrackViewModel trackviewmodel = new TrackViewModel();
And then bind it here:
public RequestmyTracks()
{
InitializeComponent();
BindingContext = trackviewmodel;
}
The trackviewmodel is accessible in the SelectedIndexChanged event and everything else was really straight forward, Which looks like this:
private void territoryPicker_SelectedIndexChanged(object sender, EventArgs e)
{
var picker = (Picker)sender;
string territory = picker.SelectedItem.ToString();
ObservableCollection<Tracks> dah = (ObservableCollection<Tracks>)trackviewmodel.Tracks;
List<string> trackNames = new List<string>();
foreach (var track in dah)
{
if (track.Territory == territory)
trackNames.Add(track.Track);
}
trackPicker.ItemsSource = trackNames;
if(trackNames.Count ==1)
trackPicker.SelectedIndex = 0;
trackPicker.IsEnabled = true;
}
Thanks for the help

Updating a property in a viewmodel of popup doesn't update the UI

As in the title I have a problem where updating a property in a viewmodel of popup doesn't update the UI. I use popups from xamarin community toolkit. I'm using a command that does this task:
async Task ShowPopup()
{
MessagingCenter.Send(AnimeGroupObservable, "AnimeGroups");
Shell.Current.ShowPopup(new MediaListGroupsPopup());
}
It sends a message with payload and shows popup. This is popup viewmodel:
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Text;
using System.Windows.Input;
using OtakuApp.Models;
using Xamarin.Forms;
namespace OtakuApp.ViewModels
{
class MediaListGroupsPopupViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string name = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
public ObservableCollection<Group> _AnimeGroups = new ObservableCollection<Group>();
public ObservableCollection<Group> AnimeGroups
{
get => _AnimeGroups;
set
{
if (_AnimeGroups == value)
return;
_AnimeGroups = value;
OnPropertyChanged();
}
}
public String _label;
public String label
{
get => _label;
set
{
if (value == _label)
return;
_label = value;
OnPropertyChanged();
}
}
public MediaListGroupsPopupViewModel()
{
MessagingCenter.Subscribe<ObservableCollection<Group>>(this, "AnimeGroups", (AnimeGroupObservable) =>
{
Console.WriteLine(AnimeGroupObservable[0].Name);
label = AnimeGroupObservable[1].Name;
MessagingCenter.Unsubscribe<ObservableCollection<Group>>(this, "AnimeGroups");
});
}
}
}
I'm planning on having a small collection view of labels to select from. But right now I'm struggling to update one label just for testing purposes, so you can imagine that I've tried collection view and it didn't work. Setting _label to something manually in the code shows that binding works. It's just not updating for some reason.
Popup xaml file:
<?xml version="1.0" encoding="utf-8" ?>
<xct:Popup
x:Class="OtakuApp.Popups.MediaListGroupsPopup"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
Size="300,300">
<StackLayout>
<Label Text="{Binding label}" />
</StackLayout>
</xct:Popup>
So right now I have two problems:
Label doesn't update. It's binded to a property that has INotifyPropertyChanged
Weirdly this subscription happens only the second time (and after that too, just not the first time) I open up a popup. Is this because it's in the constructor? If yes, what's the correct way to deal with it?
Also a small question - I have unsubscribe at the end of subscription. When I didn't have it and I printed out AnimeGroupObservable[0].Name, the first time it was printed one time, the second time I open up the popup two times etc. Is the unsubscribe at the end the correct way to fix this?
since you are passing a single parameter to a single page, using the constructor would be much simpler than MessagingCenter (which is great, but overkill for this scenario)
when creating the page, pass the parameter in the constructor
Shell.Current.ShowPopup(new MediaListGroupsPopup(AnimeGroupObservable));
then modify the page constructor to accept the parameter
public MediaListGroupsPopup(ObservableCollection<Group> groups)
{
// you did't show how you create your VM, but I assume it's something like this
this.BindingContext = new MediaListGroupsPopupViewModel(groups);
}
then modify your VM constructor
public MediaListGroupsPopupViewModel(ObservableCollection<Group> groups)
{
label = groups[1].Name;
}
if you really are only using a single string value, you could just pass that instead of the entire ObservableCollection

UWP Telerik RadDataGrid not allowing me to end row edit by hitting enter

I am having trouble ending an edit of a row in Telerik's UWP RadDataGrid. Once the data is populated I click on a cell to start an edit. After I finish editing the row I hit enter to finish editing but it remains in edit mode. Clicking a cell in another row ends the edit and the new data is intact but the bound collection does not get updated. Below is a screen shot of the grid I am using:
Here is the XAML code in my page:
<tg:RadDataGrid ColumnDataOperationsMode="Flyout" x:Name="grid" ItemsSource="{x:Bind ViewModel.Source}" UserEditMode="Inline" Grid.ColumnSpan="4" Grid.Row="1"/>
I would really appreciate some help. Thanks so much in advance!
After I finish editing the row I hit enter to finish editing but it remains in edit mode.
I created a 16299 UWP project to test and installed the Telerik.UI.for.UniversalWindowsPlatform(1.0.0.7) package for it. Then, I can reproduce this issue. But if I change my project's target version to "15063", when I hit Enter key, it will commit an edit operation successfully. So, this telerik control might has some issues when it's running in 16299. You could report this issue to their official site of Telerik.
And since the Telerik controls of UWP is open source, you could also check its source code and fix this issue by yourself, then you could compile your custom version by yourself and use it in your project.
I saw the relevant code about this issue maybe in this line code: https://github.com/telerik/UI-For-UWP/blob/master/Controls/Grid/Grid.UWP/View/RadDataGrid.Manipulation.cs#L392 Maybe, you could check it.
Clicking a cell in another row ends the edit and the new data is intact but the bound collection does not get updated.
I have not saw your code, so I didn't know where the issue is. But it worked well on my side. You could check my simple code sample for reference:
<telerikGrid:RadDataGrid x:Name="DataGrid" ItemsSource="{x:Bind ls}" UserEditMode="Inline"></telerikGrid:RadDataGrid>
public sealed partial class MainPage : Page
{
public ObservableCollection<Data> ls { get; set; }
public MainPage()
{
this.InitializeComponent();
ls = new ObservableCollection<Data>() {new Data { Country = "India", Capital = "New Delhi"},
new Data { Country = "South Africa", Capital = "Cape Town"},
new Data { Country = "Nigeria", Capital = "Abuja" },
new Data { Country = "Singapore", Capital = "Singapore" } };
}
}
public class Data:INotifyPropertyChanged
{
private string _Country;
public string Country
{
get { return _Country; }
set
{
_Country = value;
RaisePropertyChange("Country");
}
}
private string _Capital;
public string Capital
{
get { return _Capital; }
set
{
_Capital = value;
RaisePropertyChange("Capital");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChange(string propertyName)
{
if (PropertyChanged!= null)
{
PropertyChanged(this,new PropertyChangedEventArgs(propertyName));
}
}
}

Xamarin Forms Dynamically Load Content in a Page

My current set up:
Xamarin Forms, consisting of iOS, Android, WP app and shared PCL.
Using MVVM Light to keep a nice separation of concerns.
Brief intro into what I want to achieve. I want to have a Base page that has a Cancel and Next button. On pressing the Next button Content is loaded dynamically within that base page.
Xaml 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"
x:Class="LogInPresenterView">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Cancel" Priority="0" Order="Primary" Command="{Binding Cancel}"></ToolbarItem>
<ToolbarItem Text="Next" Priority="1" Order="Primary" Command="{Binding Next}"></ToolbarItem>
</ContentPage.ToolbarItems>
</ContentPage>
ViewModel Code:
public class LogInPresenterViewModel : ViewModelBase
{
public LogInPresenterViewModel() {}
private RelayCommand _next;
public RelayCommand Next
{
get
{
return _next ?? (_next = new RelayCommand(async () => await DoNext()));
}
}
private async Task DoNext()
{
// IN HERE I WOULD LIKE TO DYNCAMICALLY LOAD CONTENT / VIEWS
}
}
Usually you would have a StackLayout etc before the element. However, on clicking the Next Toolbar Item I want to dynamically load content (that has a viewmodel).
So maybe my ICommand for my next button checked to see what the current content type was, and depending on that I would load another bit of content.
The scenario would be, the base page would load along with the first bit of content - Enter Email and Password. User enters that then clicks on next, if all ok, the content is replaced with the option to enter a security code, keeping the base Close and Next buttons at the top.
Hopefully this makes sense. I know what I want to do in my head, I just don't know how to translate that into Xamarin Forms...
Ok,
So first job is to create your region service in your PCL. This will look something like this:
using System;
using System.Collections.Generic;
namespace xxx
{
public class RegionService : IRegionService
{
private Dictionary<string, object> _regionDictionary;
public RegionService ()
{
_regionDictionary = new Dictionary<string, object> ();
}
#region IRegionService implementation
public bool RegisterRegion (string regionName, object regionObject)
{
object region = null;
_regionDictionary.TryGetValue (regionName, out region);
if (region != null)
_regionDictionary [regionName] = regionObject;
else
_regionDictionary.Add (regionName, regionObject);
return true;
}
public object ResolveRegion (string regionName)
{
object region = null;
_regionDictionary.TryGetValue (regionName, out region);
if (region == null)
throw new RegionServiceException ("Unable to resolve region with given name");
return region;
}
#endregion
}
}
This when you create your page with the dynamic content register your dynamic contentview in your code behind:
ContentView contentView = this.FindById<ContentView>("myContentView");
regionService.RegisterRegion("DynamicView", contentView);
You'll need to create an interface for your views and pages to use to indicate which region they wish to be presented in:
using System;
namespace xxx
{
public interface IRegionView
{
string GetRegionName ();
}
}
Then in your code behind for your view implement this interface to return the name of the region to display in.
You now need a custom presenter to use this region code. I use MVVMCross, so the details will vary for the MVVM implementation you are using, but essentially something like this is what you need:
public async static Task PresentPage(Page page)
{
if (typeof(IRegionView).GetTypeInfo().IsAssignableFrom(page.GetType().GetTypeInfo()))
{
IRegionService regionService = Mvx.Resolve<IRegionService>();
string regionName = (page as IRegionView).GetRegionName();
Page region = regionService.ResolveRegion(regionName) as Page;
if (typeof(IModalPage).GetTypeInfo().IsAssignableFrom(page.GetType().GetTypeInfo()))
await region.Navigation.PushModalAsync(page);
else if (typeof(IPopupPage).GetTypeInfo().IsAssignableFrom(page.GetType().GetTypeInfo()))
region.PushOverlayPage(page);
else if (typeof(NavigationPage).GetTypeInfo().IsAssignableFrom(region.GetType().GetTypeInfo()))
await (region as NavigationPage).PushAsync(page);
}
}
I hope this is useful for you :)
So if this was me. I would create a region service where the contentview registers a unique region name.
Content would then be marked to use that region, and a custom presenter can be used to show the view model's content in the appropriate region.
I'm on my phone whilst travelling at the moment but I can post some code later on if that helps :)
Tristan
You can dynamically load Xamarin Forms UI with XAML.
Old Answer:
This can be achieved with the use of the LoadFromXaml method. It works in the same was as XamlReader.Load in Silverlight/WPF. It is a hidden method that can be only accessed through reflection. There is an article on how to do it here:
http://www.cazzulino.com/dynamic-forms.html
But, I would like to ask to you go to this feature request at Xamarin and ask that the method be made public so that it becomes a fully supported feature:
https://forums.xamarin.com/discussion/comment/252626

AutoCompleteBox and SearchText Clear

This is not a question but my answer to a problem I could not find a solution to on the internet.
I had a problem clearing the SearchText in an MVVM Silverlight application. I could clear clear the SelectedItem and Text but the SearchText was left behind. It is read only and cannot be changed by binding.
Example: AutoCompleteBox with a list of Countries. When the user wants to enter Australia they enter 'au' at this point the list appers with Austria and Australia. The user can then select Australia and move on. At the end of editing they click on a 'Save' button. At this point it is likely that you would want to clear the data forn for entering new data.
Even if you have bindings to the SelectedItem and the Text properties and you set them to 'null' and string.Empty respectively the SearchText property remains and the AutoCompleteBox will not clear but will contain 'au'.
I posted about this all over the internet but could get no answer on the control itself and so I came at it from a different angle which may help someone who ends up frustrated like me.
I am using a Silverlight Navigation template application which uses a NavigationFrame in which to load Silverlight pages. I noticed that if I navigated to another page and returned to my data form the SearchText was cleared. Any values that were bound to properties remained valid, just the SearchText had cleared on all AutoCompleteBoxes. I therefore used the PageConductor method of injecting the NavigationFrame into the ViewModel where I could call the refresh method. I got this method from John Papa's example from the Silverlight Firestarter event , I simply added a Refresh method to the IPageConductor interface so I am now able to call 'PageConductor.Refresh()' which is like reloading the page. I hope this helps someone out there.
var t = ProductCombo.ItemsSource;
ProductCombo.ItemsSource = null;
ProductCombo.Text = string.Empty;
ProductCombo.SelectedValue = null;
//ProductCombo.Text = string.Empty;
ProductCombo.ItemsSource = t;
Try this please.it worked for me
You must clear the property bindeaded to Text inside set part of SelectedItem Binded property, like this:
public string AnalisisText
{
get { return _analisisText; }
set
{
if (_analisisText == value)
{
return;
}
_analisisText = value;
RaisePropertyChanged(AnalisisTextPropertyName);
}
}
public DatosAutoCompletaPedidosDetalleViewDTO AnalisisSelect
{
get { return _analisisSelect; }
set
{
if (_analisisSelect == value)
{
return;
}
_analisisSelect = value;
if (_analisisSelect == null) AnalisisText = "";
RaisePropertyChanged(AnalisisSelectPropertyName);
}
}
So, when you set null to property SelectedItem , the other property will set to "".
The easiest way I've found is to extend the AutoCompleteBox:
public class AutoCompleteBoxClear : AutoCompleteBox
{
public AutoCompleteBoxClear()
{
DataContextChanged += (o, e) =>
{
if (SelectedItem == null)
Text = string.Empty;
};
}
}
Now use your new AutoCompleteBoxClear control in your XAML.
This clears the text only when autocompletebox datacontext changes to null (ie the user clicks add in the dataform.)
Note: I think DataContextChanged is available only in Silverlight 5, but I'd guess that anyone still using Silverlight these days would likely have upgraded by now...
var t = ProductCombo.ItemsSource;
ProductCombo.ItemsSource = null;
ProductCombo.Text = string.Empty;
ProductCombo.SelectedValue = null;
//ProductCombo.Text = string.Empty;
ProductCombo.ItemsSource = t;
Unfotunately this is code-behind and I needed an MVVM solution.
I recently had the same problem with my WPF app. I found out that the solution is not to set the object bound to SelectedItem to null, but to its default value. Took me a while to figure this out. So in your example, it would not be SelectedCountry = null, but SelectedCountry = new SelectedCountry(). In this case the SearchText is cleared also. Check my SO post regarding this matter: Autocompletebox doesn't clear keyboard strokes.
Sure SearchText property is read-only, but we can get the child component of AutoCompleteBox:
var searchText = autoCompBox.GetChildByType<TextBox>(item => item.Name == "Text");
And now we can reset SearchText via Text property of TextBox-component:
if (searchText != null) searchText.Text = string.Empty;
In C# 6.0 it is more laconically:
autoCompBox.GetChildByType<TextBox>(item => item.Name == "Text")?.Text = string.Empty;