Question

我想用ItemTemplate替换xaml中的ComboBox ReactiveUserControl。

<ComboBox Name="cmbColors" SelectionChanged="cmbColors_SelectionChanged">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Fill="{Binding Name}" Width="16" Height="16" Margin="0,2,5,2" />
                    <TextBlock Text="{Binding Name}" />
                </StackPanel>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>

ComboBox.ItemTemplate适用于下拉列表和所选项目。 enter image description here

ReactiveUI自动设置ItemTemplate属性。这仅适用于下拉列表，不适用于所选项目。 enter image description here

这是我的ReactiveUserControl

// XAML
<StackPanel Orientation="Horizontal">
    <Rectangle x:Name="rect" Width="16" Height="16" Margin="0,2,5,2" />
    <TextBlock x:Name="text"/>
</StackPanel>

// View
public partial class TestColorboxV : ReactiveUserControl<TestColorboxVM>
{
    public TestColorboxV()
    {
        InitializeComponent();

        this.WhenActivated(d =>
        {
            this.OneWayBind(ViewModel,
                vm => vm.Val.Name,
                v => v.rect.Fill)
                .DisposeWith(d);

            this.OneWayBind(ViewModel,
                vm => vm.Val.Name,
                v => v.text.Text)
                .DisposeWith(d);
        });
    }
}

// ViewModel
public class TestColorboxVM : ReactiveObject
{
    private PropertyInfo _val;
    public PropertyInfo Val
    {
        get => _val;
        set => this.RaiseAndSetIfChanged(ref _val, value);
    }

    public TestColorboxVM(PropertyInfo val)
    {
        Val = val;
    }
}

在主窗口中定义组合框

<ComboBox x:Name="cmbColors" SelectionChanged="cmbColors_SelectionChanged">

以下是使用上述ReactiveUserControl

的代码

// ViewModel
public class TestWindowVM : ReactiveObject
{
    public IList<TestColorboxVM> Items { get; set; }

    private TestColorboxVM _selectedItem;
    public TestColorboxVM SelectedItem
    {
        get => _selectedItem;
        set => this.RaiseAndSetIfChanged(ref _selectedItem, value);
    }

    public TestWindowVM() { }
}

// View
public partial class TestWindow : IViewFor<TestWindowVM>
{
    // Using a DependencyProperty as the backing store for ViewModel.  
    // This enables animation, styling, binding, etc.
    public static readonly DependencyProperty ViewModelProperty =
        DependencyProperty.Register("ViewModel", typeof(TestWindowVM), typeof(TestWindow), new PropertyMetadata(null));

    // Our main view model instance.
    public TestWindowVM ViewModel
    {
        get => (TestWindowVM)GetValue(ViewModelProperty);
        set => SetValue(ViewModelProperty, value);
    }

    // This is required by the interface IViewFor, you always just set it to use the 
    // main ViewModel property. Note on XAML based platforms we have a control called
    // ReactiveUserControl that abstracts this.
    object IViewFor.ViewModel
    {
        get => ViewModel;
        set => ViewModel = (TestWindowVM)value;
    }

    public TestWindow()
    {
        InitializeComponent();
        ViewModel = new TestWindowVM();

        this.WhenActivated(d =>
        {
            this.OneWayBind(ViewModel,
                vm => vm.Items,
                v => v.cmbColors.ItemsSource)
                .DisposeWith(d);

            this.Bind(ViewModel,
                vm => vm.SelectedItem,
                v => v.cmbColors.SelectedItem)
                .DisposeWith(d);
        });

        ViewModel.Items = typeof(Colors).GetProperties().Select(x => new TestColorboxVM(x)).ToList();
    }
}

我在做什么错了？

使用ReactiveUI时，ComboBox ItemTemplate不适用于所选项目

0 个答案: