Необходимо создать пользовательский контроль FeetInches в XAML - PullRequest
Новая
       0

Необходимо создать пользовательский контроль FeetInches в XAML

0 голосов
/ 19 марта 2020

Я пытаюсь создать элемент управления UWP фут / дюйм, который принимает значение в дюймах и разделяет его на два поля: футы и дюймы. Элемент управления при обновлении пользователем должен обновить внутреннюю модель представления новым значением в дюймах.

enter image description here

Требования

  1. Измените значение в 1, затем значения в 2 и 3 обновите соответственно.
  2. Измените значение в 3, значения в 1 и 2 обновите соответственно

То, как я это написал, приводит к бесконечному l oop. Я даже не уверен, что элемент управления FeetInches написан правильно. Как бы я изменил это, чтобы соответствовать вышеуказанным требованиям?

Загружаемый / запускаемый код доступен в GitHub , но здесь он встроен в соответствии с рекомендациями 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>

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

1 Ответ

1 голос
/ 20 марта 2020

Когда вы подписываете событие PropertyChanged на три свойства зависимости, оно попадет в бесконечное число l oop. Вы можете попробовать подписать событие LostFocus TextBox в FeetInches.xaml, чтобы заменить событие OnPropertyChanged для ваших свойств Feet и Inches, в этом случае оно не попадет в бесконечное число l oop. Например:

.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;
    }
}

При запуске события LostFocus свойство, связанное с Text of TextBox, не изменилось , поэтому вам нужно использовать значение Text непосредственно вместо свойства Feet / Inches, и вам необходимо определить, какой TextBox вызывает это событие.

или , если вы все еще хотите использовать событие OnPropertyChanged для свойств Feet и Inches вместо события LostFocus можно объявить свойство (например, bool valueChanged), чтобы ограничить вызов событий ValueOnPropertyChanged и OnPropertyChanged.

.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;
}

Обновление:

Вы можете использовать свойство Property из данных DependencyPropertyChangedEventArgs , чтобы проверить, какое свойство зависимости изменяется. 

private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    if (e.Property == FeetProperty) {
        //do something
    }
    else{
       //do something
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...