wpf - WPF MVVM 将控件绑定到在视图模型中设置的变量

Question

我有一个控件，在我的例子中是一个 SciChart:SciChartSurface DataSet 绑定到 ChartData，它是我的 viewModel 中的一个对象。

在这个控件中，我需要将 AxisTitle 绑定到我的 viemodel 中的变量。如何访问变量？我试过 AxisTitle="{Binding CharName}" 或 ="{Binding Source={x:Static ViewModels:ViewModelKeys.ChartViewModel}, Path=ChartName}" 但它不起作用。

<UserControl x:Class="UI.WPF.Views.ChartView"
         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:SciChart="http://schemas.abtsoftware.co.uk/scichart"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300"
         xmlns:ViewModels="clr-namespace:UI.ViewModels;assembly=UI.ViewModels"
         xmlns:meffed="http:\\www.codeplex.com\MEFedMVVM"
         meffed:ViewModelLocator.ViewModel="{x:Static ViewModels:ViewModelKeys.ChartViewModel}">
<Grid>
    <SciChart:SciChartSurface x:Name="sciChartSurface" DataSet="{Binding ChartData}">
        <SciChart:SciChartSurface.RenderableSeries>
            <SciChart:FastLineRenderableSeries SeriesColor="Red"/>
        </SciChart:SciChartSurface.RenderableSeries>

        <!--  Declare Axes  -->
        <SciChart:SciChartSurface.YAxis >
            <SciChart:NumericAxis AxisTitle="{Binding ???}" AxisAlignment="Left">
                <SciChart:NumericAxis.GrowBy>
                    <SciChart:DoubleRange Min="0.1" Max="0.1"/>
                </SciChart:NumericAxis.GrowBy>
            </SciChart:NumericAxis>
        </SciChart:SciChartSurface.YAxis>
        <SciChart:SciChartSurface.XAxis>
            <SciChart:DateTimeAxis AxisTitle="Time"
                                   DrawMajorGridLines="True"
                                   DrawMinorGridLines="True" 
                                   TextFormatting="HH:mm MMM dd">
                <SciChart:DateTimeAxis.GrowBy>
                    <SciChart:DoubleRange Min="0.1" Max="0.1"/>
                </SciChart:DateTimeAxis.GrowBy>
            </SciChart:DateTimeAxis>
        </SciChart:SciChartSurface.XAxis>

        <!--  Declare ChartModifiers  -->
        <SciChart:SciChartSurface.ChartModifier>
            <SciChart:ModifierGroup>
                <SciChart:RolloverModifier x:Name="rolloverModifier"
                                           DrawVerticalLine="True"
                                           SourceMode="AllSeries" />
                <SciChart:SeriesSelectionModifier />
                <SciChart:RubberBandXyZoomModifier IsXAxisOnly="True" IsEnabled="True"/>
                <SciChart:ZoomExtentsModifier ExecuteOn="MouseDoubleClick" />
                <SciChart:ZoomPanModifier x:Name="panModifier" IsEnabled="False"/>
                <SciChart:XAxisDragModifier/>
                <SciChart:YAxisDragModifier/>
            </SciChart:ModifierGroup>
        </SciChart:SciChartSurface.ChartModifier>
    </SciChart:SciChartSurface>
  </Grid>

score 1 · Accepted Answer

您不能将变量/字段绑定到 View 。您只能绑定属性，因为绑定系统使用反射并且只查找属性而不是 DataContext 中的字段。为该变量创建属性并将该属性绑定到视图。我希望这会给你一个想法。

score 1 · Accepted Answer

首先，对data binding. 请看以下文章。

数据绑定概述

WPF/MVVM 快速入门教程

在这里，我将向您展示example如何使用数据绑定的简单方法。

假设我们有一个如下图所示的视图。

在此处输入图像描述

我将此视图的视图模型命名为AddPersonViewModel. 这个视图模型是由类继承的ViewModelBase（它对任何视图模型都有一个共同的属性和方法）并使用另一个名为的类RelayCommand

这是ViewModelBase课程

/// <summary>
/// Base for the View Models.
/// </summary>
public class ViewModelBase : INotifyPropertyChanged
{

    /// <summary>
    /// Occurs when a property value changes.
    /// </summary>
    public event PropertyChangedEventHandler PropertyChanged;

    /// <summary>
    /// Notifies the property changed.
    /// </summary>
    /// <param name="propertyName">Name of the property.</param>
    protected void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));  
        }
    }
}

