MAUI: Listview cannot be refreshed automatically - maui

There are 2 elements binding data in my test app, one is Button, another is Listview. But Listview cannnot be refreshed automatically. But if I disable ButtonText = $"It took {totalSecs} seconds" in ViewModel, Listview can be refreshed automatically. Any ideas? TIA.
Here is the Xaml file.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:test"
x:Class="test.MainPage">
<ContentPage.BindingContext>
<local:PurchasesInvoiceMasterViewModel />
</ContentPage.BindingContext>
<ScrollView>
<VerticalStackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Start">
<Button
x:Name="PurchasesInvoiceList"
Text="{Binding ButtonText}"
Command="{Binding AddListCommand}"
SemanticProperties.Hint="Get Purchases Invoice List"
HorizontalOptions="Center" />
<ListView x:Name="PurchasesInvoiceMasterObjectView" ItemsSource="{Binding PurchasesInvoiceMasterObject}" HeightRequest="500">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding purchases_invoice_id}"
Detail="{Binding purchases_invoice_date }" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</VerticalStackLayout>
</ScrollView>
Here is ViewModel.
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
using System.Xml.Linq;
namespace test
{
class PurchasesInvoiceMasterViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public ICommand AddListCommand { get; set; }
private string _buttonText = "Purchases Invoice List";
public string ButtonText
{
get => _buttonText;
set
{
if (_buttonText != value)
{
_buttonText = value;
OnPropertyChanged("");
}
}
}
private ObservableCollection<PurchasesInvoiceMaster> _purchasesInvoiceMasterObject = new();
public ObservableCollection<PurchasesInvoiceMaster> PurchasesInvoiceMasterObject
{
get => _purchasesInvoiceMasterObject;
set
{
if (_purchasesInvoiceMasterObject != value)
{
_purchasesInvoiceMasterObject = value;
OnPropertyChanged("");
}
}
}
public PurchasesInvoiceMasterViewModel()
{
AddListCommand = new Command(() =>
{
double statrtSecs = DateTime.Now.TimeOfDay.TotalSeconds;
string purchasesInvoiceMaster = "test.PurchasesInvoiceMaster.xml";
using (Stream streamPurchasesInvoiceMaster = this.GetType().Assembly.
GetManifestResourceStream(purchasesInvoiceMaster))
{
using (var readerPurchasesInvoiceMaster = new System.IO.StreamReader(streamPurchasesInvoiceMaster))
{
var xmlpurchasesInvoiceMaster = XDocument.Load(readerPurchasesInvoiceMaster);
foreach (XElement xmmd in xmlpurchasesInvoiceMaster.Descendants("curtemp01"))
{
_purchasesInvoiceMasterObject.Add(new PurchasesInvoiceMaster
{
purchases_invoice_id = xmmd.Element("purchases_invoice_id").Value,
purchases_invoice_date = xmmd.Element("purchases_invoice_date").Value,
});
}
}
}
double endSecs = DateTime.Now.TimeOfDay.TotalSeconds;
float totalSecs = (float)(endSecs - statrtSecs);
ButtonText = $"It took {totalSecs} seconds";
});
}
public void OnPropertyChanged([CallerMemberName] string name = "") =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
}

Related

CommunityToolkit.Maui.Core.Views.MauiPopup throws System.ObjectDisposedException on Close()

