C# WinUI3で［TeachingTip］の［Width/Height］プロパティが設定できない場合の対処法

C# WinUI 3アプリを作っていく途中で、調べたことを忘録的に投稿します。今回はWinUI3 プロジェクトでツールチップ的な役割を行う［TeachingTip］コントロールの横幅や高さ［Width/Height］を設定した際に、実行時に正しく表示されない場合の対処法です。

［TeachingTip］コントロール

最近では、プレースホルダーなどが実装されているのでユーザーにコントロールの操作方法や目的などを伝える表示として［ツールチップ］が利用されていました。

WinUI3でも［ツールチップ］は利用可能なコントロールですが、さらにリッチな表示が可能な［TeachingTip］コントロールがあります。

プレーンテキストの他にアイコンなども追加できます。

また、イメージなども表示が可能で、ユーザーに伝える手段が追加されています。

この［TeachingTip］コントロールのサイズを変更したい場合には［Width/Height］プロパティで設定を行いますが、一定の数値を超えると変更ができません。

［MaxWidth/MinWidth］設定

サイズを制御しないと都合が悪い部分があるのかもしれませんが［TeachingTip］コントロールで表示するコンテンツにはサイズに制限が追加されています。

実際の設定は［generic.xaml］に記載があります。（［generic.xaml］を確認する方法は別記事をご覧ください）

C# WinUI3 の［軽量なスタイル設定（Lightweight styling）］でコントロールのスタイルを変更する手順

［generic.xaml］に記載されている次のキーをオーバーライドすると［TeachingTip］のサイズを変更できます。

<x:Double x:Key="TeachingTipMinHeight">40</x:Double>
<x:Double x:Key="TeachingTipMaxHeight">520</x:Double>
<x:Double x:Key="TeachingTipMinWidth">320</x:Double>
<x:Double x:Key="TeachingTipMaxWidth">336</x:Double>

WinUI3プロジェクトで一番簡単な方法は［App.xaml］を編集します。

具体的には次の手順で行います。

1.［ソリューション エクスプローラー］で［App.xaml］を開きます。

2. 表示された［App.xaml］を編集します。

<Application
  x:Class="MangaExplorer.App"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:MangaExplorer">
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
        <!-- Other merged dictionaries here -->
      </ResourceDictionary.MergedDictionaries>
      <!-- Other app resources here -->
      <x:Double x:Key="TeachingTipMinHeight">180</x:Double>
      <x:Double x:Key="TeachingTipMaxHeight">180</x:Double>
      <x:Double x:Key="TeachingTipMinWidth">120</x:Double>
      <x:Double x:Key="TeachingTipMaxWidth">120</x:Double>
    </ResourceDictionary>
  </Application.Resources>
</Application>

3.［TeachingTip］の［Width/Height］を設定します。

ビルド後に表示すると［TeachingTip］の［Width/Height］が上書きした［MinWidth/MinHeight］と［MaxWidth/MaxHeight］まで変更可能です。

まとめ

今回は、短い記事ですが、WinUI3 プロジェクトでツールチップ的な役割を行う［TeachingTip］コントロールの横幅や高さ［Width/Height］を設定した際に、実行時に正しく表示されない場合の対処法について紹介しました。

［generic.xaml］に［TeachingTip］の［MinWidth/MinHeight］と［MaxWidth/MaxHeight］が設定されているため、一定のサイズより小さい（または大きい）サイズを指定した場合でも［TeachingTip］の表示が設定できません。

［MinWidth/MinHeight］と［MaxWidth/MaxHeight］の設定を上書きすることでより小さい（大きい）表示が可能です。

WinUI 3で［TeachingTip］の［Width/Height］プロパティの値が反映されない人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただき、ありがとうございます。