WPF Prism框架-2.MVVM的绑定和命令

365 阅读1分钟

WPF Prism框架-2.MVVM的绑定和命令

文本绑定

通过把属性改成 {Binding Title} 实现绑定 MainWindowViewModel 中的变量

MainWindow.xaml

<Window x:Class="demo1.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525" >
    <Grid>
        <ContentControl prism:RegionManager.RegionName="ContentRegion" />
        <StackPanel>
            <TextBlock Text="123321"></TextBlock>
            <TextBox Text="{Binding Title}" Margin="10 20 30 10" FontSize="20"></TextBox>
            <TextBox Text="{Binding ShowText}"></TextBox>
        </StackPanel>
    </Grid>
</Window>

MainWindowViewModel.cs

using Prism.Mvvm;

namespace demo1.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        private string _title = "Prism Application";

        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        private string _ShowText = "none";

        public string ShowText
        {
            get { return _ShowText; }
            set { SetProperty(ref _ShowText, value); }
        }

        public MainWindowViewModel()
        {

        }
    }
}

运行效果

1.png

绑定命令

MainWindow.xaml

<Window x:Class="demo1.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525" >
    <Grid>
        <ContentControl prism:RegionManager.RegionName="ContentRegion" />
        <StackPanel>
            <TextBlock Text="123321"></TextBlock>
            <TextBox Text="{Binding Title}" Margin="10 20 30 10" FontSize="20"></TextBox>
            <TextBox Text="{Binding ShowText}"></TextBox>

            <!-- 按钮命令绑定 -->
            <Button Content="按钮1" Width="100" Command="{Binding BT1Command}"></Button>
            
        </StackPanel>
    </Grid>
</Window>

MainWindowViewModel.cs


using Prism.Commands;
using Prism.Mvvm;
using System.Windows;

namespace demo1.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        private string _title = "Prism Application";
        private string _ShowText = "none";

        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        public string ShowText
        {
            get { return _ShowText; }
            set { SetProperty(ref _ShowText, value); }
        }

        private DelegateCommand _BT1Command;
        public DelegateCommand BT1Command =>
            _BT1Command ?? (_BT1Command = new DelegateCommand(ExecuteBT1Command));

        void ExecuteBT1Command()
        {
            MessageBox.Show("123", "321");
        }

        public MainWindowViewModel()
        {

        }
    }
}


运行效果

2.png

绑定命令 + 操作文本

MainWindow.xaml 还是上面例子的 MainWindow.xaml

MainWindowViewModel.cs


using Prism.Commands;
using Prism.Mvvm;
using System.Windows;

namespace demo1.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        private string _title = "Prism Application";
        private string _ShowText = "none";

        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        public string ShowText
        {
            get { return _ShowText; }
            set { SetProperty(ref _ShowText, value); }
        }

        private DelegateCommand _BT1Command;
        public DelegateCommand BT1Command =>
            _BT1Command ?? (_BT1Command = new DelegateCommand(ExecuteBT1Command));

        void ExecuteBT1Command()
        {
            MessageBox.Show(Title, "321");
            ShowText = Title;
        }

        public MainWindowViewModel()
        {

        }
    }
}

运行效果

3.png

可以看到,现在输入框里面输入一些文字,然后点击按钮1,弹出框显示输入的文字,然后下面的TextBox也显示输入的文字

4.png

绑定List对象