2017-07-31 179 views
0

我已經創建了一個組合框和im綁定在MVVM模式,但我的屬性不綁定到視圖,我與itemsourceselectvalue混淆。 我可以對view.xaml做什麼改變?我猜我的模型和視圖模型中的其餘代碼是完美的。WPF MVVM Combobox綁定

這是我的模型

namespace screensaver.Models { 
    class ConfigurationModel { 
     public int _resolution; 

     private ObservableCollection <ConfigurationModel> Resolution { 
      get { 
       return Resolution; 
      } 
      set { 
       Resolution = value; 
      } 
     } 

     public ConfigurationModel() { 
      Resolution = new ObservableCollection <ConfigurationModel>() { 
       new ConfigurationModel() { 
        _resolution = 360 * 720 
       }, 
       new ConfigurationModel() { 
        _resolution = 720 * 1080 
       }, 
       new ConfigurationModel() { 
        _resolution = 1080 * 2060 
       } 
      }; 
     } 
    } 
} 

這是我的ViewModel

namespace screensaver.ViewModels { 
    class ConfigurationViewModel { 
     private ObservableCollection <ConfigurationModel> _resolution; 

     public ObservableCollection <ConfigurationModel> Resolution { 
      get { 
       return Resolution; 
      } 
      set { 
       Resolution = value; 
      } 
     } 

    } 
} 

這是我的看法XAML代碼

<Window x:Class="screensaver.Views.ConfigurationWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ViewModels="clr-namespace:screensaver.ViewModels" Title="ConfigurationWindow" 
Height="1000" Width="500"> 
    <Grid> 
     <Label Content="Display" HorizontalAlignment="Left" Margin="7,12,0,0" VerticalAlignment="Top" /> 
     <ComboBox HorizontalAlignment="Left" Margin="322,14,0,0" VerticalAlignment="Top" Width="120" /> 
     <ComboBox ItemsSource="{Binding Resolution}" SelectedItem="{Binding 
     Resolution, Mode=TwoWay}" DisplayMemberPath="{Binding Resolution}" HorizontalAlignment="Left" Margin="74,13,0,0" VerticalAlignment="Top" Width="120" /> 
     <Label Content="Resolution" HorizontalAlignment="Left" Margin="250,13,0,0" VerticalAlignment="Top" /> 
     <Button Content="Save" HorizontalAlignment="Left" Margin="80,362,0,0" VerticalAlignment="Top" Width="75" /> 
     <Button Content="Close" HorizontalAlignment="Left" Margin="350,360,0,0" VerticalAlignment="Top" Width="75" /> 
     <Label Content="Height" HorizontalAlignment="Left" Margin="72,178,0,0" VerticalAlignment="Top" /> 
     <TextBox HorizontalAlignment="Left" Height="23" Margin="140,181,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" /> 
     <Label Content="Width" HorizontalAlignment="Left" Margin="290,175,0,0" VerticalAlignment="Top" /> 
     <TextBox HorizontalAlignment="Left" Height="23" Margin="346,179,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" /> 
     <Label Content="Top" HorizontalAlignment="Left" Margin="76,253,0,0" VerticalAlignment="Top" /> 
     <TextBox HorizontalAlignment="Left" Height="23" Margin="140,255,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" /> 
     <Label Content="Left" HorizontalAlignment="Left" Margin="292,250,0,0" VerticalAlignment="Top" /> 
     <TextBox HorizontalAlignment="Left" Height="23" Margin="349,252,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" /> 
    </Grid> 
</Window> 
+0

您可以使用像史努比的工具來檢查您在運行時綁定,看看他們爲什麼不加工。我看不到任何證據表明您已將DataContext設置在任何地方。 – Will

+0

<的ViewModels:ConfigurationViewModel X:鍵= 「VM」> <網格的DataContext = 「{綁定源= VM}」> – vijay

+0

我做了這個編輯太多,但仍然我的綁定不起作用 – vijay

回答

0

有一些問題與您的代碼。

首先在ViewModel中解決您的屬性Resolution以防止出現StackOverflowException。在get和set中使用你的field _resolution。

private ObservableCollection <ConfigurationModel> Resolution { 
     get { 
      return _resolution; 
     } 
     set { 
      _resolution = value; 
     } 
    } 

您的模型中的類似問題。在這裏你可以使用自動屬性

private ObservableCollection<ConfigurationModel> Resolution 
    { 
     get; 
     set; 
    } 

也許你也應該通過列表<>交換的ObservableCollection。但這不是必要的。可以刪除字段_resolution,並將分辨率屬性的類型更改爲ObservableCollection < string>。然後

private ObservableCollection<string> Resolution 
    { 
     get; 
     set; 
    } 

你的構造可以改變

public ConfigurationModel() 
    { 
     Resolution = new ObservableCollection<string>() { 
      "360 * 720", 
      "720 * 1080", 
      "1080 * 2060" 
     }; 
    } 

另外也缺少從模型到視圖模型的鏈接。類似的東西:

private readonly ConfigurationModel _model; 

    public ConfigurationViewModel() 
    { 
     _model = new ConfigurationModel(); 
    } 

然後,你必須使用它,所以你必須改變你的財產

public ObservableCollection<string> Resolution 
    { 
     get 
     { 
      return _model.Resolution; 
     } 
     set 
     { 
      _model.Resolution = value; 
     } 
    } 

因此,你必須在模型中修改從私人變更爲公開。

public ObservableCollection<string> Resolution 
    { 
     get; 
     set; 
    } 

現在您可以從ViewModel中刪除字段_resolution。

DisplayMemberPath必須從視圖中刪除。你必須正確設置DataContext。

<Window.DataContext> 
    <ViewModels:ConfigurationViewModel /> 
</Window.DataContext> 

到目前爲止,您有一個結果:

enter image description here

在視圖中的SelectedItem必須綁定到視圖模型另一個屬性。

public string SelectedResolution { get; set; }

SelectedItem="{Binding SelectedResolution, Mode=TwoWay}"

這應該是一個很好的出發點,去進一步上。您可以將ObservableCollection中的字符串更改爲具有更多屬性的自己的類型。然後您需要再次設置DisplayMemberPath。

這是最終的代碼。

型號:

using System.Collections.ObjectModel; 

namespace screensaver.Models 
{ 
    class ConfigurationModel 
    { 
     public ObservableCollection<string> Resolution 
     { 
      get; 
      set; 
     } 

     public ConfigurationModel() 
     { 
      Resolution = new ObservableCollection<string>() { 
       "360 * 720", 
       "720 * 1080", 
       "1080 * 2060" 
      }; 
     } 
    } 
} 

視圖模型:

using screensaver.Models; 
using System.Collections.ObjectModel; 

namespace screensaver.ViewModels 
{ 
    class ConfigurationViewModel 
    { 
     private readonly ConfigurationModel _model; 

     public ConfigurationViewModel() 
     { 
      _model = new ConfigurationModel(); 
     } 

     public ObservableCollection<string> Resolution 
     { 
      get { return _model.Resolution; } 
      set { _model.Resolution = value; } 
     } 

     public string SelectedResolution { get; set; } 

    } 
} 

查看:

<Window x:Class="screensaver.Views.ConfigurationWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ViewModels="clr-namespace:screensaver.ViewModels" Title="ConfigurationWindow" 
Height="1000" Width="500"> 
<Window.DataContext> 
    <ViewModels:ConfigurationViewModel /> 
</Window.DataContext> 
<Grid> 
    <Label Content="Display" HorizontalAlignment="Left" Margin="7,12,0,0" VerticalAlignment="Top" /> 
    <ComboBox HorizontalAlignment="Left" Margin="322,14,0,0" VerticalAlignment="Top" Width="120" /> 
    <ComboBox ItemsSource="{Binding Resolution}" SelectedItem="{Binding SelectedResolution, Mode=TwoWay}" HorizontalAlignment="Left" Margin="74,13,0,0" VerticalAlignment="Top" Width="120" /> 
    <Label Content="Resolution" HorizontalAlignment="Left" Margin="250,13,0,0" VerticalAlignment="Top" /> 
    <Button Content="Save" HorizontalAlignment="Left" Margin="80,362,0,0" VerticalAlignment="Top" Width="75" /> 
    <Button Content="Close" HorizontalAlignment="Left" Margin="350,360,0,0" VerticalAlignment="Top" Width="75" /> 
    <Label Content="Height" HorizontalAlignment="Left" Margin="72,178,0,0" VerticalAlignment="Top" /> 
    <TextBox HorizontalAlignment="Left" Height="23" Margin="140,181,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" /> 
    <Label Content="Width" HorizontalAlignment="Left" Margin="290,175,0,0" VerticalAlignment="Top" /> 
    <TextBox HorizontalAlignment="Left" Height="23" Margin="346,179,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" /> 
    <Label Content="Top" HorizontalAlignment="Left" Margin="76,253,0,0" VerticalAlignment="Top" /> 
    <TextBox HorizontalAlignment="Left" Height="23" Margin="140,255,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" /> 
    <Label Content="Left" HorizontalAlignment="Left" Margin="292,250,0,0" VerticalAlignment="Top" /> 
    <TextBox HorizontalAlignment="Left" Height="23" Margin="349,252,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" /> 
</Grid> 
</Window> 
+0

謝謝@chriga它的工作原理 – vijay