这就是RelayCommand课堂

/// <summary>
/// Relay Command
/// </summary>
public class RelayCommand : ICommand
{
    /// <summary>
    /// Initializes a new instance of the <see cref="RelayCommand"/> class.
    /// </summary>
    /// <param name="execute">The execute.</param>
    public RelayCommand(Action<object> execute)
        : this(execute, null)
    {
    }

    /// <summary>
    /// Initializes a new instance of the <see cref="RelayCommand"/> class.
    /// </summary>
    /// <param name="execute">The execute.</param>
    /// <param name="canExecute">The can execute.</param>
    public RelayCommand(Action<object> execute, Predicate<object> canExecute)
    {
        if (execute == null)
            throw new ArgumentNullException("execute");
        _execute = execute;
        _canExecute = canExecute;
    }

    /// <summary>
    /// Defines the method that determines whether the command can execute in its current state.
    /// </summary>
    /// <param name="parameter">Data used by the command.  If the command does not require data to be passed, this object can be set to null.</param>
    /// <returns>
    /// true if this command can be executed; otherwise, false.
    /// </returns>
    public bool CanExecute(object parameter)
    {
        return _canExecute == null ? true : _canExecute(parameter);
    }

    /// <summary>
    /// Occurs when changes occur that affect whether or not the command should execute.
    /// </summary>
    public event EventHandler CanExecuteChanged
    {
        add { CommandManager.RequerySuggested += value; }
        remove { CommandManager.RequerySuggested -= value; }
    }

    /// <summary>
    /// Defines the method to be called when the command is invoked.
    /// </summary>
    /// <param name="parameter">Data used by the command.  If the command does not require data to be passed, this object can be set to null.</param>
    public void Execute(object parameter)
    {
        _execute(parameter);
    }

    /// <summary>
    /// Action
    /// </summary>
    private readonly Action<object> _execute;


    /// <summary>
    /// Predicate
    /// </summary>
    private readonly Predicate<object> _canExecute;
}

好的。这是我的view model。

public class AddPersonViewModel : ViewModelBase
{
    #region Declarations

    private string name;
    private int age;

    private ICommand addPersonCommand;

    #endregion

    #region Properties

    /// <summary>
    /// Gets or sets the name.
    /// </summary>
    /// <value>The name.</value>
    public string Name
    {
        get
        {
            return name;
        }
        set
        {
            name = value;
            NotifyPropertyChanged("Name");
        }
    }

    /// <summary>
    /// Gets or sets the age.
    /// </summary>
    /// <value>The age.</value>
    public int Age
    {
        get
        {
            return age;
        }
        set
        {
            age = value;
            NotifyPropertyChanged("Age");
        }
    }

    #endregion

    #region Commands


    /// <summary>
    /// Gets the add person command.
    /// </summary>
    /// <value>The add person command.</value>
    public ICommand AddPersonCommand
    {
        get
        {
            if (addPersonCommand == null)
            {
                addPersonCommand = new RelayCommand(param => this.AddPerson(),
                    null);
            }
            return addPersonCommand;
        }
    }

    #endregion

    #region Private Methods

    private void AddPerson()
    {
        // TODO: the logic to add a person
    }

    #endregion
}

最后这是我的view.

<Page x:Class="PivotTest.AddPerson"
      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:viewmodel="clr-namespace:PivotTest.ViewModels"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
    Title="AddPerson">

    <Grid>

        <Grid.DataContext>
            <viewmodel:AddPersonViewModel />
        </Grid.DataContext>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="30" />
            <RowDefinition Height="30" />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>

        <Label Grid.Column="0" Grid.Row="0" Content="Add Person" FontWeight="Bold" FontSize="16" /> 

        <Label Grid.Column="0" Grid.Row="1" Content="name" />
        <TextBox Grid.Column="1" Grid.Row="1"  Text="{Binding Name}" 
                 Margin="5,5,50,5"/>

        <Label Grid.Column="0" Grid.Row="2" Content="Age" />
        <TextBox Grid.Column="1" Grid.Row="2"  Text="{Binding Age}" 
                 Margin="5,5,50,5"/>

        <Button Grid.Column="1" Grid.Row="3" Content="Add" Command="{Binding AddPersonCommand}" 
                Margin="5, 5, 130, 5"/>
    </Grid>
</Page>

我认为这个简单的示例可能会对您有所帮助。

wpf - WPF MVVM 将控件绑定到在视图模型中设置的变量

2 回答 2

Related

Reference