使用WPF,MVVM和DP的UserControl

时间:2018-10-09 13:16:41

标签: c# wpf mvvm dependency-properties

我正在尝试专门设计一个UserControl,一个NumericUpDownControl。

<UserControl x:Class="SettingsDialog.Controls.NumericUpDownControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:SettingsDialog.Controls"
             xmlns:viewModels="clr-namespace:SettingsDialog.ViewModels"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="18"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBox Text="{Binding Value}" Grid.Row="0" Grid.RowSpan="2" Height="20" VerticalContentAlignment="Center"/>
        <RepeatButton Content="5" Grid.Column="1" Grid.Row="0" FontSize="8" Height="10" FontFamily="Marlett" VerticalContentAlignment="Center"/>
        <RepeatButton Content="6" Grid.Column="1" Grid.Row="1" FontSize="8" Height="10" FontFamily="Marlett"  VerticalContentAlignment="Center"/>
    </Grid>
</UserControl>

在UserControl的代码背后,我有以下内容:

  public static readonly DependencyProperty ValueProperty =
     DependencyProperty.Register(
        "Value", typeof(int),
        typeof(NumericUpDownControl)
     );

  public int Value
  {
     get => (int)GetValue(ValueProperty);
     set => SetValue(ValueProperty, value);
  }

它可以正常工作,因为我可以像这样在MainWindow.xaml中使用它:

<controls:NumericUpDownControl Width="100" Value="10"/>

但是问题是我还希望为UserControl使用ViewModel。而且,当我设置它时,UserControl中的TextBox不再能够识别Value依赖项属性。如何拥有ViewModel,并同时从UserControl外部设置Value?我在做严重错误的事情吗?

3 个答案:

答案 0 :(得分:2)

这应将Text的{​​{1}}属性绑定到TextBox的{​​{1}}属性,而不考虑其Value

UserControl

答案 1 :(得分:0)

您不能同时将UserControl绑定到自身和ViewModel。

您必须从UserControl中删除$.ajax({ ... success: (data: any): void => { if (data) { // Append new form $('body').append($('<form id="post-command-detail" />')); // Select the new form and init the plugin $('#post-command-detail').validator(); } } }); ,并在将其集成到UI中时确保将正确的DataContext="{Binding RelativeSource={RelativeSource Self}}"传递给UserControl。

答案 2 :(得分:0)

由于您要进行某种自定义控件,因此解决问题的另一种方法是简单地使用依赖项属性的propertychanged回调,并且每次更改时,您只需更新Textbox的Text属性:

    public partial class NumericUpDownControl : UserControl
    {
        public static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register("Value", typeof(int),typeof(NumericUpDownControl),new PropertyMetadata(OnValueChanged));

        private static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ((NumericUpDownControl) d).TextBox.Text = e.NewValue?.ToString() ?? string.Empty;
        }

        public int Value
        {
            get => (int)GetValue(ValueProperty);
            set => SetValue(ValueProperty, value);
        }

        public NumericUpDownControl()
        {
            InitializeComponent();
        }
    }
}