MVVM: привязка радио кнопок к модели представления? - PullRequest
59 голосов
/ 18 февраля 2010

РЕДАКТИРОВАТЬ: Проблема была исправлена ​​в .NET 4.0.

Я пытался привязать группу переключателей к модели представления с помощью кнопки IsChecked. После просмотра других сообщений выясняется, что свойство IsChecked просто не работает. Я собрал короткую демонстрацию, которая воспроизводит проблему, которую я включил ниже.

Вот мой вопрос: существует ли простой и надежный способ привязки переключателей с помощью MVVM? Спасибо.

Дополнительная информация: Свойство IsChecked не работает по двум причинам:

  1. Когда кнопка выбрана, свойства IsChecked других кнопок в группе не устанавливаются на false .

  2. Когда кнопка выбрана, ее собственное свойство IsChecked не устанавливается после первого нажатия кнопки. Я предполагаю, что WPF с первого клика перехватывает привязку.

Демонстрационный проект: Вот код и разметка для простого демо, воспроизводящего проблему. Создайте проект WPF и замените разметку в Window1.xaml на следующую:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
    <StackPanel>
        <RadioButton Content="Button A" IsChecked="{Binding Path=ButtonAIsChecked, Mode=TwoWay}" />
        <RadioButton Content="Button B" IsChecked="{Binding Path=ButtonBIsChecked, Mode=TwoWay}" />
    </StackPanel>
</Window>

Замените код в Window1.xaml.cs на следующий код (взлом), который устанавливает модель представления:

using System.Windows;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            this.DataContext = new Window1ViewModel();
        }
    }
}

Теперь добавьте следующий код в проект как Window1ViewModel.cs:

using System.Windows;

namespace WpfApplication1
{
    public class Window1ViewModel
    {
        private bool p_ButtonAIsChecked;

        /// <summary>
        /// Summary
        /// </summary>
        public bool ButtonAIsChecked
        {
            get { return p_ButtonAIsChecked; }
            set
            {
                p_ButtonAIsChecked = value;
                MessageBox.Show(string.Format("Button A is checked: {0}", value));
            }
        }

        private bool p_ButtonBIsChecked;

        /// <summary>
        /// Summary
        /// </summary>
        public bool ButtonBIsChecked
        {
            get { return p_ButtonBIsChecked; }
            set
            {
                p_ButtonBIsChecked = value;
                MessageBox.Show(string.Format("Button B is checked: {0}", value));
            }
        }

    }
}

Чтобы воспроизвести проблему, запустите приложение и нажмите кнопку A. Появится окно сообщения о том, что для свойства кнопки IsChecked установлено значение true . Теперь выберите кнопку B. Появится еще одно окно с сообщением о том, что для свойства IsChecked для кнопки B установлено значение true , но нет сообщения о том, что для свойства IsChecked для кнопки A установлено значение false - свойство не было изменено.

Теперь нажмите кнопку A еще раз. Кнопка будет выбрана в окне, но окно сообщения не появится - свойство IsChecked не было изменено. Наконец, нажмите кнопку B еще раз - тот же результат. Свойство IsChecked вообще не обновляется ни для одной кнопки после первого нажатия кнопки.

Ответы [ 11 ]

52 голосов
/ 18 февраля 2010

Если вы начнете с предложения Джейсона, то проблема станет одним ограниченным выбором из списка, который очень хорошо преобразуется в ListBox.В этот момент легко применить стиль к элементу управления ListBox, чтобы он отображался в виде списка RadioButton.

<ListBox ItemsSource="{Binding ...}" SelectedItem="{Binding ...}">
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <RadioButton Content="{TemplateBinding Content}"
                                     IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>
18 голосов
/ 15 марта 2010

Похоже, они исправили привязку к свойству IsChecked в .NET 4. Проект, который был разбит в VS2008, работает в VS2010.

9 голосов
/ 18 февраля 2010

В интересах тех, кто исследует этот вопрос в будущем, вот решение, которое я в конечном итоге реализовал. Он основан на ответе Джона Боуэна, который я выбрал в качестве лучшего решения проблемы.

Сначала я создал стиль для прозрачного списка, содержащего переключатели в качестве элементов. Затем я создал кнопки для перехода в поле со списком - мои кнопки фиксированы, а не считываются в приложение как данные, поэтому я жестко запрограммировал их в разметке.

Я использую перечисление с именем ListButtons в модели представления для представления кнопок в окне списка, и я использую свойство Tag каждой кнопки, чтобы передать строковое значение значения перечисления, которое будет использоваться для этой кнопки. Свойство ListBox.SelectedValuePath позволяет мне указать свойство Tag в качестве источника для выбранного значения, которое я связываю с моделью представления, используя свойство SelectedValue. Я думал, что мне понадобится конвертер значений для преобразования между строкой и ее значением enum, но встроенные конвертеры WPF справились с преобразованием без проблем.