The following code results in a System.ObjectDisposedException on the line Close(result); in BarcodeScannerPopup.xaml.cs when a barcode is detected by the CameraBarcodeReaderView.
The detected barcode is correctly displayed in the label in BarcodePage.
Any idea why this exception is thrown?
BarcodePage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="MyApp.BarcodePage"
x:DataType="vm:BarcodeViewModel"
xmlns:vm="clr-namespace:MyApp.ViewModels"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui">
<VerticalStackLayout
Margin="20">
<Label
Text="{Binding Barcode}"/>
<Button
Command="{Binding ScanBarcodeClickCommand}"
Text="Scan barcode"/>
</VerticalStackLayout>
</ContentPage>
BarcodePage.xaml.cs
using MyApp.ViewModels;
namespace MyApp.Views;
public partial class BarcodePage : ContentPage
{
public BarcodePage(BarcodeViewModel viewModel)
{
InitializeComponent();
BindingContext = viewModel;
}
}
BarcodeScannerPopup.xaml
<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup
x:Class="MyApp.BarcodeScannerPopup"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.MAUI"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui">
<VerticalStackLayout
Margin="20">
<Label
Text="Add a barcode by scanning it."
VerticalOptions="Center"
HorizontalOptions="Center"/>
<zxing:CameraBarcodeReaderView
x:Name="barcodeReader"
BarcodesDetected="BarcodesDetected"
HeightRequest="300"
IsDetecting="True"
Margin="5"
WidthRequest="300"/>
</VerticalStackLayout>
</toolkit:Popup>
BarcodeScannerPopup.xaml.cs
using CommunityToolkit.Maui.Views;
using ZXing.Net.Maui;
namespace MyApp.Views;
public partial class BarcodeScannerPopup : Popup
{
public BarcodeScannerPopup()
{
InitializeComponent();
barcodeReader.Options = new BarcodeReaderOptions
{
AutoRotate = true,
Multiple = false
};
}
private void BarcodesDetected(object sender, BarcodeDetectionEventArgs e)
{
var result = e.Results[0].Value;
Close(result);
}
}
BarcodeViewModel.cs
using CommunityToolkit.Maui.Views;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using MyApp.Views;
namespace MyApp.ViewModels;
public partial class BarcodeViewModel : ObservableObject
{
[ObservableProperty]
private string _barcode;
private BarcodeScannerPopup _popup = new BarcodeScannerPopup();
[RelayCommand]
public async Task ScanBarcodeClick()
{
Barcode = (string)await Application.Current.MainPage.ShowPopupAsync(_popup);
}
}
#ToolmakerSteve was right. The CameraBarcodeReaderView continues sending data which results in the System.ObjectDisposedException. setting the IsDetecting property to false prevents this. As this was a PoC I didn't add a proper null check on e, so I've added as a good coding practise in this example.
BarcodeScannerPopup.xaml.cs
using CommunityToolkit.Maui.Views;
using ZXing.Net.Maui;
namespace MyApp.Views;
public partial class BarcodeScannerPopup : Popup
{
public BarcodeScannerPopup()
{
InitializeComponent();
barcodeReader.Options = new BarcodeReaderOptions
{
AutoRotate = true,
Multiple = false
};
}
private void BarcodesDetected(object sender, BarcodeDetectionEventArgs e)
{
var result = e?.Results?.Any() == true
? e.Results[0].Value
: string.Empty;
IsDetecting = false;
Close(result);
}
}

After navigating back button command is not responding to click

I am trying to learn .NET Maui by building a simple app like the android Contacts app. I have a main page that has a list of items with a floating button at the bottom to add a new item as shown in the xaml below. When the user clicks on the imagebutton I navigate to a CreatePage that allows the user to enter the values for each field in an Account object. I am using the CommunityToolkit.MVVM library to handle the MVVM stuff.
In MainPageViewModel I navigate to the CreatePage using the "Shell.Current.GoToAsync(route)" in the CreateNewAccount method shown in the MainPageViewModel:
This works fine for the first time I navigate to add a new Account. When I navigate back to the MainPage and try to click the imagebutton again to add another Account the button is non-responsive. I do not see why it is not handling the button click when I navigated back. Any thoughts?
This is part of the XAML in MainPage.xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<CollectionView Grid.Row="0"
Background="Transparent"
IsGrouped="False"
ItemSizingStrategy="MeasureAllItems"
ItemsLayout="VerticalList"
ItemsSource="{Binding Accounts}"
SelectedItem="{Binding SelectedAccount, Mode=TwoWay}"
SelectionMode="Single">
<CollectionView.EmptyView>
<StackLayout Padding="12">
<Label HorizontalOptions="Center" Text="No Accounts" />
</StackLayout>
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="m:Account">
<StackLayout Orientation="Horizontal" Padding="10">
<Label Text="{Binding AccountName}"
FontSize="Large"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<ImageButton
Grid.Row="0"
Command="{Binding CreateCommand}"
Source="add_box_black_48dp.svg"
Background="Transparent"
HorizontalOptions="End"
VerticalOptions="End"/>
</Grid>
public class MainPageViewModel : ObservableObject
{
private IDataContext _context;
private bool _isBusy;
private Account _selectedAccount;
public ObservableCollection<Account> Accounts { get; private set; }
public AsyncRelayCommand RefreshCommand { get; private set; }
public AsyncRelayCommand CreateCommand { get; private set; }
public bool IsBusy { get=>_isBusy; set => SetProperty(ref _isBusy, value); }
public Account SelectedAccount { get=>_selectedAccount; set => SetProperty(ref _selectedAccount, value); }
public MainPageViewModel(IDataContext context)
{
_context = context;
Accounts = new ObservableCollection<Account>();
RefreshCommand = new AsyncRelayCommand(Refresh);
CreateCommand = new AsyncRelayCommand(CreateNewAccount);
Accounts.Add(new Account { Id = 1, AccountName = "a1", UserName = "a2", Password = "a3" });
}
async Task CreateNewAccount()
{
var route = $"{nameof(CreatePage)}";
await Shell.Current.GoToAsync(route);
}
internal async Task InitializeAsync()
{
await Refresh();
}
async Task Refresh()
{
IsBusy = true;
var accounts = await _context.GetAllAsync();
if (Accounts.Count > 0)
{
Accounts.Clear();
}
foreach (var item in accounts)
{
Accounts.Add(item);
}
IsBusy = false;
}
}
In CreatePageViewModel I create an AsyncRelayCommand as follows and navigate back to the mainpage after the Account is added using "Shell.Current.GoToAsync("..")"
public AsyncRelayCommand SaveCommand { get; private set; }
public CreatePageViewModel(IDataContext dataContext)
{
_dataContext = dataContext;
NewAccount = new Account();
SaveCommand = new AsyncRelayCommand(AddAccount);
}
private async Task AddAccount()
{
var accountFound = await _dataContext.FindByName(NewAccount.AccountName);
if (accountFound is not null)
{
await Application.Current.MainPage.DisplayAlert("Alert", "Account alreaady exists", "OK");
return;
}
await _dataContext.InsertAccountAsync(NewAccount);
await Shell.Current.GoToAsync("..");
}
why you await all events?
async Task CreateNewAccount()
{
var route = $"{nameof(CreatePage)}";
// we won't wait - await Shell.Current.GoToAsync(route);
_ = Shell.Current.GoToAsync(route);
}
and everything will work

