如何在设计时调试UWP自定义控件

时间:2018-09-21 13:07:38

标签: c# visual-studio xaml uwp

对于Visual Studio 15.8版,我们(再次)在使用某些自定义控件的UWP项目中丢失了XAML设计器。

当我们在设计模式下打开XAML文件时,它在一些自定义控件周围显示了一个黄色的大边框。

enter image description here

我知道出现此黄色边框是因为自定义控件在设计时引发了异常。但我没有有关此异常的详细信息。 Visual Studio错误列表中没有错误。任何地方都没有错误消息...

我想调试自定义控件,以便解决此问题。我进行了搜索,但找不到调试UWP XAML设计模式的方法...

能否请您告诉我如何调试或了解设计模式下发生什么错误的更多详细信息?

编辑:我终于在VS错误列表中出现了一些错误: enter image description here enter image description here

(对不起,我的Visual Studio是法语)。如果我重新编译解决方案,错误将消失。但是设计师仍然无法使用。

编辑2: 这是CommandViewModelCollection和CommandViewModel的代码。这些类在通用Windows库中。我的UWP应用程序引用了这个libray:

public class CommandViewModelCollection : ObservableCollection<CommandViewModel>
{
}

public class CommandViewModel : ViewModelBase
{
    public ICommand Command
    {
        get { return _Command; }
        set
        {
            if (_Command != value)
            {
                _Command = value;
                this.OnPropertyChanged(_CommandChangedEventArgs);
            }
        }
    }

    private ICommand _Command;
    private static readonly PropertyChangedEventArgs _CommandChangedEventArgs = new PropertyChangedEventArgs(nameof(Command));

    public ImageSource Icon
    {
        get { return _Icon; }
        set
        {
            if (_Icon != value)
            {
                _Icon = value;
                this.OnPropertyChanged(_IconChangedEventArgs);
            }
        }
    }

    private ImageSource _Icon;
    private static readonly PropertyChangedEventArgs _IconChangedEventArgs = new PropertyChangedEventArgs(nameof(Icon));
}

public abstract class ViewModelBase : INotifyPropertyChanged
{
    protected ViewModelBase()
    {
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(PropertyChangedEventArgs args)
    {
        this.PropertyChanged?.Invoke(this, args);
    }

    public string DisplayName
    {
        get { return _DisplayName; }
        set
        {
            if (_DisplayName != value)
            {
                _DisplayName = value;
                this.OnPropertyChanged(_DisplayNameChangedEventArgs);
            }
        }
    }

    private string _DisplayName;
    private static readonly PropertyChangedEventArgs _DisplayNameChangedEventArgs = new PropertyChangedEventArgs(nameof(DisplayName));
}

2 个答案:

答案 0 :(得分:1)

您可能在该自定义控件的ctor中执行了一些代码,而VS XAML设计器可能不完全支持这些代码。您可以通过在https://docs.microsoft.com/en-us/uwp/api/windows.applicationmodel.designmode.designmodeenabled#Windows_ApplicationModel_DesignMode_DesignModeEnabled

中使用if语句来禁止此代码在设计时运行。

MS还为此引入了另一个属性:https://docs.microsoft.com/en-us/uwp/api/windows.applicationmodel.designmode.designmode2enabled#Windows_ApplicationModel_DesignMode_DesignMode2Enabled

我认为没有办法查看XAML设计器中引发了什么异常。

更新:根据您添加的代码,这是我的建议:

  • 您的CommandViewModelCollection应该继承自DependencyObject,以便您可以在其中开始使用DependencyProperty

  • 在该类中,这样定义一个新的DependencyProperty

    public static readonly DependencyProperty CommandsCollectionProperty = DependencyProperty.Register("CommandsCollection", typeof(ObservableCollection<CommandViewModel>), typeof(CommandViewModelCollection), new PropertyMetadata(new ObservableCollection<CommandViewModel>(), OnCommandsCollectionPropertyChanged));

  • OnCommandsCollectionPropertyChanged非常重要,因为您将使用它来监听集合的更改,并为集合更改附加事件处理程序,例如:

    private static void OnCommandsCollectionPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        //add event handler to monitor the changes to this collection
        var @this = (CommandViewModelCollection)d;
        @this.CommandsCollection.CollectionChanged += @this.OnCommandsCollectionCollectionChanged;
    
        //de-attach from old one
        if (e.OldValue is ObservableCollection<CommandViewModel> oldValue)
            oldValue.CollectionChanged -= @this.OnCommandsCollectionChanged;
    
        //any code here to execute based on collection changes
    }
    

这应该允许您直接从XAML初始化集合。

答案 1 :(得分:0)

对于在我之后迷惑于此答案的任何人,您可以 调试XAML设计器,方法是将Visual Studio的第二个实例附加到显示要调试的自定义控件的实例。

完整说明可在此处找到:https://docs.microsoft.com/en-us/visualstudio/debugger/walkthrough-debugging-at-design-time?view=vs-2019

我已经尝试过,并且能够成功调试我正在开发的控件,该控件在设计时具有奇怪的行为。