需要在XAML中创建FeetInches用户控件

需要在XAML中创建FeetInches用户控件,xaml,uwp,Xaml,Uwp,我正在尝试创建一个UWP英尺/英寸控件,该控件接受以英寸为单位的值,并将其拆分为英尺和英寸两个字段。当用户更新控件时,应使用新的英寸值更新后端viewmodel 要求 using System; using System.Collections.Generic; using System.ComponentModel; using System.IO; using System.Linq; using System.Runtime.InteropServices.WindowsRuntime;

我正在尝试创建一个UWP英尺/英寸控件,该控件接受以英寸为单位的值,并将其拆分为英尺和英寸两个字段。当用户更新控件时,应使用新的英寸值更新后端viewmodel

要求

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;
    }
}
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;
        }
    }
}
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;
        }
    }
}
  • 更改1中的值,然后更新2和3中的值 因此
  • 更改3中的值,1和2中的值将相应更新
  • 我写这篇文章的方式进入了一个无休止的循环。我甚至不确定FeetInches控件是否正确编写。我将如何更改此项以满足上述要求

    ,但在这里它是根据SO指南内联的

    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>
    
    <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>
    
    <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

    <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>
    
    <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>
    
    <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>
    

    当您为三个依赖属性订阅PropertyChanged事件时,它将进入一个无休止的循环。您可以尝试订阅FeetInches.xaml中TextBox的LostFocus事件,以替换您的英尺和英寸属性的OnPropertyChanged事件,在这种情况下,它不会进入无休止的循环。例如:

    .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"/>
    
    触发LostFocus事件时,与TextBox文本绑定的属性没有更改,因此您需要直接使用文本的值,而不是英尺/英寸属性,并且需要判断哪个TextBox触发此事件

    如果仍要对英尺和英寸属性使用OnPropertyChanged事件而不是LostFocus事件,则可以声明属性(例如bool valueChanged),以限制调用ValueOnPropertyChanged和OnPropertyChanged事件

    .cs:

    更新:

    您可以使用数据中的属性来检查哪些依赖项属性发生了更改

    private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (e.Property == FeetProperty) {
            //do something
        }
        else{
           //do something
        }
    }
    

    谢谢在PropertyChangedEvent中有没有一种方法可以告诉您哪些属性实际发生了更改?我之所以有两种方法,是因为我看不到如何描述哪个属性在变化。