Bind ProgressRing to mvvm

I am downloading data from an api, and displaying that data in the view. As I wait I want to display a ProgressRing, but when I bind it dosen't work
Bind the ring to the cityData property, with a two way mode and update it when the property changes
Created a new property in the VM, that is true by default and it will turn false when I get the data back
XAML
<TextBox x:Name="currentLocation"
PlaceholderText="Please wait..."
IsReadOnly="True"
Margin="20"
Width="300"
Text="{Binding cityData, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<ListView RelativePanel.Below="currentLocation"
x:Name="ForecastList"
Margin="20"
SelectedItem="{Binding currentDay, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
ItemsSource="{Binding dailyForecasts}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10">
<TextBlock x:Name="dateTB" Text="{Binding Date.DayOfWeek}" />
<TextBlock x:Name="highTB" Text="{Binding Temperature.Maximum.Value, Converter={StaticResource cv}}" FontSize="10" />
<TextBlock x:Name="lowTB" FontSize="10" Text="{Binding Temperature.Minimum.Value, Converter={StaticResource cv}}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ProgressRing x:Name="pRing" RelativePanel.Above="ForecastList" RelativePanel.AlignHorizontalCenterWith="currentLocation" IsActive="{Binding ring, Mode=TwoWay}" RelativePanel.Below="currentLocation" />
VM
public class WeatherVM: INotifyPropertyChanged
{
public AccuWeather accuWeather { get; set; }
private string _cityData;
public string cityData
{
get { return _cityData; }
set
{
if (value != _cityData)
{
_cityData = value;
onPropertyChanged("cityData");
GetWeatherData();
}
}
}
private DailyForecast _currentDay;
public DailyForecast currentDay
{
get { return _currentDay; }
set
{
if (value != _currentDay) \
{
_currentDay = value;
onPropertyChanged("currentDay");
}
}
}
public bool ring { get; set; } = true;
public ObservableCollection<DailyForecast> dailyForecasts { get; set; }
public WeatherVM()
{
GetCuurentLocation();
dailyForecasts = new ObservableCollection<DailyForecast>();
}
private async void GetCuurentLocation() {
cityData = await BingLocator.GetCityData();
}
public async void GetWeatherData() {
var geoposition = await LocationManager.GetGeopositionAsync();
var currentLocationKey = await WeatherAPI.GetCityDstaAsync(geoposition.Coordinate.Point.Position.Latitude, geoposition.Coordinate.Point.Position.Longitude);
var weatherData = await WeatherAPI.GetWeatherAsync(currentLocationKey.Key);
if (weatherData != null) {
foreach (var item in weatherData.DailyForecasts) {
dailyForecasts.Add(item);
}
}
currentDay = dailyForecasts[0];
ring = false;
}
public event PropertyChangedEventHandler PropertyChanged;
private void onPropertyChanged(string property) {
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
}
}
}
The progress ring appears when the app launch, and disappear when the data is returned
From your code, it seems to be a layout issue. First you put ListView below currentLocation, then set ProgressRing above ListView and below currentLocation, so the height of ProgressRing wil be zero. I'm not clear about your layout, you can try to only set RelativePanel.Above="ForecastList" for ProgressRing to see if it will appear.
You can use Windows Community Toolkit control for showing progress ring (Busy indicator).
<Page ...
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"/>
<controls:Loading x:Name="LoadingControl" IsLoading="{Binding IsBusy}">
<!-- Loading screen content -->
</controls:Loading>

