【#UWP】入門書 「UWP アプリ開発 101」 第2版 (VS2017 対応) 好評発売中です

UWP101

「UWP アプリ開発 101 (one oh one)」

Windows Forms 開発者のための
C# / XAML による UWP アプリ開発入門
第2版 (Visual Studio 2017 対応)

(A4換算で約200ページ)

この本は、 2~3日間の研修を想定して作成したテキストです。 Windows Forms 開発者にとっては馴染みの薄いデータバインディングやデータテンプレートなどに重点を置いて解説しています。
※ Xamarin ではなく、MS 純正の UWP アプリ開発方式の方です。

2017年 7月に第2版となりました。 Visual Studio 2017 対応版です。 無償の Visual Studio 2017 Community を使って演習していきます。

入手はこちらからどうぞ↓

どちらも定価 700円ですが、
・ Kindle版は「無料サンプルを送信」で冒頭1割ほどが読めます
・ UWPアプリ版は冒頭3分の1ほどが無償で読めます

UWP アプリ版は、Windows 10 Mobile でも読めます。
HoloLens や Xbox One でも OK ♪
20170206_uwp101_02

 

» 続きを読む

| | コメント (0) | トラックバック (0)

2018年4月10日 (火)

【Windows 10 1803】 設定アプリがようやく使えるものになってきた♪

Windows 10 の「設定」アプリといえば、 役に立たない代表でしたw
例えば、 「あ、 スリープまでの時間をちょっと変えたい!」 と思って、 「設定」アプリで「電源」を検索しても、 何も無し。 「フォント」とか「プログラム」とか検索しても、 何も無し。 おかげで、 タスクバーに置いたコントロールパネルへのショートカットが手放せなかったわけですが…。

20180409_1708settings01a
※ 1709 の設定アプリで「電源」を検索したところ

それが、 1803ではずいぶんと検索結果が出てくるようになりました。 それも「設定」 アプリ内だけではなくて、 コントロールパネルへのリンクも出てきます。 例えば、 「電源」で検索すると5項目ほど出てくるので、 その中から「電源プランの選択」を選んでみると…、

20180409_1803settings01a
※ 1803 の設定アプリで「電源」を検索したところ

…コントロールパネルの「電源オプション」が開きます♪

20180409_1803settings02a

| | コメント (0) | トラックバック (0)

【Windows 10 1803】 ストアにフォントのダウンロードコーナーができた

Windows 10 1803 (Redstone 4) build 17133.1 がリリースプレビュー リングに流れてきました。 いよいよ RTM として一般公開されるのも近そうです。

この 1803 の新機能として (正確には build 17040 から)、 フォントをストアからインストールできるようになっています。 今のところ、 次の画像のように英語のフォントがいくつかあるだけですが、 今後は増えるだろうと期待されます♪

20180409_msstore01

フォントは、 アプリ > 個人用設定 > フォント というカテゴリに分類されています (次の画像)。

20180409_msstore03a

「ああ、最初の画像はそのカテゴリのページなのね!」 …と思ったあなた、 それは早とちりというものです。 ずいぶん前から、 ストアのアプリではサブカテゴリの一覧が表示できなくなっているのです (Web のストアにはあります)。 フィードバックで何回か指摘したけど梨の礫なので、 バグではなく仕様変更なのでしょう。

では、 冒頭の「フォントコーナー」へはどうやって行くのでしょうか?
答えは、 「検索ボックスに "font" と入力して表示されるサジェスチョンから選択する」 です!

20180409_msstore02a

 

| | コメント (0) | トラックバック (0)

2018年3月28日 (水)

【VS2017 15.7pv2】 XAML のランタイム ツールに 「ヒートマップ」 が増えた

先週に公開された Visual Studio 2017 Version 15.7 Preview 2 ですが、 デバッグ中に XAML 画面の上端に表示される 「ランタイム ツール」 (runtime tools) にこんなボタンが増えてます。

20180328_vs2017_15_7pv2_01b1

"Display Heatmaps" (ヒートマップを表示する)
なんでしょう、 これ? ドキュメントが見当たらないっぽいのですが、 画面のどの部分に CPU / GPU の負荷が掛かっているのかをビジュアライズしてくれるってことかな。

次からの3枚は、 OFF / ON にしたところ / ON 状態で ListView 上をマウスホバーしたところ

20180328_vs2017_15_7pv2_00

20180328_vs2017_15_7pv2_01a

20180328_vs2017_15_7pv2_02a

ON にしておくと、 なんだかしょっちゅうウィンドウ全体が真っ赤になります。 まるで3倍速くなったかのようですが、 もちろん実行速度は変わりませんw (っていうか Heatmaps 処理が噛む分、 遅くなってるはず)


| | コメント (0) | トラックバック (0)

2018年2月10日 (土)

【.NET Core】 プロジェクトを作ると 「project.assets.json が見つかりません」 エラー

Visual Studio 2017 で .NET Core 2.0 のプロジェクトを作ったら、 こんなエラーを喰らいました orz

エラー 資産ファイル 'C:\project-copy\test\BluewaterSoftProject\work\おためし\CoreConsoleApp1@test\CoreConsoleApp1\obj\project.assets.json' が見つかりません。NuGet パッケージの復元を実行して、このファイルを生成してください。 CoreConsoleApp1 C:\Program Files\dotnet\sdk\2.1.4\Sdks\Microsoft.NET.Sdk\build\Microsoft.PackageDependencyResolution.targets 327

20180210_dotnetcore2_01a

このとき、 画像に見えるように、 ソリューション エクスプローラーで 「依存関係」 に黄色の警告マークが付いていて展開できません。
エラーメッセージにあるように NuGet パッケージの復元をやってみても、 効果なし。

原因は、 プロジェクトのフルパスの途中に '@' 記号 (半角) が入っていたこと。 それと、 '$' 記号 (半角) もダメです (他にもありそう)。 なお、 日本語は大丈夫みたい。

| | コメント (0) | トラックバック (0)

2017年8月23日 (水)

【#UWP】 ビットマップの表示色を変える (Win2D.uwp 経由で Direct2D を使う)

例えば、 モノクロ 2 値やグレイスケールの画像を用意しておいて、表示するときに色を変えたいとかあるわけですよ。

20170823_clockpanel01

上の画像は、 白と透明の  2 値画像ですが、 そのまま黒バックの上に表示すると、 次の画像のようになります (真ん中にカラーピッカーを追加しています)。

20170823_colormatrixeffect01

メモリー上のビットマップ内部では、 それぞれのピクセルは (R,G,B) = (0xff, 0xff, 0xff) か (0, 0, 0) のどちらかになっています。 そこで例えば、 (0xff, 0xff, 0xff) のピクセルだけを (0xff, 0, 0) に変えてやれば、 赤い画像に変わるわけです。

が、 それをピクセルごとにちまちまやってたんでは、 時間が掛かってしょうがありません。
昔、 8 x 8 = 64 ピクセルとか、 16 x 16 = 256 ピクセルとかを扱ってればよかった時代には、 当時の超非力な CPU でも、 256 回のループなんてのはまぁなんとかなりました (←いつの時代だよ!? w)。
今や、 1000 x 1000 ピクセルのビットマップとか平気で扱わなきゃならない時代。 1000 x 1000 ピクセルを全部舐めたら 100 万回ですよ!?

そんなわけで、 Direct2D の出番です♪

 

C# で書いている UWP アプリから DirectX を使うには、 SharpDX ってのもあります。
SharpDX は、 ほぼ DirectX をラップしただけの API なので、 生 DirectX プログラミングできるスキルがないと、 使うのはちょっと大変です。
例: WinRT/Metro TIPS:SharpDXを使ってDirectXで音声ファイルを再生するには?[ユニバーサルWindowsアプリ開発]

で、 それよりもっと WinRT API 寄りにガッツリとラップしてくれたのが、 Win2D  です。

横文字得意な人向け ⇒ Introducing Win2D: GPU accelerated 2D graphics programming in the Windows Runtime - Building Apps for WindowsBuilding Apps for Windows (2014/9/5)

Win2D でどんなことが出来るのかは、 サンプルアプリを見るのが早いです。
Win2D Example Gallery

20170823_win2dsamplegallery01

 

» 続きを読む

| | コメント (0) | トラックバック (0)

2017年8月16日 (水)

【#UWP】 CompactOverlay モード: Picture in Picture というか、「最前面に表示」するウィンドウを作る

UWP アプリをやってると、 Windows Forms や WPF の TopMost プロパティが懐かしくなることってありますよね f(^^;

Creators Update (Version 1703, build 15063) から、 UWP アプリでも可能になりました♪

20170816_compactoverlaymode01
上の画像で、左上に赤丸の付いたウインドウ (この後で紹介するコード) と画面右上にある青色のウインドウが最前面に表示されています。 最大化した Visual Studio は、 インテリセンスのポップアップが出ているので、 これがアクティブな (フォーカスを持った) ウインドウです。 その手前に 2 つのウインドウが表示されているのです。

この「常に手前に表示」機能を実装したアプリの例


これをやるには、 ApplicationView クラスの TryEnterViewModeAsync メソッドを使います。

その使い方を説明する前に、 この CompactOverlay モードの動作を紹介しておきましょう。

こんなアプリを作りました。 これは通常モードのときのウインドウです。 表示エリアの左上に赤丸を置きました。 左下のボタンで、 モードを切り替えます。
20170816_compactoverlaymode02a

そして、 CompactOverlay モードに入ると、 ウインドウの位置は必ず画面右上に移動されます (最初の画像にあるように、 その後で動かすのは OK)。
20170816_compactoverlaymode03

また、 モードに入る前のウインドウサイズは無視されて、 デフォルトでは上の画像のようなサイズになります (後のコードのところで説明しますが、 ある程度はサイズ指定可能)。

» 続きを読む

| | コメント (0) | トラックバック (0)

2017年8月 5日 (土)

【#UWP】 15063用の Acrylic Effect を、ちゃんと実装してみる

前の記事「どこでも掴んで動かせるウィンドウを作る」のソースコードには、 15063 (Windows 10 Creaters Update, Version 1703) でもウィンドウに Acrylic Effect を掛けるために、 とりあえず暫定的なコードを書いていました。

20170729_draggablewindow01anime
※ クラウディア画像: © 2011 Microsoft Corporation All Rights Reserved.

今回、改めてわりと真面目に実装しなおしてみました。

  • Acrylic Effect 自体に色を付ける (前回は、手前に半透明の色を置いて誤魔化してましたw)
  • 設定で透明効果を OFF にしたとき (タブレットモードのときも)、ソリッドカラーにする
  • ウィンドウがフォーカスを失ったときも、ソリッドカラーにする

ひとつめは、面倒なんでやりたくないよ~、っと思ってた案件なんです。 が、サックリ使えるコードを JuniperPhoton 氏が公開してくださってるのを見つけたので、それを利用。 次のようなコードを書くだけですみました。超らくちん♪ (要 NuGet パッケージ 「Win2D.uwp」)

draggableGrid.Background
  = new MyerSplash.Common.Brush.AcrylicHostBrush()
    {
      TintColor = accentColor,
      TintColorFactor = 0.4,
      BackdropFactor = 0.6,
      BlurAmount = 20,
    };

二つめは、UISettings クラスの AdvancedEffectsEnabled プロパティで判定できます。 このプロパティが変化したときには UISettings クラスの AdvancedEffectsEnabledChanged イベントが叩かれるので、そのハンドラーで Acrylic Effect とベタな背景ブラシを切り替えてやれば OK。

ただし、AdvancedEffectsEnabledChanged イベントは別スレッドで叩かれるので要注意。 次のように Dispatcher.RunAsync してやります (内部関数にしているのは、ついでに ColorValuesChanged イベントにも対応したため)。

// 別スレッドで叩かれる!
_uiSettings.AdvancedEffectsEnabledChanged
  += (setting, o) => runAsync_SetBackgroundBrush();

async void runAsync_SetBackgroundBrush()
{
  await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
  {
    // ここで適切な背景ブラシをセット
  });
}

三つめは、 Window.Current.Activated イベントで e.WindowActivationState を見て切り替えてやるだけですね。

以上のコード全体 ⇒ https://github.com/biac/blogcode/tree/master/DraggableWindow

| | コメント (0) | トラックバック (0)

2017年7月30日 (日)

【#UWP】 どこでも掴んで動かせるウィンドウを作る

Window.Current.SetTitleBar(draggableGrid);
↑これだけで、 指定した UI コントロール (ここでは Grid) をマウスで掴んでウィンドウを動かせるようになります。

いやぁ、 SetTitleBar は以前から知ってたんですけどね。 てっきり本来のタイトルバー領域内だけでしか有効にならないと思い込んでました (汗;

画面いっぱいの Grid に適用してやれば、↓ごらんの通り (クリックして拡大するとアニメGIF)。 合わせて、 描画領域をタイトルバーに押し出してやるのと、 Fluent Design の Acrylic Effect も使ってます。

20170729_draggablewindow01anime
※ クラウディア画像: © 2011 Microsoft Corporation All Rights Reserved.

ウィンドウの中をマウスでドラッグして、 ウィンドウを動かせます。 上の動画では分かりませんが、 タイトルバー扱いなので、 右クリックするとタイトルバーと同じコンテキストメニューが出ますし、 ダブルクリックするとウィンドウが最大化します。

SetTitleBar したコントロール (および、 その中に置いたコントロール) には、 触れません。 ボタンやテキストボックスなどを触れるようにするには、 SetTitleBar するコントロールとは別のビジュアルツリーに入れてやります (次のコード)。

<Grid x:Name="rootGrid">
  <!-- タイトルバー扱いする Grid -->
  <Grid x:Name="draggableGrid"  Background="……省略……"/>

  <!-- 操作可能な UI を置くための Grid -->
  <Grid x:Name="contentGrid" Margin="20">
    <StackPanel HorizontalAlignment="Center">
      <ToggleSwitch Header="ToggleSwitch" />
      <TextBox Header="TextBox" TabIndex="0" />
    </StackPanel>
  </Grid>
</Grid>

※ なお、 このコードでは Windows 10 1703 (15063) でも Acrylic Effect が有効になるようにするため、 面倒なことをしています。 1709 (仮) 以降でよければ、 Acrylic Effect は XAML で属性を指定するだけです。

| | コメント (0) | トラックバック (0)

2017年4月 4日 (火)

【#UWP】 アプリ内購入 (IAP、あるいは「アドオン」) を実装する [Windows 10 全バージョン対応]

以前は 「アプリ内購入」 (IAP) と呼ばれてました。 今は、アドオンと呼ぶらしい。
ようするに、 アプリ内でのアイテム課金です。

この IAP は、 大きく分けて 2 種類あります。 永続型と消尽型 (コンシューマブル) です。

ここでは永続型の IAP の実装方法を解説していきます。

【目次】

  1. IAP を Windows ストアに申請
  2. 実装の概要
  3. IAP 購入の有無で処理を分岐させる
  4. IAP 購入の有無をシミュレートする
  5. ユーザーに IAP を購入してもらう
  6. まとめ

» 続きを読む

| | コメント (0) | トラックバック (0)

«【#UWP】 アプリが最初にインストールされた日時を取得する