Need to create a FeetInches usercontrol in XAML - xaml

Question

I am trying to create a UWP feet/inches control that takes a value in inches, and splits it into two fields, feet and inches. The control, when updated by the user, should update the backend viewmodel with the new inches value.
Requirements
Change the value in 1, then the values in 2 and 3 update
accordingly.
Change the value in 3, the values in 1 and 2 update accordingly
The way I have this written it gets into an endless loop. I am not even sure the FeetInches control is written properly. How would I change this to meet the above requirements?
Downloadable/runnable code is available in GitHub, but here it is inline per SO guidelines...
App.xaml
<Application x:Class="UWPFeetInches.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWPFeetInches">
<Application.Resources>
<ResourceDictionary>
<local:NullDecimalConverter x:Key="NullDecimalConverter" />
</ResourceDictionary>
</Application.Resources>
</Application>
MainPage.xaml
<Page
x:Class="UWPFeetInches.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="using:UWPFeetInches"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0"
Text="Enter Inches Value:"
Margin="0,50,10,0"
VerticalAlignment="Center" />
<TextBox Grid.Row="0" Grid.Column="1"
Margin="0,50,10,0"
Text="{x:Bind ViewModel.Inches, Mode=TwoWay, Converter={StaticResource NullDecimalConverter}}" />
<TextBlock Grid.Row="1" Grid.Column="0"
Margin="0,50,10,0"
Text="Inches Display:"/>
<TextBlock Grid.Row="1" Grid.Column="1"
Margin="0,50,10,0"
Text="{x:Bind ViewModel.InchesDisplay, Mode=TwoWay}"/>
<TextBlock Grid.Row="2" Grid.Column="0"
Text="Feet / Inches Control:"
Margin="0,50,10,0"
VerticalAlignment="Center" />
<local:FeetInches Grid.Row="2" Grid.Column="1"
Margin="0,50,10,0"
Value="{x:Bind ViewModel.Inches, Mode=TwoWay}" />
</Grid>
</Page>
MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace UWPFeetInches
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.ViewModel = new InchesViewModel();
}
public InchesViewModel ViewModel { get; set; }
}
public class InchesViewModel : INotifyPropertyChanged
{
private decimal? _Inches;
public decimal? Inches
{
get { return _Inches; }
set
{
if (value != _Inches)
{
_Inches = value;
InchesDisplay = _Inches == null ? "{null}" : _Inches.ToString();
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(nameof(Inches)));
}
}
}
private string _InchesDisplay;
public string InchesDisplay
{
get { return _InchesDisplay; }
set
{
if (value != _InchesDisplay)
{
_InchesDisplay = value;
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(nameof(InchesDisplay)));
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
}
NullDecimalConverter.cs
using System;
using Windows.UI.Xaml.Data;
namespace UWPFeetInches
{
public sealed class NullDecimalConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value is decimal m)
{
return m == 0 ? "" : m.ToString();
}
return "";
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
if (!string.IsNullOrWhiteSpace(value?.ToString()))
{
if (Decimal.TryParse(value.ToString(), out decimal m))
{
return m;
}
}
return null;
}
}
}
FeetInches.xaml
<UserControl
x:Class="UWPFeetInches.FeetInches"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:UWPFeetInches"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<StackPanel Orientation="Horizontal">
<TextBox Header="Feet"
Margin="0,0,10,0"
Text="{x:Bind Feet, Mode=TwoWay}" />
<TextBox Header="Inches"
Text="{x:Bind Inches, Mode=TwoWay, Converter={StaticResource NullDecimalConverter}}" />
</StackPanel>
</UserControl>
FeetInches.xaml.cs
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
namespace UWPFeetInches
{
public sealed partial class FeetInches : UserControl
{
public FeetInches()
{
this.InitializeComponent();
}
#region Feet
public int Feet
{
get { return (int)GetValue(FeetProperty); }
set
{
SetValue(FeetProperty, value);
}
}
public static readonly DependencyProperty FeetProperty = DependencyProperty.Register(nameof(Feet), typeof(int), typeof(FeetInches), new PropertyMetadata(0, OnPropertyChanged));
#endregion
#region Inches
public decimal Inches
{
get { return (decimal)GetValue(InchesProperty); }
set
{
SetValue(InchesProperty, value);
}
}
public static readonly DependencyProperty InchesProperty = DependencyProperty.Register(nameof(Inches), typeof(decimal), typeof(FeetInches), new PropertyMetadata(0M, OnPropertyChanged));
#endregion
#region Value
public decimal? Value
{
get { return (decimal)GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
}
public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(nameof(Value), typeof(decimal?), typeof(FeetInches), new PropertyMetadata(null, ValueOnPropertyChanged));
#endregion
private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var control = d as FeetInches;
control.Value = control.Feet * 12 + control.Inches;
}
private static void ValueOnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var control = d as FeetInches;
var inches = control.Value;
control.Feet = inches.HasValue ? (int)(inches.Value / 12M) : 0;
control.Inches = inches.HasValue ? inches.Value - (control.Feet * 12M) : 0M;
}
}
}

Answer 1

When you subscribe the PropertyChanged event for the three dependency properties, it will get into an endless loop. You could try to subscribe the LostFocus event of TextBox in FeetInches.xaml to replace your OnPropertyChanged event for your Feet and Inches properties, in that case, it won't get into an endless loop. For example:
.xaml:
<TextBox Header="Feet"
Margin="0,0,10,0"
x:Name="MyFeet"
Text="{x:Bind Feet, Mode=TwoWay}" LostFocus="TextBox_LostFocus"/>
<TextBox Header="Inches"
x:Name="MyInches"
Text="{x:Bind Inches, Mode=TwoWay, Converter={StaticResource NullDecimalConverter}}" LostFocus="TextBox_LostFocus"/>
.cs:
private void TextBox_LostFocus(object sender, RoutedEventArgs e)
{
var textbox = sender as TextBox;
Decimal.TryParse(textbox.Text, out decimal m);
if (textbox.Name.Equals("MyFeet"))
{
this.Value = m * 12 + this.Inches;
}
else
{
this.Value = this.Feet * 12 + m;
}
}
When triggered the LostFocus event, the property bound with the Text of TextBox has not changed, so you need to use the value of Text directly instead of the Feet/Inches property and you need to judge which TextBox triggers this event.
Or if you still want to use OnPropertyChanged event for Feet and Inches properties instead of LostFocus event, you can declare a property(e.g. bool valueChanged) to limit the calling of ValueOnPropertyChanged and OnPropertyChanged event.
.cs:
private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (valueChanged == false) {
var control = d as FeetInches;
control.Value = control.Feet * 12 + control.Inches;
}
}
private static bool valueChanged = false;
private static void ValueOnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
valueChanged = true;
var control = d as FeetInches;
var inches = control.Value;
control.Feet = inches.HasValue ? (int)(inches.Value / 12M) : 0;
control.Inches = inches.HasValue ? inches.Value - (control.Feet * 12M) : 0M;
valueChanged = false;
}
Update:
You can use the Property property from DependencyPropertyChangedEventArgs data to check which dependency property changes.
private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (e.Property == FeetProperty) {
//do something
}
else{
//do something
}
}