Question

WPF新手尝试实现一个简单的文本框绑定。需要一些帮助来实现这一目标。

XAML

<Window x:Class="WPFModel.MainWindow"
    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:src="clr-namespace:WPFModel"
    DataContext="{Binding RelativeSource={RelativeSource Self}}"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">

    <Window.Resources>
        <src:Test x:Key="myDataSource" TextBoxName="Text Init" />
    </Window.Resources>

<Grid>
    <TextBox x:Name="S1" Text = "{Binding Source={StaticResource myDataSource}, Path=TextBoxName, UpdateSourceTrigger= PropertyChanged, Mode = TwoWay}" HorizontalAlignment="Left" Height="50" Margin="160,165,0,0" VerticalAlignment="Top" Width="185"/>
</Grid>

MAIN WINDOW

namespace WPFModel
{
    public partial class MainWindow : Window
    {
        Test tb = new Test();

        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;
            tb.Drawtext();
        }
    }
}

代码背后

namespace WPFModel
{
    public class Test : INotifyPropertyChanged
    {

        public event PropertyChangedEventHandler PropertyChanged;

        private string value1;
        public string TextBoxName
        {
            get { return value1; }
            set
            {
                value1 = value;
                RaisePropertyChanged("TextBoxName");
            }
        }
        protected void RaisePropertyChanged(string propertyName)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public void Drawtext()
        {
            TextBoxName = "Textbox text";
        }
    }
}

Answer 1

您正在将Window的datacontext设置为自身，而您应该将其设置为this.DataContext = tb;对象的实例：

... Text="{Binding TextBoxName, UpdateSourceTrigger= PropertyChanged, Mode = TwoWay}" ...

然后，您可以将文本框的绑定设置为datacontext对象上的属性：

<script type="text/javascript">
    $( document ).ready(function() {
        // submit the from values with js 
        // and clean the input fields 
        // but not submit the form normally
        // that's why false is returned
        $('form').submit(function() {
            // get your form data in a standard URL-encoded notation
            // standard URL-encoded notation
            var data = $('form').serialize();

            // post your data with ajax to the server
            // https://api.jquery.com/jQuery.post/
            // here you would add your on success function
            // to display a message to the user or whatever else
            $.post('/', data);

            // retuning false here prevents the form to get posted
            // https://api.jquery.com/submit/
            return false;
        });
    });
</script>

Answer 2

您正在多次设置DataContext。一旦进入窗口（DataContext="{Binding RelativeSource={RelativeSource Self}}"）的属性中的XAML标记，再次进入窗口的代码隐藏构造函数（this.DataContext = this;）。在这两种情况下，您都没有将DataContext设置为Test的实例。

您还创建了两个Test个实例。一旦作为资源（<src:Test x:Key="myDataSource" TextBoxName="Text Init" />）进入XAML标记，再次进入代码隐藏（Test tb = new Test();）。然后，您将文本框绑定到Test的资源实例。由于您在代码隐藏实例上调用DrawText()，因此窗口中的文本框永远不会更新。

相反，您要做的是将Test的实例作为Window的DataContext。理想情况下，我们希望将代码隐藏文件（您称之为主窗口）中的代码量保持在MVVM中的最小值，最好的方法就是下面的示例。您还将看到可以使用命令而不是OnClick处理程序来调用视图模型中的操作。如果您不熟悉RelayCommand，请查看其简单实现here

<强> XAML

<Window x:Class="WPFModel.MainWindow"
    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:src="clr-namespace:WPFModel"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <src:Test />
    </Window.DataContext>
    <StackPanel>
        <TextBox x:Name="S1" Text = "{Binding TextBoxName}" HorizontalAlignment="Left" Height="50" Margin="160,165,0,0" VerticalAlignment="Top" Width="185"/>
        <Button Content="Click Me!" Command={Binding DrawTextCommand} />
    </StackPanel>
</Window>

查看模型

namespace WPFModel
{
    public class Test : INotifyPropertyChanged
    {
        public ICommand DrawTextCommand { get; private set; }

        public event PropertyChangedEventHandler PropertyChanged;

        private string value1;
        public string TextBoxName
        {
            get { return value1; }
            set
            {
                value1 = value;
                RaisePropertyChanged("TextBoxName");
            }
        }

        public Test()
        {
            this.DrawTextCommand = new RelayCommand(DrawText);
        }

        protected void RaisePropertyChanged(string propertyName)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public void Drawtext()
        {
            TextBoxName = "Textbox text";
        }
    }
}

主窗口代码

namespace WPFModel
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

从cp中的单独类中的wpf中的文本框进行数据绑定

2 个答案: