SHOU TAKENAKA'S TECHLOG

WPFには画像を表示するためのImageというコントロールがあるけれど、アニメーションGIFには対応していないらしく、１フレーム目だけが静止画として表示されてしまう。何かソリューションはないのかと探したところ、以下のようなやり方があるようだ。   1. MediaElementを使う <MediaElement Source=”パス” LoadedBehavior=”Play”/> と書くと、アニメーションGIFが表示できる。ただ、GIFファイルが埋め込みリソースになっているとだめなので、プロパティをいじって「出力ディレクトリにコピー」にしておかないといけない。見つけた中では一番シンプルなソリューションだったけれど、表示までに時間がかかる、アニメーションが途中で止まる、といった問題があり、すぐには解決できなかったので、次のPictureBoxを使う方法を採用することにした。   2. Windows FormsのPictureBoxを使う アニメーションGIFを設定したWindows FormsのPictureBoxをWindowsFormsHostでホストすれば、WPFの画面にアニメーションGIFを表示できる。まずXAMLでこのように書いておき、 <Window x:Class="WpfApplication1.Window1"     xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:wfi="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"     xmlns:winForms="clr-namespace:Sy...

Data-Driven Services with Silverlight 2 という本を書いている John Papa 氏のブログ で「 5 Minute Overview of MVVM in Silverlight 」という役に立つ投稿があったので共有。 イントロダクションで、「多くの記事は MVVM が何か知っていることを前提に書かれているけれど、この投稿は MVVM 自体の簡単な説明です」と書かれている。今まさに注目されている技術というのは、知っている人たちでどんどん議論が進んでいって新参者は追いつくのが大変なので、こういう基本を勉強できるコンテンツはありがたい。 View View はユーザーインターフェースを表すクラスです。例えば Silverlight では MainPage.xaml や Page.xaml です。View はコントロール、アニメーション、ナビゲーション、テーマ、その他表示用の対話機能を持っています。Silverlight や WPF ではデータバインディングも View に含まれます。バインディングはデータのどのプロパティを使うかだけを指定していて、プロパティがどこからくるのか (つまりどのインスタンスにバインドされるのか) は意識していません。データソースが View の DataContext にセットされた時に、バインディングがアクティブになります。 View に関する別の意見 XAML 内のリソースで ViewModel を作って View にアサインすることがあります。私は View と ViewModel を分離して連携させる方が好きです。でも、リソースとして View の中で ViewModel を作るのはとてもポピュラーなようです。どちらの方法もいいところがあります。View の中で ViewModel を作ってしまうのは Blend を使う場合に簡単で効率がいいでしょう。View と ViewModel が疎結合であれば DI しやすさやテスタビリティを高めます。 Model 特定のエンティティとして表現されるデータを表すクラスです。例えば、CompanyName や CustomerId のようなプロパティを持った Customer クラスです。Cust...

Chris Cavanagh という方が Google の Chromium とか、 Awesomium をベースに、WPF の Web ブラウザを作っている。 Chris 氏によれば WPF で Web ページをレンダリングし、Web ページと連携できるようにすることは大きく可能性を広げます。WPF には WebBrowser コントロールが組み込まれていますが、これは IE の ActiveX コントロールのラッパーであり、残念ながら WPF レイアウトシステムに連動しません。 というのがモチベーションになっているらしい。確かに、WebBrowser コントロールは TextBox や Button などの一般的なコントロールに比べてちょっと特殊（例えば Opacity が効かない）な挙動をするので、レイアウトシステムときちんと連動してくれる WebBrowser ライクなコントロールがあるとありがたい。 ちなみに、すでにデモアプリを試すことができる。下のスクリーンショットは このページ からダウンロードしたもの。見ての通り、ブラウザ画面に WPF のエフェクトをかけることができている。 これは YouCube という名前の WPF 3D Web ブラウザ。 このページ からデモアプリをダウンロードできる。

こんなことをやろうとしている。 (1) Window や Page から CanvasLayoutManager に対して状態遷移を指示する。この時、次の状態の名前を指定する。 (2) CanvasLayoutManager が指定された状態のレイアウトを取得し、現在のレイアウトと遷移後のレイアウトの情報をマージする。 (3) アニメーションを使って Canvas 内のレイアウトを変更する。 つまり各コントロールのレイアウト情報を外だしで定義しておいて、それを状態という形でグループ化して複数定義できるようにし、状態を切り替えることで動的なレイアウト変更を可能にしようとしています。 状態を各状態を保持した CanvasLayoutDefinition は XAML 内にリソースとして記述することを想定している。レイアウトには各コントロールのサイズ、位置、透明度を指定できるようにしていて、サイズと位置は Canvas のサイズと Canvas 内の相対位置をもとに割合で指定できるようにと考えている（例えば、Top=0.5、Left=0.5、Height=0.3、Width=0.3 と指定したら、コントロールの左上が Canvas の真ん中に来てサイズは Canvas の 0.3 倍になる）。 WPF 版の実装は大体できていて、これから Silverlight にポーティングしようとしている。完成したら CodeProject で公開予定。

入力補助の一環として、現在編集中の（つまりキャレットがある）パラグラフがわかりやすいように強調表示する方法を考えた。 まずは XAML 定義。ここで大事なのは RichTextBox の SelectionChanged イベントだ。名前からすると、テキストを選択状態にした時に発生しそうなイベントなのだが、実はキャレット移動時に発生する。この SelectionChanged イベントのハンドラで強調表示の切り替えを実装する。なお、Style と Resource の定義は、それぞれデフォルトの文字スタイルと、強調表示用の文字スタイルの定義である。 <RichTextBox Name="richTextBox" SelectionChanged="Highlight"> <RichTextBox.Style> <Style TargetType="RichTextBox"> <Setter Property="FontFamily" Value="MS UI Gothic"/> <Setter Property="FontSize" Value="12"/> </Style> </RichTextBox.Style> <RichTextBox.Resources> <Style x:Key="selectedBlock" TargetType="Block"> <Setter Property="Background" Value="LightBlue"/> <Setter Property="FontSize" Value="16"/> </Style> </Ric...

ステータスバーにメッセージを表示し、一定時間経ったら消す、という処理を実装する際、今回はただ消すだけではなくてフェードアウトしていくような消し方を考えてみた。 まずはステータスバーの配置とアニメーションの定義。メッセージを５秒間普通に表示した後、１秒間でフェードアウトして消えるようにしている。 <StatusBar> <StatusBarItem> <TextBlock Name="textBlock"> <TextBlock.Resources> <Storyboard x:Key="fadeStoryboard"> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="textBlock" Storyboard.TargetProperty="Opacity"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/> <SplineDoubleKeyFrame KeyTime="00:00:05" Value="1"/> <SplineDoubleKeyFrame KeyTime="00:00:06" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </TextBlock.Resources> </TextBlock> </StatusBarItem...

WPF の RichTextBox は内部に FlowDocument オブジェクトを持っていて、一部分の文字のスタイルを変えたり、表や画像を表示したりといった高度な文章表現ができるが、普通の TextBox と違って Text プロパティを持っていないので、直接文字列を読み書きすることができない。少々面倒だが、FlowDocument からテキスト領域を取り出して、そこに対して文字列を読み書きする、という風に実装しなければならない。 文字列の取得、設定でキーになるのが TextRange クラス。XAML で <RichTextBox Name="richTextBox"/> のように RichTextBox を宣言していたとすると、文字列の設定は FlowDocument document = this.richTextBox.Document; TextRange range = new TextRange(document.ContentStart, document.ContentEnd); range.Text = "ABCDEFG"; となる。設定する文字列がテキストファイルから読み込んだ文字列で、途中に改行が入っている場合は、１行１パラグラフになる。逆に文字列の取得は FlowDocument document = this.richTextBox.Document; TextRange range = new TextRange(document.ContentStart, document.ContentEnd); string text = range.Text;

.NET 3.5 SP1 で WPF に追加された、WPF の画面に Web ブラウザを埋め込んで Web ページを表示させることのできる WebBrowser コントロール。URL や ファイルのパスを指定して Web ページを表示させることができる以外にも、NavigateToString(“<p>Contents</p>”) のように NavigateToString メソッドを使って String として保持している HTML を直接レンダリングさせることもできる。だが、WebBrowser コントロールを使ってみたところ、日本語が文字化けしてしまった。 プロパティやメソッドでエンコーディングを指定する方法はないようだが、 このページ に回避方法が書かれていた。要は .NET からではなく、META タグで HTML 自体にエンコーディングを指定すればよいらしい。 <html> <head> <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'> </head> <body> … </body> </html>