相談科にご質問をいただいたのでご紹介します。
相談内容：Spotlight で公開されている、ホワイトボードテンプレートで、マグネット画像を「編集できるテキストボックス」にしたい。できればクラス図の様に記載できるともっといい。
なるほど、これ追いかけていくとかなり深刻な内容になりそうです。まずは一番簡単なパターンで、マグネットに編集可能なテキストを追加してみましょう。
シンプルにマグネットにテキストを追加してみる
ここのマグネットはMangnetItem のユーザーコントロールとして定義されているため、ここにTextBox を配置することで機能を実装することができます。
具体的には、MagnetItem.xaml に以下の1行を追加することで編集可能なテキストの表示が可能になります。
<Grid Background="{Binding Background, ElementName=userControl}">
<Image x:Name="img" Source="Image/Blue.png"/>
<TextBox HorizontalAlignment="Center" TextWrapping="Wrap" Text="Item" VerticalAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" TextAlignment="Center" />
</Grid>
これを実装するだけでもいろいろ応用ができそうです。
クラス図を目指して
もしクラス図のように表示するのであれば、このようなイメージでしょうか？
MagnetItem.xaml
<Grid Background="Black" HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="200">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition />
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox TextWrapping="Wrap" Text="Top" Background="White" BorderBrush="{x:Null}" Grid.Row="0" />
<TextBox TextWrapping="Wrap" Text="Interface" Background="White" BorderBrush="{x:Null}" Margin="0,-2,0,-2" Grid.Row="1" />
<TextBox TextWrapping="Wrap" Text="Class" Background="White" BorderBrush="{x:Null}" Grid.Row="2" />
<!--使用していません-->
<Image x:Name="img" Source="Image/Blue.png" Visibility="Collapsed" Grid.RowSpan="3"/>
</Grid>
この場合、MainPage.xaml 側は 以下のように Height と Width を指定しないようにします。
<local:MagnetItem Margin="995,207,0,0" />
<local:MagnetItem Margin="123,494,0,0" />
<local:MagnetItem Margin="1045,592,0,0" />
<local:MagnetItem Margin="297,184,0,0" />
今のテンプレートの設計はマグネットのサイズが可変になることを想定していない為、このままで実装するといろいろ問題が出てくると思いますのでご注意が必要ですね。
また、マインドマップ的なものを実装するとしたら矢印の追従のケアも必要になりそうですね。ここまで行くと大手術が必要ですのでユーザーコントロールをしっかり設計する必要があります。
