了解将数据从页面传递到用户控件

如何解决了解将数据从页面传递到用户控件

我一直在努力如何在页面和UserControl之间传递数据，并且可以对我可能做错的事情进行一些说明。我知道，如果删除代码的数据部分并将其替换为TextBlocks，则UserControl可以正常工作。

我确实知道正在显示NetWorth，但看不到为何未传递List<Account>。我不知道我在做什么错。

PanelNavigation.xaml

        <!-- Navigation Section -->
        <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" CanContentScroll="True" Grid.Row="1" Margin="0,0.333,0" Grid.ColumnSpan="2">
            <UserControls:NavigationPanel DataContext="{Binding Accounts}"/>
        </ScrollViewer>

        <!-- Networth Panel -->
        <Grid Grid.Row="2" Height="40">
            <Border BorderThickness="0,1,0" BorderBrush="{StaticResource MenuBarBrush}" Background="{StaticResource BackgroundLightBrush}">
                <Grid Margin="5,5,10,5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <TextBlock Margin="10,1" FontSize="16" FontWeight="Normal" Grid.Column="0" Foreground="#FF346C9C" Text="Net Worth" />
                    <TextBlock FontSize="16" FontWeight="Normal" Grid.Column="1"
                               HorizontalAlignment="Right" Text="{Binding NetWorth,Converter={StaticResource CurrencyConverter}}"
                               Foreground="{Binding NetWorth,Converter={StaticResource ChangeColor}}"/>
                </Grid>
            </Border>
        </Grid>

PanelNavigation.xaml.cs

using APTest.ViewModels;
using System.Windows.Controls;

namespace APTest.Views
{
    /// <summary>
    /// Interaction logic for PanelNavigation.xaml
    /// </summary>
    public partial class PanelNavigation : Page
    {
        public PanelNavigation()
        {
            InitializeComponent();

            this.DataContext = new VMNavigationPanel(this);

        }
    }
}

NavigationPanel.xaml

<UserControl x:Class="APTest.UserControls.NavigationPanel"
             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:UserControls="clr-namespace:APTest.UserControls"
             mc:Ignorable="d" 
             d:DesignHeight="800" d:DesignWidth="400">

    <StackPanel>
        <StackPanel>
            <ItemsControl x:Name="DataTest" ItemsSource ="{Binding Accounts}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding TotalBalance}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </StackPanel>

</UserControl>
    

NavigationPanel.xaml.cs

using System.Windows.Controls;

namespace APTest.UserControls
{
    public partial class NavigationPanel : UserControl
    {
        public NavigationPanel()
        {
            InitializeComponent();
        }
    }

最后

VMNavigationPanel.cs

using AccountingPlus.ViewModels;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;

namespace APTest.ViewModels
{
    class VMNavigationPanel  : BaseViewModel
    {
        private Page mPage;
        private ObservableCollection<Account> accounts;
        public ObservableCollection<Account> Accounts {
            get => accounts;
            set {
                accounts = value;
                OnPropertyChanged();
            }
        }

        public double NetWorth { get; set; } = 127492.30;

        public VMNavigationPanel(Page page)
        {
            mPage = page;

            Accounts = new ObservableCollection<Account>();

            Account test = new Account();
            test.TotalBalance = 100234.23;

            Accounts.Add(test);
        }
    }

    public class Account
    {
        public double TotalBalance {get; set;}
    }
}

BaseViewModel.cs

using PropertyChanged;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace APTest
{
    [AddINotifyPropertyChangedInterface]
    class BaseViewModel : INotifyPropertyChanged
    {

        public event PropertyChangedEventHandler PropertyChanged = (Sender,e) => { };

        protected void OnPropertyChanged([CallerMemberName] string name = null)
        {
            PropertyChanged(this,new PropertyChangedEventArgs(name));
        }
    }
}

解决方法

首先，您需要模型中的属性来绑定对象。您不能绑定字段。

这样您的Account类应该是这样的：

public class Account
{
    public double TotalBalance { get; set; }

}

也请记住，要更新WPF中的UI，我们需要使用ObservableCollections。例如，如果您单击一个按钮并将一个项目添加到“帐户”集合中，则该项目将位于您的集合中，但是在用户界面中，如果您使用列表集合，则不会看到更新的结果，这就是为什么需要使用ObservableCollections的原因。 https://docs.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=netcore-3.1

另一件事是您的绑定错误。在您的NavigationPanel.xaml中，它应该是TotalBalance。

<TextBlock Text="{Binding TotalBalnce}" />

这是您的视图模型的工作代码：

我还为您实现了INotifyPropertyChanged接口，但是没有与其他任何属性一起使用。

class VMNavigationPanel : INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged<T>(ref T property,T value,[CallerMemberName] string propertyName = null)
    {
        property = value;
        PropertyChanged?.Invoke(this,new PropertyChangedEventArgs(propertyName));
    }

    private Page mPage;

    public double NetWorth { get; set; } = 127492.30;

    private ObservableCollection<Account> accounts;
    public ObservableCollection<Account> Accounts
    {
        get => accounts;
        set
        {
            accounts = value;
        }
    }

    public VMNavigationPanel(Page page)
    {
        mPage = page;

        Accounts = new ObservableCollection<Account>();

        Account test = new Account();
        test.TotalBalance = 100234.23;

        Accounts.Add(test);
    }

}

public class Account
{
    public double TotalBalance { get; set; }

}