Question

我正在寻找一种基于单选按钮选择动态加载用户控件的解决方案。问题解释如下。 1.我有一个基本窗口xaml（MainWindow）。这有2个堆栈面板，SP1和SP2 2.我创建了5个用户控件 2.1无线电UC ==＆gt; 4个单选按钮。 2.2选项-1 UC 2.3选项-2 UC 2.4选项-3 UC 2.5选项-4 UC

Radio UC在设计时加载在MainWindow的SP1中。
根据单选按钮的选择，应在SP2中动态加载4个选项UC中的一个

我已尝试在附图中解释上述内容。

我很无能为力，因为我不太了解WPF。任何人都可以使用WPF MVVM模式帮助我。

提前致谢。

Answer 1

您可以尝试这样的事情：

在XAML中

：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.Resources>
            <local:VisibilityConverter x:Key="visibilityConverter"  />
        </Grid.Resources>
        <StackPanel>
            <StackPanel>
                <RadioButton Content="one" GroupName="a" Name="one"/>
                <RadioButton Content="two" GroupName="a" Name="two"/>
            </StackPanel>
            <StackPanel >
                <RadioButton Content="linked to one" Visibility="{Binding ElementName=one, Path=IsChecked, Converter={StaticResource visibilityConverter}}"/>
                <RadioButton Content="linked to two" Visibility="{Binding ElementName=two, Path=IsChecked, Converter={StaticResource visibilityConverter}}"/>
            </StackPanel>            
        </StackPanel>
    </Grid>
</Window>

并且代码中的visibilityconverter：

public class VisibilityConverter : IValueConverter
{
    object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if ((Boolean)value)
        {
            return Visibility.Visible;
        }
        else
        {
            return Visibility.Collapsed;
        }
    }

    object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

我确信您的XAMl看起来会有所不同，但概念将是相同的。我希望。

Answer 2

在MainViewModel中创建一个属性来保存RadioControlViewModel，一个属性来保存选定的OptionViewModel。在构造函数中，注册RadioControlViewModel的OptionSelectionChanged事件。 EventHandler方法应将OptionViewModel的值更改为ViewModel的实例，该ViewModel表示您希望为该选择显示的控件。代码“etcetera”中的所有注释都意味着为选项3＆amp;添加相同的先前代码。 4。

<强> MainViewModel

public class MainViewModel
{
    private RadioControlViewModel _rcViewModel;
    public RadioControlViewModel RcViewModel
    {
       get { return _rcViewModel; }
       set
       {
          _rcViewModel = value;
          RaisePropertyChanged("RcViewModel");
       }
    }

    private OptionViewModelBase _optionViewModel;
    public OptionViewModelBase OptionViewModel
    {
       get { return _optionViewModel; }
       set
       {
          _optionViewModel = value;
          RaisePropertyChanged("OptionViewModel");
       }
    }

    public MainViewModel()
    {
       RcViewModel = new RadioControlViewModel();
       RcViewModel.OptionSelectionChanged += RcViewModel_OptionSelectionChanged;
    }

    private void RcViewModel_OptionSelectionChanged(object sender, OptionSelectionChangedEventArgs e)
    {
       if (e.Selection == null)
       {
          OptionViewModel = null;
          return;
       }

       switch (e.Selection)
       {
          case Option.OptionOne:
             OptionViewModel = new OptionOneViewModel();
             break;
          case Option.OptionTwo:
             OptionViewModel = new OptionTwoViewModel();
             break;
          // etcetera
       }
    }
 }

在MainView.Resources中，您将把每个OptionViewModel的DataTemplates映射到相应的OptionView。第一个StackPanel有你的RadioControlView，它的DataContext绑定到MainViewModel的RadioControlViewModel属性。在第二个StackPanel中，您使用ContentPresenter并将Content属性绑定到MainViewModel的OptionViewModel属性。 DataTemplates将告诉它如何呈现这一点。

<强>的MainView

 <Window.Resources>
    <DataTemplate DataType="{x:Type viewmodel:OptionOneViewModel}">
       <view:OptionOneView />
    </DataTemplate>

    <DataTemplate DataType="{x:Type viewmodel:OptionTwoViewModel}">
       <view:OptionTwoView />
    </DataTemplate>

    <!-- etcetera -->
 </Window.Resources>

 <Grid>
    <StackPanel>
       <view:RadioControlView DataContext="{Binding RcViewModel}" />
    </StackPanel>
    <StackPanel>
       <ContentPresenter Content="{Binding OptionViewModel}" />
    </StackPanel>
 </Grid>

RadioControlViewModel将有一个OptionSelectionChanged事件，只要其中一个绑定的RadioButtons将其属性设置为true，就会引发该事件。

<强> RadioControlViewModel

public class RadioControlViewModel
{
   public event EventHandler<OptionSelectionChangedEventArgs> OptionSelectionChanged;

   private bool _optionOneSelected;
   public bool OptionOneSelected
   {
      get { return _optionOneSelected; }
      set
      {
         _optionOneSelected = value;
         RaisePropertyChanged("OptionOneSelected");
         if (value)
            RaiseOptionSelectionChanged(Option.OptionOne);
      }
   }

   private bool _optionTwoSelected;
   public bool OptionTwoSelected
   {
      get { return _optionTwoSelected; }
      set
      {
         _optionTwoSelected = value;
         RaisePropertyChanged("OptionTwoSelected");
         if (value)
            RaiseOptionSelectionChanged(Option.OptionTwo);
      }
   }

   // etcetera

   private void RaiseOptionSelectionChanged(Option selection)
   {
      var handler = OptionSelectionChanged;
      if (handler == null)
         return;

      handler(this, new OptionSelectionChangedEventArgs(selection));
   }
}

前面的代码假定您将创建一个OptionSelectionChangedEventArgs类并具有一个名为Option的枚举。将需要进行一些调整，例如您的MainViewModel构造函数可能希望将OptionViewModel属性设置为选择初始化的选项。

基于单选按钮选择动态添加用户控件 - WPF

2 个答案: