سيلفرلايت 3 DataForm، كيفية إظهار الحقول / اخفاء

Question

ولقد قمت DataForm الذي وضعت على وضوح بعض DataFields إلى أن انهارت، وعندما يقوم المستخدم بتحديد خيار من تحرير وسرد، ينبغي بذل بعض DataFields مرئيا مرة أخرى.

وفي الأساس (في شبة الكود خشن).

OnComboBoxChange = 
    if this.index = 1 then
        DataForm.Fields[1].Visibility = Visible
    else
        DataForm.Fields[2].Visibility = Visible

ونقاط المكافأة عن إجابة هذا ينطبق على نمط MVVM.

Answer 1

وفيما يلي عينة باستخدام MVVM أن يتجنب codebehind (MVVM قابلة للنقاش لا لا):

<UserControl>
  <StackPanel>
    <ComboBox x:Name="comboBox" SelectionChanged="comboBox_SelectionChanged"/>
    <StackPanel Orientation="Horizontal" Visibility="{Binding IsFirstFormShown}">
      <TextBlock Text="First: "/>
      <TextBox/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Visibility="{Binding IsSecondFormShown}">
      <TextBlock Text="Second: "/>
      <TextBox/>
    </StackPanel>
  </StackPanel>
</UserControl>

إليك ViewModel الخاص بك، ثم،

public class MyFormViewModel : INotifyPropertyChanged
{
     private System.Windows.Visibility _isFirstShown;
     public System.Windows.Visibility IsFirstFormShown
     {
          get { return _isFirstShown; }
          set
          {
               _isFirstShown = value;
               if (PropertyChanged != null ) 
               { 
                    PropertyChanged(this, new PropertyChangedEventArgs(value)); 
               }
          }
     }

     //TODO: implement the other property (writing code in this edit window makes me tired)
     //hopefully you get the picture here...
}

وبسيطة جدا. كنت على الارجح محاولة لتسمية ممتلكاتي شيء أكثر من ذلك بقليل "الموديل" وأقل "عرض"، ولكن هذه الاتفاقية ليست غير مناسب تماما.

Answer 2

في سياق نمط MVVM وضع رؤية الضوابط ينتمي إلى العرض بقدر ما أستطيع أن أرى. على أي حال، كنت شبة الكود لا وظيفة أكثر أو أقل من ذلك. وهنا بعض الشظايا التي هي أكثر قليلا ملموسة:

<UserControl>
  <StackPanel>
    <ComboBox x:Name="comboBox" SelectionChanged="comboBox_SelectionChanged"/>
    <StackPanel x:Name="firstPanel" Orientation="Horizontal">
      <TextBlock Text="First: "/>
      <TextBox/>
    </StackPanel>
    <StackPanel x:Name="secondPanel" Orientation="Horizontal">
      <TextBlock Text="Second: "/>
      <TextBox/>
    </StackPanel>
  </StackPanel>
</UserControl>

و

public partial class MainPage : UserControl {

  public MainPage() {
    InitializeComponent();
    this.comboBox.ItemsSource = new String[] { "First", "Second" };
    this.comboBox.SelectedIndex = 0;
  }

  void comboBox_SelectionChanged(Object sender, SelectionChangedEventArgs e) {
    ShowPanel((String) this.comboBox.SelectedItem);
  }

  void ShowPanel(String name) {
    if (name == "First") {
      this.firstPanel.Visibility = Visibility.Visible;
      this.secondPanel.Visibility = Visibility.Collapsed;
    }
    else {
      this.firstPanel.Visibility = Visibility.Collapsed;
      this.secondPanel.Visibility = Visibility.Visible;
    }
  }

}