WPF 引用第三方庫的控件在設計器加上設計時數據和屬性

本文告訴大家如何在 VisualStudio 2022 的 XAML 設計器中，在設計時給第三方控件加上設計用的屬性和數據的方法

此功能要求使用不低於 VisualStudio 2019 的 16.8 版本以上，要求第三方控件設計上不要太過詭異（稍微偏離規范問題不大）即可在 XAML 設計上使用此功能

在 2020 重新組建(謎)的 XAML 設計器團隊給 WPF 的設計時帶來了更強的功能，可以讓 d: 設置任意的設計時屬性，例如給 TextBlock 加上設計用到的內容。這些設計用到的內容，在運行時是被完全忽略的，如下面代碼

<TextBlock Text="{Binding Name}" d:Text="Name!" />

對於第三方的庫引用，也是受支持的。本文使用 HandyControl 作為例子，告訴大家如何使用設計時的屬性設置

將使用 TagContainer 控件作為例子，在此控件中，可以設置 TagContainer.Items 的內容，期望在設計時有如下效果

給 HandyControl 加上設計時之前，需要加上此控件的設計時引用，如下面代碼

  xmlns:hcDesignTimeControls="https://handyorg.github.io/handycontrol/design"

對於絕大部分控件庫來說，都是簡單在后綴上加上 /design 即可。對於控件庫開發者來說，也不需要額外做什么，這是自然的支持

需要將上面定義的 hcDesignTimeControls 也加入到 mc:Ignorable 里面，用來告訴 XAML 構建，這是一個設計時的內容，還請忽略。否則對於一些控件庫來說，將會提示找不到對應的屬性

        xmlns:hc="https://handyorg.github.io/handycontrol"
        xmlns:hcDesignTimeControls="https://handyorg.github.io/handycontrol/design"
        mc:Ignorable="d hcDesignTimeControls"

編寫的 TagContainer 控件內容如下

    <hc:TagContainer>
      <hcDesignTimeControls:TagContainer.Items>
        <hc:Tag>
          <hc:Tag.Content>
            <TextBlock>123</TextBlock>
          </hc:Tag.Content>
        </hc:Tag>
        <hc:Tag Content="2" />
        <hc:Tag Content="3" />
      </hcDesignTimeControls:TagContainer.Items>
    </hc:TagContainer>

效果如下

更多請看

Use Design Time Data with the XAML Designer in Visual Studio - Visual Studio (Windows)

What's the correct syntax for third-party control design-time property assign? · Issue #5766 · dotnet/wpf