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> 

Answer 1

首先，清楚瞭解data binding。請看下面的文章。

Data Binding Overview

WPF/MVVM Quick Start Tutorial

在這裏，我要告訴你一個簡單的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> 

我想這個簡單的例子可能會幫助你。

Answer 2

你不能綁定變量/場查看。您只能綁定屬性，因爲綁定系統使用反射並僅查找屬性而不是DataContext中的字段。爲該變量創建屬性並將該屬性綁定到視圖。我希望這會給你一個想法。