Canvasにマウスカーソルを合わせた際にポップアップで拡大して表示する手順。
Popupでポップアップを表示、VisualBrushでCanvasの内容を表示させる。
VisualBrushのStrechをUniformにすることで親要素のサイズで拡大・縮小表示ができる。
MainWindow.xaml
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Canvas x:Name="test" HorizontalAlignment="Left" Height="225" Width="300" Background="AliceBlue">
<TextBlock>
写真<LineBreak/>
マウスカーソルで拡大
</TextBlock>
<Image Name="image1" Source="C:\Users\hoge\Pictures\cat.jpg" Width="140" Height="210" Canvas.Left="150" Canvas.Top="5" MouseEnter="Image_MouseEnter" MouseLeave="Image_MouseLeave"/>
</Canvas>
<Popup Name="popup" PopupAnimation="Fade" Placement="MousePoint">
<Rectangle Width="900" Height="675">
<Rectangle.Fill>
<VisualBrush x:Name="visualBrush" Stretch="Uniform" Visual="{Binding ElementName=test}" />
</Rectangle.Fill>
</Rectangle>
</Popup>
</Grid>
</Window>
画像を選択してすぐ離した場合にポップアップが表示されないようにSleepで0.5秒待ってから表示するようにした。
MouseHoverというイベントがあるらしいがやり方は確認中。
MainWindows.xaml.cs
using System.Windows;
using System.Windows.Input;
namespace WpfApplication3
{
/// <summary>
/// MainWindow.xaml の相互作用ロジック
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Image_MouseEnter(object sender, MouseEventArgs e)
{
//プレビュー表示まで0.5秒待つ
System.Threading.Thread.Sleep(500);
//ポップアップ表示
popup.IsOpen = true;
}
private void Image_MouseLeave(object sender, MouseEventArgs e)
{
//ポップアップ非表示
popup.IsOpen = false;
}
}
}