LoginSignup
5
4

More than 5 years have passed since last update.

Canvasをポップアップでプレビュー表示する

Posted at

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;
        }
    }
}

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4