XAML INotifyPropertyChanged 以更新 UI

Question

我是 XAML 的新手，并试图找到一种更好的方法来做到这一点。 我注意到当后面的代码发生变化时，UI 不会立即更新。

我想使用INotifyPropertyChanged接口，所以GUI会收到有关更改和更新的通知。

最初在 XAML 中，我将可见性设置为 hidden（对于 TextBlock 或图像）或 true（isCheck 或 isEnabled）。

在代码后面的程序中，我设置为可见或假。

但是 GUI 没有得到更新。以下是我为页面所拥有的框架。 单击按钮时，所有属性都会更改（变为可见）。

唯一的区别是我有多个页面，你可以通过按钮从一个页面移动到另一个页面。用户单击按钮后，它会转到下一页并更新 UI。

现在我在进行更改以更新 UI 后使用UpdateGUI()。 更新GUI();

public void UpdateUI()
{
    //remove this function from the code below.
    Application.Current.Dispatcher.Invoke(DispatcherPriority.Background, new ThreadStart(delegate { }));
}

MainWindow.xaml

    <Grid Margin=" 0, 20, 0, 0">
        <StackPanel Margin="20, 0, 0, 0">
            <StackPanel Orientation="Horizontal" >
                <Image x:Name="CheckBox1Img" Margin="0, 2, 0, 0" Source="{StaticResource doneCheckImage}" Visibility="Hidden"/>
                <CheckBox x:Name="Checkbox1" Content="CheckBox1"/>
            </StackPanel>

            <StackPanel Orientation="Horizontal">
                <Image x:Name="CheckBox2Img" Margin="0, 2, 0, 0" Source="{StaticResource doneCheckImage}" Visibility="Hidden"/>
                <CheckBox x:Name="Checkbox2" Content="CheckBox 2"/>
            </StackPanel>

            <StackPanel Orientation="Horizontal">
                <Image x:Name="CheckBox3Img" Margin="0, 2, 0, 0" Source="{StaticResource doneCheckImage}" Visibility="Hidden"/>
                <CheckBox x:Name="CheckBox3"  Content="CheckBox 3"/>
            </StackPanel>

            <Button x:Name="Button1"  Click="Button1_Click" Height="20"  Content="Click" Width="50"/>
            <Button x:Name="Button2"  Click="Button2_Click" Height="20"  Content="Button to disable" Width="200"/>
        </StackPanel>
    </Grid>

MainWindow.cs

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

        private void Button1_Click(object sender, RoutedEventArgs e)
        {
            Checkbox1.IsEnabled = false;
            Checkbox2.IsEnabled = false;
            Checkbox3.IsEnabled = false;
            CheckBox1Img.Visibility = Visibility.Visible;
            CheckBox2Img.Visibility = Visibility.Visible;
            CheckBox3Img.Visibility = Visibility.Visible;

            Button2.IsEnabled = false;
        }

        private void Button2_Click(object sender, RoutedEventArgs e)
        {

        }

App.XAML

<Application.Resources>
    <!-- Blue Check Image -->
    <BitmapImage x:Key="doneCheckImage" UriSource="blueCheck.png" />
</Application.Resources>

Answer 1

1. 在新的 ViewModels 文件夹中添加 Viewmodel（简单 .cs 类）

2. 像这样实现 INotifyPropertyChanged 交互：

    public class ViewModel:INotifyPropertyChanged{
    //Example for a valid INotifyPropertyChanged member
    private bool _visibility;
   
    public bool Visibility
   {
       get { return _visibility; }
       set { _visibility = value;  OnPropertyChanged("Visibility");}
   }
    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propertyName){
               if (PropertyChanged != null)
               {
                   PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
               }
           }
   }
   

现在创建一个新的 .cs 类 - 将其命名为 BooleanToVisibilityConverter.cs：

代码应如下所示：

 public class BooleanToVisibilityConverter : IValueConverter
{
    object IValueConverter.Convert(object value, Type targetType, object parameter, string language)
    {
        if((bool)value == true)
        {
            return Visibility.Visible;
        }
        else
        {
            return Visibility.Collapsed;
        }
    }

    object IValueConverter.ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

现在转到您要绑定到此视图模型的 xaml，在 <page 标记后添加此代码 - 如果您只需输入 ViewModel，Intellisense 将为您提供帮助：

xmlns:vm ="using:APPLICATIONNAME.ViewModels"  

进一步添加到您的 xaml：

  <Page.Resources>
    <vm:ViewModel x:Key="MyVM"></vm:ViewModel>
</Page.Resources>

现在构建您的项目，然后在 xaml 中选择要绑定数据的 ui 元素。 然后打开ui元素的属性窗口，搜索Visibility；单击方块并按创建数据绑定，选择静态资源并将值转换器设置为 BooleanToVisibilityConverter。

您可以通过在 xaml 中设置 datacontext 在 c# 中访问您的视图模型。您可能想先深入了解 mvvm 理论。