Вот полная разметка для Window1.xaml :

<Window x:Class="RadioButtonMvvmDemo.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">

    <!-- Resources -->
    <Window.Resources>
        <Style x:Key="RadioButtonList" TargetType="{x:Type ListBox}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <Style TargetType="{x:Type ListBoxItem}" >
                        <Setter Property="Margin" Value="5" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                    <Border BorderThickness="0" Background="Transparent">
                                        <RadioButton 
                                            Focusable="False"
                                            IsHitTestVisible="False"
                                            IsChecked="{TemplateBinding IsSelected}">
                                            <ContentPresenter />
                                        </RadioButton>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBox}">
                        <Border BorderThickness="0" Padding="0" BorderBrush="Transparent" Background="Transparent" Name="Bd" SnapsToDevicePixels="True">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <!-- Layout -->
    <Grid>
        <!-- Note that we use SelectedValue, instead of SelectedItem. This allows us 
        to specify the property to take the value from, using SelectedValuePath. -->

        <ListBox Style="{StaticResource RadioButtonList}" SelectedValuePath="Tag" SelectedValue="{Binding Path=SelectedButton}">
            <ListBoxItem Tag="ButtonA">Button A</ListBoxItem>
            <ListBoxItem Tag="ButtonB">Button B</ListBoxItem>
        </ListBox>
    </Grid>
</Window>

Модель представления имеет единственное свойство SelectedButton, которое использует перечисление ListButtons, чтобы показать, какая кнопка выбрана. Свойство вызывает событие в базовом классе, который я использую для моделей представлений, которое вызывает событие PropertyChanged:

namespace RadioButtonMvvmDemo
{
    public enum ListButtons {ButtonA, ButtonB}

    public class Window1ViewModel : ViewModelBase
    {
        private ListButtons p_SelectedButton;

        public Window1ViewModel()
        {
            SelectedButton = ListButtons.ButtonB;
        }

        /// <summary>
        /// The button selected by the user.
        /// </summary>
        public ListButtons SelectedButton
        {
            get { return p_SelectedButton; }

            set
            {
                p_SelectedButton = value;
                base.RaisePropertyChangedEvent("SelectedButton");
            }
        }

    }
} 

В моем производственном приложении установщик SelectedButton будет вызывать метод класса обслуживания, который будет выполнять действие, требуемое при нажатии кнопки.

И чтобы быть полным, вот базовый класс:

using System.ComponentModel;

namespace RadioButtonMvvmDemo
{
    public abstract class ViewModelBase : INotifyPropertyChanged
    {
        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

        #region Protected Methods

        /// <summary>
        /// Raises the PropertyChanged event.
        /// </summary>
        /// <param name="propertyName">The name of the changed property.</param>
        protected void RaisePropertyChangedEvent(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChangedEventArgs e = new PropertyChangedEventArgs(propertyName);
                PropertyChanged(this, e);
            }
        }

        #endregion
    }
}

Надеюсь, это поможет!

3 голосов
/ 18 февраля 2010

Одним из решений является обновление ViewModel для переключателей в установщике свойств.Если для кнопки A установлено значение True, установите для кнопки B значение false.

Еще один важный фактор при привязке к объекту в DataContext заключается в том, что объект должен реализовывать INotifyPropertyChanged.Когда любое связанное свойство изменяется, событие должно быть запущено и включать имя измененного свойства.(Проверка NULL опущена в образце для краткости.)

public class ViewModel  : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected bool _ButtonAChecked = true;
    public bool ButtonAChecked
    {
        get { return _ButtonAChecked; }
        set 
        { 
            _ButtonAChecked = value;
            PropertyChanged(this, new PropertyChangedEventArgs("ButtonAChecked"));
            if (value) ButtonBChecked = false;
        }
    }

    protected bool _ButtonBChecked;
    public bool ButtonBChecked
    {
        get { return _ButtonBChecked; }
        set 
        { 
            _ButtonBChecked = value; 
            PropertyChanged(this, new PropertyChangedEventArgs("ButtonBChecked"));
            if (value) ButtonAChecked = false;
        }
    }
}

Edit:

Проблема заключается в том, что при первом нажатии кнопки B значение IsChecked изменяется и привязка передается, но кнопкаA не передает свое непроверенное состояние в свойство ButtonAChecked.При ручном обновлении в коде установщик свойства ButtonAChecked будет вызываться при следующем нажатии кнопки A.

2 голосов
/ 27 августа 2015

Небольшое расширение для ответа Джона Боуэна : Не работает, когда значения не реализуются ToString().Что вам нужно вместо установки Content RadioButton в TemplateBinding, просто поместите в него ContentPresenter, например:

<ListBox ItemsSource="{Binding ...}" SelectedItem="{Binding ...}">
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <RadioButton IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}">
                            <ContentPresenter/>
                        </RadioButton>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

Таким образом, вы можете дополнительно использовать DisplayMemberPath или1010 * в зависимости от обстоятельств.RadioButton просто «оборачивает» элементы, предоставляя выбор.

2 голосов
/ 28 января 2014

Вот еще один способ сделать это

ВИД:

<StackPanel Margin="90,328,965,389" Orientation="Horizontal">
        <RadioButton Content="Mr" Command="{Binding TitleCommand, Mode=TwoWay}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Mode=Self}, Mode=TwoWay}" GroupName="Title"/>
        <RadioButton Content="Mrs" Command="{Binding TitleCommand, Mode=TwoWay}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Mode=Self}, Mode=TwoWay}" GroupName="Title"/>
        <RadioButton Content="Ms" Command="{Binding TitleCommand, Mode=TwoWay}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Mode=Self}, Mode=TwoWay}" GroupName="Title"/>
        <RadioButton Content="Other" Command="{Binding TitleCommand, Mode=TwoWay}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Mode=Self}}" GroupName="Title"/>
        <TextBlock Text="{Binding SelectedTitle, Mode=TwoWay}"/>
    </StackPanel>

ViewModel:

 private string selectedTitle;
    public string SelectedTitle
    {
        get { return selectedTitle; }
        set
        {
            SetProperty(ref selectedTitle, value);
        }
    }

    public RelayCommand TitleCommand
    {
        get
        {
            return new RelayCommand((p) =>
            {
                selectedTitle = (string)p;
            });
        }
    }
2 голосов
/ 18 февраля 2010

Не уверен насчет каких-либо ошибок IsChecked, один возможный рефакторинг, который вы могли бы сделать для своей модели представления: представление имеет ряд взаимоисключающих состояний, представленных серией кнопок RadioButton, из которых можно выбрать только одно из которых в любой момент времени.В модели представления просто есть 1 свойство (например, enum), которое представляет возможные состояния: stateA, stateB и т. Д. Таким образом, вам не понадобятся все отдельные ButtonAIsChecked и т. Д.

1 голос
/ 28 января 2017

Я знаю, что это старый вопрос, и исходная проблема была решена в .NET 4. Честно говоря, это немного не по теме.

В большинстве случаев, когда я хотел использовать RadioButtons в MVVM, это для выбора между элементами enum , для этого необходимо связать свойство bool в пространстве VMдля каждой кнопки и их использования для установки общего свойства enum , которое отражает фактический выбор, это становится очень утомительным и очень быстрым.Поэтому я предложил решение, которое можно использовать повторно и которое очень просто реализовать, и для которого не требуются ValueConverters.

Представление почти такое же, но как только вы получите enum на месте сторона виртуальной машины может быть выполнена с помощью одного свойства.

MainWindowVM

using System.ComponentModel;

namespace EnumSelectorTest
{
  public class MainWindowVM : INotifyPropertyChanged
  {
    public EnumSelectorVM Selector { get; set; }

    private string _colorName;
    public string ColorName
    {
      get { return _colorName; }
      set
      {
        if (_colorName == value) return;
        _colorName = value;
        RaisePropertyChanged("ColorName");
      }
    }

    public MainWindowVM()
    {
      Selector = new EnumSelectorVM
        (
          typeof(MyColors),
          MyColors.Red,
          false,
          val => ColorName = "The color is " + ((MyColors)val).ToString()
        );
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void RaisePropertyChanged(string propertyName)
    {
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
  }
}

Класс, который выполняет всю работу, наследуется от DynamicObject.При просмотре снаружи создается свойство bool для каждого элемента в enum с префиксом «Is», «IsRed», «IsBlue» и т. Д., К которому можно привязать XAML.Наряду со свойством Value, которое содержит фактическое значение enum .

public enum MyColors
{
  Red,
  Magenta,
  Green,
  Cyan,
  Blue,
  Yellow
}

EnumSelectorVM

using System;
using System.ComponentModel;
using System.Dynamic;
using System.Linq;

namespace EnumSelectorTest
{
  public class EnumSelectorVM : DynamicObject, INotifyPropertyChanged
  {
    //------------------------------------------------------------------------------------------------------------------------------------------
    #region Fields

    private readonly Action<object> _action;
    private readonly Type _enumType;
    private readonly string[] _enumNames;
    private readonly bool _notifyAll;

    #endregion Fields

    //------------------------------------------------------------------------------------------------------------------------------------------
    #region Properties

