Custom Usercontrol with MVVM and Catel

Question

I've created a custom usercontrol that's composed of a AutoCompleteBox with a Selected Item... till now I've implemented it in a way I don't like... I mean I've a XAML view, a Viewmodel and in the viewmodel I load data from a stored procedure. Since the AutoComplete box is a third party UserControl I've added it to the XAML view and not defined as a custom usercontrol. What's the best practice to do so? I think the fact that I'm using Catel as MVVM Framework is irrilevant right now..

Thanks

UPDATE #1

My usercontrols need to have some properties that are passed via XAML for example (LoadDefaultValue)

<views:PortfolioChooserView x:Name="PortfolioChooserView" DataContext="{Binding Model.PortfolioModel}" Height="25" LoadDefaultValue="True" Width="150" />

To achieve such a scenario I had to define a dependency property in my PortfolioChooserView defined as

public bool LoadDefaultValue
    {
        get { return (bool)GetValue(LoadDefaultValueProperty); }
        set { SetValue(LoadDefaultValueProperty, value); }
    }

    public static readonly DependencyProperty LoadDefaultValueProperty = DependencyProperty.Register(
  "LoadDefaultValue", typeof(bool), typeof(PortfolioChooserView), new PropertyMetadata(default(bool)));

Since if I would have defined it in Viewmodel only I wouldn't have been able to set it.

The odd thing is that in order to pass it to the viewmodel I had to do such a trick

public PortfolioChooserView()
    {
        InitializeComponent();
        if (!isFirstLoad) return;

        Focusable = true;
        PortfolioCompleteBox.AllowDrop = true;
        PortfolioCompleteBox.Focus();

        DragDropManager.AddPreviewDragOverHandler(PortfolioCompleteBox, OnElementDragOver);
        DragDropManager.AddDropHandler(PortfolioCompleteBox, OnElementDrop);

        DataContextChanged += PortfolioChooserView_DataContextChanged;
        isFirstLoad = false;
    }

    void PortfolioChooserView_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
        var dataContext = DataContext as PortfolioModel;

        if (dataContext != null)
        {
            dataContext.LoadDefaultValue = LoadDefaultValue;
            dataContext.AllowNull = AllowNull;

            //var converter = new PortfolioConverter();

            //var portfolio = (Portfolio) converter.Convert(SelectedItem, null, null, CultureInfo.CurrentCulture);
            //dataContext.SelectedItem = portfolio;
        }
    }

But I really dislike to use the DataContextChanged event ...do you see a better approach? Thank

UPDATE#2

I keep this toghether since It's a related question... On some viewmodel I used DeferValidationUntilFirstSaveCall = true; in the Constructor to disable the validation at load but my custom usercontrols shows the red border around... what should I do to propagate that info to the nested usercontrols?

Thanks again

Geert van Horrik Geert van Horrik · Accepted Answer · 2015-07-21T13:29:19

See Orc.Controls for tons of examples. It's an open-source library that has a lot of user controls built with Catel, even one with an auto complete box.

Custom Usercontrol with MVVM and Catel

UPDATE #1

UPDATE#2

1 Answers