はじめに
今回はタイトル通り SVG アイコンに適切にクリック領域を確保する方法について見ていきます。
使用している環境やライブラリは下記の通りです。
- Visual Studio 2022
- MahApps.Metro.IconPacks.Material: v4.11.0
- Microsoft.Xaml.Behaviors.Wpf: v1.1.77
とりあえず実装してみる
特に意識せず以下のように実装したら以下のような動作になります。
<!-- 省略 -->
<!--#region Search TextBox-->
<Grid Grid.Row="0"
Width="300"
HorizontalAlignment="Left">
<!-- 省略 -->
<Icon:PackIconMaterial Foreground="#b0b9c6"
Kind="Magnify"
Width="15"
Height="15"
Margin="0,0,15,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Panel.ZIndex="1" >
</Icon:PackIconMaterial>
<bh:Interaction.Triggers>
<bh:EventTrigger EventName="MouseLeftButtonDown">
<bh:InvokeCommandAction Command="{Binding SearchCommand}" />
</bh:EventTrigger>
</bh:Interaction.Triggers>
</Grid>
<!--#endregion-->SVG アイコンの線のみにマウスが反応している事がわかります。
これはアイコンの線が実態として、空白の部分が背景として認識されているためクリック領域を確保できていない事が要因です。
SVG アイコンにクリック領域を確保するためにStackPanelやGrid、Borderなどの要素を被せます。
今回はBorderを使用して実装します。
<!-- 省略 -->
<Border Width="15"
Height="15"
Margin="0,0,15,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Panel.ZIndex="1"
Background="Transparent"
Cursor="Hand">
<Icon:PackIconMaterial Foreground="#b0b9c6" Kind="Magnify" />
<bh:Interaction.Triggers>
<bh:EventTrigger EventName="MouseLeftButtonDown">
<bh:InvokeCommandAction Command="{Binding SearchCommand}" />
</bh:EventTrigger>
</bh:Interaction.Triggers>
</Border>
<!--#endregion-->PackIconMaterialに指定していた要素のサイズや配置位置を指定する属性をBorderに移動させました。
また、Interaction.TriggersをBorder要素に対応させるように階層を修正します。
修正後は以下のような動作になります。
FontAwesome.WPFを使用した場合でも同様の実装でクリック領域を確保することが出来ます。
