（WPF）要素のスクリーンキャプチャーを保存するTriggerActionを作る
WPFで画面上の要素をキャプチャーして画像ファイルとして保存するような要件がワリとありますが、どうせならTriggerActionで作られたプロダクトは無いかなーと思って探してみたところ、すぐには見つからなかったので自作してみました。
以下、今回の開発環境です。
WPFでスクリーンキャプチャーを保存する方法は色々ありますが、今回は以下のページを参考にさせていただきました。
これをTriggerActionで実装してみた結果がこちら
＜CaptureAciton.cs＞
namespace CaptureTriggerSample.TriggerActions { using System; using System.IO; using System.Windows; using System.Windows.Interactivity; using System.Windows.Media; using System.Windows.Media.Imaging; public class CaptureAction : TriggerAction<FrameworkElement> { public static readonly DependencyProperty FileNameProperty = DependencyProperty.Register("FileName" , typeof(string) , typeof(CaptureAction) , new FrameworkPropertyMetadata(null)); public string FileName { get => (string)GetValue(FileNameProperty); set => SetValue(FileNameProperty, value); } protected override void Invoke(object parameter) { Rect bounds = VisualTreeHelper.GetDescendantBounds(AssociatedObject); DrawingVisual drawingVisual = new DrawingVisual(); using (DrawingContext drawingContext = drawingVisual.RenderOpen()) { VisualBrush visualBrush = new VisualBrush(AssociatedObject); drawingContext.DrawRectangle(visualBrush, null, bounds); } RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap((int)bounds.Width, (int)bounds.Height, 96, 96, PixelFormats.Pbgra32); renderTargetBitmap.Render(drawingVisual); renderTargetBitmap.Freeze(); PngBitmapEncoder png = new PngBitmapEncoder(); BitmapFrame bitmapFrame = BitmapFrame.Create(renderTargetBitmap); bitmapFrame.Freeze(); png.Frames.Add(bitmapFrame); using (FileStream fileStream = File.Create(FileName)) { png.Save(fileStream); } MessageBox.Show($"キャプチャーを保存しました{Environment.NewLine}" + $"[ファイル名]{Environment.NewLine}" + $" {FileName}" , "キャプチャー" , MessageBoxButton.OK , MessageBoxImage.Information); } } }
※ブログ用に可読性を考慮してエラー処理などはしていません。
FileName プロパティに出力するファイル名を指定できるようにしています。
これを使うにはこのようにします。
＜MainWindow.xaml＞
<Window x:Class="CaptureTriggerSample.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:local="clr-namespace:CaptureTriggerSample" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:triggerActions="clr-namespace:CaptureTriggerSample.TriggerActions" Title="MainWindow" Width="525" Height="350" mc:Ignorable="d"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click" SourceObject="{Binding ElementName=CaptureButton}"> <triggerActions:CaptureAction FileName="Resources\Capture.png" /> </i:EventTrigger> </i:Interaction.Triggers> <Grid x:Name="LayoutRoot"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Button x:Name="CaptureButton" Grid.Row="0" Margin="8" Padding="16,8" HorizontalAlignment="Left" Content="Capture" /> <Grid Grid.Row="1" Margin="8"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBox x:Name="TextBox" /> <TextBlock Grid.Row="1" Margin="0,8" Text="{Binding Text, ElementName=TextBox, Mode=OneWay}" /> </Grid> </Grid> </Window>
これを実行すると以下のような画面が表示されます。
CaptureボタンをクリックするとWindow要素のキャプチャーが実行されます。
（実行フォルダに"Resources"フォルダを作成する必要があります。）
実際にキャプチャーされた画像ファイルはこちら。
このように簡単に指定した領域をキャプチャーすることが可能です。
TriggerActionにしたことにより、例えばKeyTrigger を使ってCtrl + Cキー入力時にキャプチャーを保存したりすることも可能です。
ただし、１点注意することがあります。
レアケースだとは思いますが、以下の様にキャプチャー対象の要素の外側にも子要素が配置されている場合、子要素を含む領域がキャプチャーされてしまいます。
以下はVisual Studio のXAMLデザイナープレビューです。
右上にEllipseを配置していますが、Grid の領域外に配置しています。
これをキャプチャーすると以下の様になります。
原因はここ
Rect bounds = VisualTreeHelper.GetDescendantBounds(AssociatedObject);
VisualTreeHelper.GetDescendantBounds は指定したビジュアル要素の全ての子要素の和集合から領域を算出します。
つまり、AssociatedObject の子要素が配置された領域全てがその対象となります。（ただし原点はあくまでAssociatedObject を基準とする。）
これを回避するには、AssociatedObject もしくはその子要素にClipToBounds="True" を設定します。
こうすることで要素の範囲外にあるものはキャプチャーされなくなります。
画面領域外にコントロールを配置することってあんまりないと思うのですが、移動アニメーション中などに予期せずキャプチャー範囲が期待したもので無くなることはあり得るので注意が必要です。
今回使用したサンプルはこちら↓↓↓↓
github.com
Visual Studioのリモートデバッグ方法メモ
Visual Studioのリモートデバッグ機能を初めて使ったのでメモ
リモートデバッグ機能とは？
リモートデバッグとは、例えば客先から受領している端末上で実行しているアセンブリに対してブレークポイントやステップ実行するための機能です。
詳細は以下のページを参照してください。
使い方
適当にググれば出てくるのですが、一番わかりやすかったのは以下のページでした。
ネットワーク経由でのリモート ユーザーモード デバッグ – Japan WDK Support Blog
と、ここまでですんなり実行できるのかと思いきやいくつかハマりました。
ちなみに実行環境は"Visual Studio2015"のWPF アプリケーションです。
- リモートデバッグ ツールが見つからない
Visual Studio2015 で開発していたのですが、リモートデバッグ ツールのページは404になっています…
以下のページからダウンロードしましょう。
- 実行フォルダがホストとリモートで同じでなければならない
これは上記MSDNページにも記述されていますが、開発用環境とリモート環境でアセンブリの配置フォルダ パスが同一である必要があります。
私の環境はDドライブ上で実行していたので最初は実行に失敗しました。
仕方なくプロジェクトの[プロパティ] - [ビルド] - [出力パス] をCドライブに変更しました。
- 毎回実行ファイルをコピーする必要がある
仕方ないことなのですが、実行環境にビルドしたアセンブリを毎回配置する必要があります。
最初はUSBメモリを使用してコピーしていたのですが、面倒なのでリモート環境に共有フォルダを作成しました。
そして、上記の出力パスを共有フォルダに設定することでアセンブリ コピーの手順が不要になりました。
つまり、以下のようなイメージ
Before
After
これで毎回、開発用PCと同じ感覚でデバッグすることが可能になりました。
リモートの設定は環境に依存するため、リモート デバッグ用の構成を追加しておくのがベターだと思います。
実行環境にリモートツールをインストールしたりネットワークに接続したりといくつか条件はありますが、実行環境でしか発生しない不具合もあるため条件さえ合致すれば有用なデバッグ方法だと思いました。
ただ、この仕組み上、複数人で同時にリモートデバッグを行うといった方法を取ることはできないでしょう。
（Android）ログ出力ライブラリ"Timber"を使ってみる
Androidのログ出力ライブラリ"Timber"でログ出力機能を使ってみたのでメモ。
動作環境
- Android Studio : 2.3.3
- Compile Sdk Version : API26 Android8.0 (O)
- Min Sdk Version : API19 Android4.4 (KitKat)
- Timber Version : 4.5.1*1
パッケージを導入する
- [File] - [Project Structure...] からパッケージを追加したいモジュールの[Dependencies]タブを選択する。
- 画面右側の[+]をクリック[Library dependency]を選択する。
- "com.jakewharton.timber:timber:4.5.1"と入力し、検索する。
- "com.jakewharton.timber:timber:4.5.1"を選択して[OK]ボタンをクリックする。
- build.grableに以下が追加されていればOK
compile 'com.jakewharton.timber:timber:4.5.1'
Timberを使う
Timberは初期化する際にログ出力機構のTreeを指定します。
以下は予め用意されているデバッグ用のTreeを設定しています。
リリース用のTreeは自前で作成する必要があるようです。
Timber.plant(new DebugTree());
使用する場合は通常のLogクラスと使い方は同じです。
サンプルを作成がてらログ出力機能を作りました。
以下のLoggerクラスはTimberのログ出力機能をラッパーです。
gist.github.com
initializeで初期化しているログTreeは以下のようになっています。
gist.github.com
後はこれを以下の様に使用します。
gist.github.com
これを実行するとLogCatには以下のようなログが出力されます。
あとはログの出力先をファイルにするなりクラッシュレポートを送信するなりすると使えそうです。
*1:2017年9月12日時点で最新版です。
MediaPlayer でファイル再生時のエラー回避方法について
またもやWPF のMediaPlayer ネタです。
MediaPlayer のイベントにMediaFailed がありますが、このイベントで以下のようなメッセージが出力される場合があります。
HRESULT からの例外:0xC00D11BA
これはWindows Media Player が出力している例外メッセージです。
MediaPlayer.Play() を呼び出した後にこの例外がスローされるのであれば、多くの場合、以下の内容が原因とされています。
- サウンド ドライバーが最新でない。
- 再生ファイルのコーデックが不足している。
など
しかし、再生中にたまにこの例外がスローされる事があります。
そうなった場合、再度MediaPlayer.Play() を実行しても楽曲が再生されません。
残念ながら確実に発生するオペレーションの確立と原因の究明までには至っていないため、この現象の発生を止めることはできません。
今回は"この現象が発生してももう一度楽曲を再生できる"ような対象法をまとめます。
動作環境
- OS : Windows10
- Visual Studio : 2015 Enterprise
- 言語 : C#
- GUI アーキテクチャ : WPF
対策
正しいかどうかは別として、"エラー発生後に楽曲ファイルを再読読み込み"することで回避は可能です。
エラーの発生するコードは以下の様なものとしましょう。
var mediaPlayer = new MediaPlayer(); mediaPlayer.MediaFailed += (sender, e) => { // HRESULT からの例外:0xC00D11BA // というエラーメッセージが出力される。 Console.WriteLine(e.ErrorException); }; mediaPlayer.Open(new Uri(@"Resources\sample.wav")); mediaPlayer.Play();
これをこう変えます。
var mediaPlayer = new MediaPlayer(); mediaPlayer.MediaFailed += (sender, e) => { // HRESULT からの例外:0xC00D11BA // というエラーメッセージが出力される。 Console.WriteLine(e.ErrorException); mediaPlayer.Close(); mediaPlayer = null; mediaPlayer = new MediaPlayer(); mediaPlayer.Open(new Uri(@"Resources\sample.wav")); }; mediaPlayer.Open(new Uri(@"Resources\sample.wav")); mediaPlayer.Play();
イマイチ発生原因がつかめていないのでモヤモヤは残るのですが、今のところはこれで対応できているので良しとします。