Xamarin Forms with Prism - Problem with using WebService

Can anyone help me? I created simply project Xamarin Forms with Prism i VS2017 on Android (screen). I used Prism Template Pack. I would like connect project with my WebService. here is a link to screen of all project
I have two projects PrismCoursApp and PrismCoursApp.Droid. First project contains SecondPageViewModel.cs where I try use connected WebService (wsMES) but I can't add namespace with PrismCoursApp.Droid.
The namespace of project PrismCourseApp.Android is PrismCourseApp.Droid and
PrismCourseApp.Android depends on PrismCourseApp.
I could add reference to Web service only in PrismCoursApp.Android project but I would like to use it in SecondPageViewModel.cs in PrismCourseApp.
Can someone tell me what I'm doing wrong?
Thanks
SecondPageViewModel.cs
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
using PrismCourseApp.Models;
using System.Collections.ObjectModel;
namespace PrismCourseApp.ViewModels
{
public class SecondPageViewModel : BindableBase, INavigationAware
{
//zmienna do WebService
//wsMES.WSwitoMES ws = new wsMES.WSwitoMES();
private string _title;
public string Title
{
get { return _title; }
set { SetProperty(ref _title, value); }
}
private string _UserCode;
public string UserCode
{
get { return _UserCode; }
set { SetProperty(ref _UserCode, value); }
}
private string _LokalizCode;
public string LokalizCode
{
get { return _LokalizCode; }
set { SetProperty(ref _LokalizCode, value); }
}
public SecondPageViewModel()
{
UserCode = AppStateTest.User;
LokalizCode = AppStateTest.CurrentCode;
Title = "Użytkownik/Lokalizacja";
}
public void OnNavigatedFrom(INavigationParameters parameters)
{
}
public void OnNavigatedTo(INavigationParameters parameters)
{
if (parameters.ContainsKey("par1"))
{
string par1 = (string)parameters["par1"];
string par2 = (string)parameters["par2"];
}
}
public void OnNavigatingTo(INavigationParameters parameters)
{
}
}
}
SecondPage.axml
<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="PrismCourseApp.Views.SecondPage"
BackgroundColor="White"
Title="{Binding Title}"
xmlns:b="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
xmlns:c="clr-namespace:PrismCourseApp.Converters;assembly=PrismCourseApp">
<ContentPage.Resources>
<ResourceDictionary>
<!--<c:ItemTappedEventArgsConverter x:Key="itemTappedEventArgsConverter" />-->
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout
Spacing="20">
<Label
Text="Zalogowany użytkownik:"
TextColor="Gray"/>
<Label
Text="{Binding UserCode}"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
<Label
Text="Lokalizacja:"
TextColor="Gray"/>
<Label
Text="{Binding LokalizCode}"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
<ListView
x:Name="lstView">
<!--ItemsSource="{Binding MyDatas}">-->
<!--<ListView.Behaviors>
<b:EventToCommandBehavior EventName="ItemTapped"
Command="{Binding ItemTappedCommand}"
EventArgsConverter="{StaticResource itemTappedEventArgsConverter}" />
</ListView.Behaviors>-->
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding name}" Detail="{Binding comment}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
SecondPage.axml.cs
using Xamarin.Forms;
using PrismCourseApp.Models;
using System.Collections.ObjectModel;
namespace PrismCourseApp.Views
{
public partial class SecondPage : ContentPage
{
//Elementy do ListView (klasa MyDate w PrismCourseApp)
private ObservableCollection<MyDate> MyDatas { get; set; }
public SecondPage()
{
InitializeComponent();
MyDatas = new ObservableCollection<MyDate>();
lstView.ItemsSource = MyDatas;
for (int i = 0; i < 30; i++)
{
MyDatas.Add(new MyDate
{
name = "Pozycja " + (i+1).ToString(),
comment = "Miejsce na szczegóły " + (i+1).ToString()
});
}
}
}
}
MainActivity.cs in Android Project
using Android.App;
using Android.Content.PM;
using Android.OS;
using Prism;
using Prism.Ioc;
namespace PrismCourseApp.Droid
{
[Activity(Label = "PrismCourseApp", Icon = "#drawable/ic_launcher", Theme = "#style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(bundle);
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App(new AndroidInitializer()));
}
}
public class AndroidInitializer : IPlatformInitializer
{
public void RegisterTypes(IContainerRegistry container)
{
// Register any platform specific implementations
}
}
}
Summarising the discussion in the comments above:
One should not make a web service dependent upon something specific to one of many client platforms. It's preferable to put the service's interface between the server and the part of the client that's shared between the different client implementations.
Say you have a mobile app for Android and IOS. Then you'll have two projects MyApp.Droid and MyApp.IOS for the respective client-specific implementations. Also, there's a project that both of them reference, and that (hopefully) contains most of your app's client-side logic: MyApp.Logic.
Now for the server: you have the MyApp.Server project that implements the service. If you need to define interfaces to communicate between the app and the service (WCF comes to mind), you define a project referenced by both the client-side logic (MyApp.Logic) and the server implementation (MyApp.Server): MyApp.Interface.
MyApp.Droid & MyApp.IOS -ref-> MyApp.Logic -ref-> MyApp.Interface <-ref- MyApp.Server

