CSharpとWPFを使ってデスクトップマスコットを作成しよう
はじめに
C#とWPFを使ったアプリ開発を始めたばかりで、画像を表示するデスクトップマスコットを作成しました。本記事では、WPFアプリケーションで透明なウィンドウに画像を表示し、ドラッグで移動できるデスクトップマスコットの作成方法を紹介します。
C#は大学院のときに指導教員だった先生が使っていましたね。 GUIとかを作る時に便利なんだよ的なことを言うてたのを思い出しました。
ChatGPTにご教授いただきながら、進めていきます。
とりあえず、動かしてコード概要知るのに便利過ぎる。
知の高速道路をランボルギーニで走っているような感じですよ。
新規プロジェクトの作成
Visual Studioで「新しいプロジェクト」を作成し、テンプレートとして「WPFアプリ(.NET)」を選択します。
ウィンドウの設定
MainWindow.xamlを開き、ウィンドウの設定を行います。
以下のように設定することで、透明なウィンドウになります。
<Window x:Class="DesktopMascot.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DesktopMascot" Height="450" Width="800"
AllowsTransparency="True" WindowStyle="None" Background="Transparent" Topmost="True">
</Window>
プレビュー画面がこのように背景透過されました。
背景透過画像の追加
適当に背景透過されている画像を追加してみました。
<Window x:Class="DesktopMascot.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DesktopMascot" Height="450" Width="800"
AllowsTransparency="True" WindowStyle="None" Background="Transparent" Topmost="True">
<Image x:Name="MascotImage" Source="QvxpA.png" />
</Window>
プレビューにも画像が反映されていることがわかります。
ドラッグ移動の追加
マウスイベントを使用して、マスコットをドラッグで移動できるようにします。MainWindow.xaml.csに以下のコードを追加します。
private Point _mouseOffset;
private bool _isMouseDown;
private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
_isMouseDown = true;
_mouseOffset = e.GetPosition(this);
}
private void Window_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_isMouseDown = false;
}
private void Window_MouseMove(object sender, MouseEventArgs e)
{
if (!_isMouseDown) return;
Point currentMousePosition = e.GetPosition(null);
double deltaX = currentMousePosition.X - _mouseOffset.X;
double deltaY = currentMousePosition.Y - _mouseOffset.Y;
Left += deltaX;
Top += deltaY;
_mouseOffset = currentMousePosition;
}
コードの全体像
MainWindow.xamlのWindowタグ内に、MouseEventを追加します。 このように追加しました。
<Window x:Class="DesktopApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DesktopMascot" Height="450" Width="800"
AllowsTransparency="True" WindowStyle="None" Background="Transparent" Topmost="True"
MouseLeftButtonDown="Window_MouseLeftButtonDown"
MouseLeftButtonUp="Window_MouseLeftButtonUp"
MouseMove="Window_MouseMove">
<Grid>
<Image x:Name="MascotImage" Source="QvxpA.png" />
</Grid>
</Window>
マウスの左ボタンが押されたとき、押されている間、そして離されたときのイベントハンドラを実装を追加しました。
using System.Windows;
using System.Windows.Input;
namespace DesktopApp
{
public partial class MainWindow : Window
{
private Point _mouseOffset;
private bool _isMouseDown;
public MainWindow()
{
InitializeComponent();
}
private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
_isMouseDown = true;
_mouseOffset = e.GetPosition(this);
}
private void Window_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_isMouseDown = false;
}
private void Window_MouseMove(object sender, MouseEventArgs e)
{
if (!_isMouseDown) return;
Point currentMousePosition = e.GetPosition(null);
double deltaX = currentMousePosition.X - _mouseOffset.X;
double deltaY = currentMousePosition.Y - _mouseOffset.Y;
Left += deltaX;
Top += deltaY;
_mouseOffset = currentMousePosition;
}
}
}
マウスが押されたときにマウスの位置を取得し、押されている間にウィンドウの位置を更新しています。これにより、デスクトップマスコットをドラッグして移動できるようになります。
ビルドの確認を行います。エラー無くビルドが通ることを確認します。
画像ファイルのビルド
画像ファイルのプロパティを開き、ビルドアクションが「リソース」に設定されていることを確認してください。これにより、画像ファイルがアプリケーションのリソースとしてビルドされるようになります。
Xamlの画面でビルドを実施すると画像が表示されます。
まとめ
-
MainWindow.xamlでは、ウィンドウの透明度やサイズ、スタイルなどのプロパティを設定し、画像を表示するためのImageタグを追加しました。
-
MainWindow.xaml.csでは、マウスイベントを利用してデスクトップマスコットのドラッグ移動を実現しました。Window_MouseLeftButtonDownイベントでマウスが押された際の位置を記憶し、Window_MouseMoveイベントでマウスが動いた際にウィンドウの位置を更新しています。
この記事では、C#とWPFを用いてシンプルなデスクトップマスコットアプリを作成する方法を学びました。WPFで透明ウィンドウを作成し、画像を表示し、ドラッグで移動できるようにする方法を解説しました。この知識を応用して、今後さらに複雑なデスクトップマスコットやアプリケーションを作成していくことができます。
amazon.co.jp