    private object _value;
    public object Value
    {
      get { return _value; }
      set
      {
        if (_value == value) return;
        _value = value;
        RaisePropertyChanged("Value");
        _action?.Invoke(_value);
      }
    }

    #endregion Properties

    //------------------------------------------------------------------------------------------------------------------------------------------
    #region Constructor

    public EnumSelectorVM(Type enumType, object initialValue, bool notifyAll = false, Action<object> action = null)
    {
      if (!enumType.IsEnum)
        throw new ArgumentException("enumType must be of Type: Enum");
      _enumType = enumType;
      _enumNames = enumType.GetEnumNames();
      _notifyAll = notifyAll;
      _action = action;

      //do last so notification fires and action is executed
      Value = initialValue;
    }

    #endregion Constructor

    //------------------------------------------------------------------------------------------------------------------------------------------
    #region Methods

    //---------------------------------------------------------------------
    #region Public Methods

    public override bool TryGetMember(GetMemberBinder binder, out object result)
    {
      string elementName;
      if (!TryGetEnumElemntName(binder.Name, out elementName))
      {
        result = null;
        return false;
      }
      try
      {
        result = Value.Equals(Enum.Parse(_enumType, elementName));
      }
      catch (Exception ex) when (ex is ArgumentNullException || ex is ArgumentException || ex is OverflowException)
      {
        result = null;
        return false;
      }
      return true;
    }

    public override bool TrySetMember(SetMemberBinder binder, object newValue)
    {
      if (!(newValue is bool))
        return false;
      string elementName;
      if (!TryGetEnumElemntName(binder.Name, out elementName))
        return false;
      try
      {
        if((bool) newValue)
          Value = Enum.Parse(_enumType, elementName);
      }
      catch (Exception ex) when (ex is ArgumentNullException || ex is ArgumentException || ex is OverflowException)
      {
        return false;
      }
      if (_notifyAll)
        foreach (var name in _enumNames)
          RaisePropertyChanged("Is" + name);
      else
        RaisePropertyChanged("Is" + elementName);
      return true;
    }

    #endregion Public Methods

    //---------------------------------------------------------------------
    #region Private Methods

    private bool TryGetEnumElemntName(string bindingName, out string elementName)
    {
      elementName = "";
      if (bindingName.IndexOf("Is", StringComparison.Ordinal) != 0)
        return false;
      var name = bindingName.Remove(0, 2); // remove first 2 chars "Is"
      if (!_enumNames.Contains(name))
        return false;
      elementName = name;
      return true;
    }

    #endregion Private Methods

    #endregion Methods

    //------------------------------------------------------------------------------------------------------------------------------------------
    #region Events

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void RaisePropertyChanged(string propertyName)
    {
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    #endregion Events
  }
}

Чтобы реагировать на изменения, вы можете подписаться на событие NotifyPropertyChanged илипередать анонимный метод конструктору, как это было сделано выше.

И, наконец, MainWindow.xaml

<Window x:Class="EnumSelectorTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">  
  <Grid>
    <StackPanel>
      <RadioButton IsChecked="{Binding Selector.IsRed}">Red</RadioButton>
      <RadioButton IsChecked="{Binding Selector.IsMagenta}">Magenta</RadioButton>
      <RadioButton IsChecked="{Binding Selector.IsBlue}">Blue</RadioButton>
      <RadioButton IsChecked="{Binding Selector.IsCyan}">Cyan</RadioButton>
      <RadioButton IsChecked="{Binding Selector.IsGreen}">Green</RadioButton>
      <RadioButton IsChecked="{Binding Selector.IsYellow}">Yellow</RadioButton>
      <TextBlock Text="{Binding ColorName}"/>
    </StackPanel>
  </Grid>
</Window>

Надеюсь, кто-то еще найдет это полезным, потому что я считаю, что это происходит в моем наборе инструментов.

1 голос
/ 25 ноября 2015

Вы должны добавить имя группы для радиокнопки

   <StackPanel>
        <RadioButton Content="Button A" IsChecked="{Binding Path=ButtonAIsChecked, Mode=TwoWay}" GroupName="groupName" />
        <RadioButton Content="Button B" IsChecked="{Binding Path=ButtonBIsChecked, Mode=TwoWay}" GroupName="groupName" />
    </StackPanel>
0 голосов
/ 26 декабря 2016
<RadioButton  IsChecked="{Binding customer.isMaleFemale}">Male</RadioButton>
    <RadioButton IsChecked="{Binding customer.isMaleFemale,Converter=      {StaticResource GenderConvertor}}">Female</RadioButton>

Ниже приведен код для IValueConverter

public class GenderConvertor : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return !(bool)value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return !(bool)value;
    }
}

это сработало для меня. Четное значение привязывается как к view, так и к viewmodel в соответствии с переключателем. Верно -> Мужчина и Ложь -> Женщина

...