UWP - How to specify the order of updates when use x:Bind?

I'm developing a UWP app and I'm facing a problem. The app uses the MVVM pattern with Template10. I have created a similar solution that recreates the problem that I'm facing. In that solution, a list of orders are displayed, the user chooses an order and then click the "Edit" button. Then a second page is displayed and pre-loaded with the previous selected order, in this second page the user can edit the order. The problem is in the second page, the data bound to comboboxes doesn't show. Maybe the problem is related to this question. In my case, the SelectedValue is set before the ItemsSource. After debugging, I have reached these lines of code in OrderEditionPage.g.cs:
private void Update_ViewModel(global::ComboApp.ViewModels.OrderEditionPageViewModel obj, int phase)
{
this.bindingsTracking.UpdateChildListeners_ViewModel(obj);
if (obj != null)
{
if ((phase & (NOT_PHASED | DATA_CHANGED | (1 << 0))) != 0)
{
this.Update_ViewModel_SelectedOrder(obj.SelectedOrder, phase);
}
if ((phase & (NOT_PHASED | (1 << 0))) != 0)
{
this.Update_ViewModel_BusinessAssociates(obj.BusinessAssociates, phase);
this.Update_ViewModel_TransactionTypes(obj.TransactionTypes, phase);
this.Update_ViewModel_OrderTypes(obj.OrderTypes, phase);
this.Update_ViewModel_ShowSelectedOrder(obj.ShowSelectedOrder, phase);
}
}
}
If I could achieve this line of code be executed at last, my problem would be solved: this.Update_ViewModel_SelectedOrder(obj.SelectedOrder, phase);
How could I achieve this? How does Visual Studio determine the order of this lines?
OrderEditionPage.xaml
<Page
x:Class="ComboApp.Views.OrderEditionPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:myconverters="using:ComboApp.Converters"
xmlns:t10converters="using:Template10.Converters"
mc:Ignorable="d">
<Page.Resources>
<t10converters:ChangeTypeConverter x:Key="TypeConverter" />
<myconverters:DateTimeConverter x:Key="DateTimeConverter" />
</Page.Resources>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel
Padding="15, 5"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBox
Header="Order #"
Margin="5"
Width="150"
HorizontalAlignment="Left"
Text="{x:Bind ViewModel.SelectedOrder.ExternalId, Mode=TwoWay}" />
<ComboBox
Header="Business Associate"
Margin="5"
MinWidth="300"
SelectedValuePath="BusinessAssociateId"
DisplayMemberPath="Name1"
ItemsSource="{x:Bind ViewModel.BusinessAssociates}"
SelectedValue="{x:Bind ViewModel.SelectedOrder.BusinessAssociateId, Mode=TwoWay, Converter={StaticResource TypeConverter}}" />
<DatePicker
Header="Delivery Date"
Margin="5"
MinWidth="0"
Width="200"
Date="{x:Bind ViewModel.SelectedOrder.DeliveryDate, Mode=TwoWay, Converter={StaticResource DateTimeConverter}}" />
<ComboBox
Header="Transaction"
MinWidth="200"
Margin="5"
SelectedValuePath="Value"
DisplayMemberPath="Display"
ItemsSource="{x:Bind ViewModel.TransactionTypes}"
SelectedValue="{x:Bind ViewModel.SelectedOrder.TransactionType, Mode=TwoWay}" />
<TextBox
Header="Priority"
Margin="5"
MaxWidth="150"
HorizontalAlignment="Left"
Text="{x:Bind ViewModel.SelectedOrder.Priority}" />
<ComboBox
Header="Type"
Margin="5"
MinWidth="200"
SelectedValuePath="Value"
DisplayMemberPath="Display"
ItemsSource="{x:Bind ViewModel.OrderTypes}"
SelectedValue="{x:Bind ViewModel.SelectedOrder.OrderType, Mode=TwoWay}" />
<TextBox
Header="Information"
Margin="5"
Height="100"
AcceptsReturn="True"
TextWrapping="Wrap"
ScrollViewer.VerticalScrollBarVisibility="Auto"
Text="{x:Bind ViewModel.SelectedOrder.Information, Mode=TwoWay}" />
<Button
Margin="5"
Content="Show"
Width="100"
HorizontalAlignment="Right"
Command="{x:Bind ViewModel.ShowSelectedOrder}" />
</StackPanel>
</ScrollViewer>
</Page>
OrderEditionPage.xaml.cs
using ComboApp.ViewModels;
using Windows.UI.Xaml.Controls;
namespace ComboApp.Views
{
public sealed partial class OrderEditionPage : Page
{
public OrderEditionPageViewModel ViewModel => DataContext as OrderEditionPageViewModel;
public OrderEditionPage()
{
this.InitializeComponent();
}
}
}
OrderEditionPageViewModel.cs
using ComboApp.Models;
using ComboApp.Services;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using Template10.Mvvm;
using Template10.Utils;
using Windows.UI.Xaml.Navigation;
namespace ComboApp.ViewModels
{
public class OrderEditionPageViewModel
: ViewModelBase
{
private IBusinessAssociateService businessAssociateService;
private Order selectedOrder;
public Order SelectedOrder
{
get { return selectedOrder; }
set { Set(ref selectedOrder, value); }
}
public ObservableCollection<object> TransactionTypes { get; set; } = new ObservableCollection<object>();
public ObservableCollection<object> OrderTypes { get; set; } = new ObservableCollection<object>();
public ObservableCollection<BusinessAssociate> BusinessAssociates { get; set; } = new ObservableCollection<BusinessAssociate>();
public OrderEditionPageViewModel(IBusinessAssociateService businessAssociateService)
{
this.businessAssociateService = businessAssociateService;
TransactionTypes.Add(new { Value = "I", Display = "Incoming" });
TransactionTypes.Add(new { Value = "O", Display = "Outgoing" });
TransactionTypes.Add(new { Value = "T", Display = "Transfer" });
OrderTypes.Add(new { Value = "M", Display = "Manual" });
OrderTypes.Add(new { Value = "A", Display = "Automatic" });
OrderTypes.Add(new { Value = "S", Display = "Semi-automatic" });
}
public override async Task OnNavigatedToAsync(object parameter, NavigationMode mode, IDictionary<string, object> state)
{
// Loading buiness associates
var response = await businessAssociateService.GetNextPageAsync();
if (response.IsSuccessful)
{
BusinessAssociates.AddRange(response.Result.Items);
}
SelectedOrder = (Order)parameter;
await base.OnNavigatedToAsync(parameter, mode, state);
}
private DelegateCommand showSelectedOrder;
public DelegateCommand ShowSelectedOrder => showSelectedOrder ?? (showSelectedOrder = new DelegateCommand(async () =>
{
await Views.MessageBox.ShowAsync(JsonConvert.SerializeObject(SelectedOrder, Formatting.Indented));
}));
}
}
It is a known issue of x:Bind when the SelectedValue of a ComboBox is sometimes set before its ItemsSource, you can read more about it here.
As a workaround you can use Bindings instead of x:Bind, but make sure that ItemsSource binding is placed before SelectedValue binding in XAML.
Alternatively you can try calling Bindings.Update() in the Page_Loaded event of your second page.