カテゴリー「* プログラミング ( Metro スタイル )」の81件の記事

* プログラミング ( UWP アプリ )

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

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

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

| | コメント (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年7月 1日 (土)

【#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

 

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

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

2017年4月 4日 (火)

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

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

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

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

【目次】

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

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

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

2017年4月 2日 (日)

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

アプリが最初にインストールされた日付が欲しいことがあります。 こんな↓ふうに情報を提供したいとか。

20170402_iap05a
※ このアプリは 「UWP アプリ開発 101 (one oh one)

そのデバイスに直近でインストールされた日時なら、 初回起動時に設定ファイルへ DateTimeOffset.Now を書き込んでおけば済みます。
そうじゃなくって、 そのユーザーが Windows ストアから最初に取得した日時 (初回インストール日時) を知りたいときは、 Windows ストアから教えてもらいます。

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

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

2017年2月23日 (木)

【#UWP】プロモーション コードを使ってアプリを宣伝する / βテストする

特定の人だけに UWP アプリを使ってもらいたいことがあります。

  • βテスト
  • 有料アプリを無償で進呈する
  • 有料アドオン (旧 IAP) を無償で進呈する

βテストの場合、 フライト グループやセグメントを使う方法もありますが、 これはβテスターを広く募集するには不向きです。 あるいは、 無料アプリ / アドオンのβテストでは、 ストア上で非表示にしておいて URL を知っている人だけダウンロード可能にしておく方法もありますが、 βテスターの人数を限定することはできません。

ストア上で非表示にしておいてプロモーション コードを使えば、 βテスターを広く、 かつ、 人数を限定して募集できます。

有料アプリ / アドオンを無償で進呈するのは、 「先着○○名様まで無料!!」 といった感じで宣伝に使えます。  Windows Store for Business を使わずに組織内へ展開するのにも使えそうです。 また、 (あって欲しくはないのですが) 課金トラブルへの対処法にも使えるでしょう。

 

プロモーション コードを貰ったら

プロモーション コードは、 コード単体、 または、 コードを含む URL の形で配布されます。

コード単体を受け取った場合は、 Microsoft アカウントの管理サイトにログインし、 [コードやギフト カードを利用する] のリンク (次の画像) を開いて、 コードを入力します。

20170222_msaccountportal01

URL の場合は、 次のような形式です。

https://account.microsoft.com/billing/redeem?mstoken=XXXXX-XXXXX-XXXXX-XXXXX-XXXXX

URL を受け取った場合は、 それを開くだけで、 (Microsoft アカウントでのログインは求められますが) 上記の [コードやギフト カードを利用する] のページでコードを入力した状態になります (次の画像)。

20170222_winstorepromotioncode04a

ここで [使用] ボタンをクリックすると、 ストアのダウンロード ページに案内されるという仕掛けです。

QR コードを受け取った場合は、 Windows 10 だけになりますが Windows ストアの 「コードを使う」 で読み取ります (ここでコードを入力することもできます)。

20170223_winstoe_usecode01a

続きを読む "【#UWP】プロモーション コードを使ってアプリを宣伝する / βテストする"

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

2017年2月10日 (金)

【#UWP】アプリに、 ユーザーからのフィードバック機能を付けよう

Windows 10 のフィードバック Hub は、 アプリごとにフィードバックを受けられるようになっています。

どんな感じかというと…

【1】 ユーザーは、 アプリの [フィードバック] ボタン (赤丸) を押すなどします
20170210_appfeedback01a

【2】 フィードバック Hub アプリが立ち上がります。
そのアプリがすでに選択された状態になっているので (赤丸)、 ユーザーはフィードバックを書いて送信するだけです。
20170210_appfeedback02a

続きを読む "【#UWP】アプリに、 ユーザーからのフィードバック機能を付けよう"

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

2017年2月 6日 (月)

【#UWP】入門書 「UWP アプリ開発 101」 を無料配布しています

UWP101

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

Windows Forms 開発者のための
C# / XAML による UWP アプリ開発入門

(約200ページ)

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

UWP アプリとして、 Windows ストアで現在は無料で配布しています。 次版から一部有償化する予定ですので、 ダウンロードはお早めに♪

入手はこちらからどうぞ↓
Get it on Windows 10

Windows 10 Creators Update の Insider Preview 版 (build 14986 より後) にて、 アプリの起動中に必ず落ちてしまうという不具合が発生していました。

これはアプリが使用しているライブラリー側の問題のようで、 その修正待ちとなります。 3月 4日頃にリリースされた build 15048 にて修正されたようです。

Windows 10 フィードバック Hub へのリンク:

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

 

続きを読む "【#UWP】入門書 「UWP アプリ開発 101」 を無料配布しています"

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

2017年2月 5日 (日)

【#Xamarin.Forms】【#UWP】 「游ゴシックを指定するには?」 あるいは 「三点リーダー『…』を中央に配置するには?」

UWP では日本語の文字の既定のフォントが Yu Gothic UI になっているため、 (Xamarin.Forms に限らず) UWP アプリで表示する日本語の文字は Yu Gothic UI になります。

そのため、

  • 平仮名・カタカナの背は高く (漢字と同じ高さ)、 幅は狭く、 異様に縦長の字形になっていて読み難い
  • 三点リーダー「…」が中央ではなく、 下端に表示される

※ どっちも、 Win10 のプレビュー時代に文句を言ったんだけど、 直りませんでした… orz

◆ 確かめてみる

Xamarin.Forms の PCL ソリューションを作り、 MainPage.xaml に次のような XAML を書く。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:XamarinForms20190203"
        x:Class="XamarinForms20190203.MainPage">
  <StackLayout VerticalOptions="Center" HorizontalOptions="Center">

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           FontSize="36"
           LineBreakMode="WordWrap" BackgroundColor="Yellow">
      既定のフォントは Yu Gothic UI なので…、 片仮名や平仮名が漢字と同じ高さだし、 三点リーダーが下に行ってしまう…… orz
游ゴシックだと漢字よりカナは小振りだし、 三点リーダー「…」もちゃんと真ん中に来る♪
あと、 Office の ff とかも連続してくれる。
Win8.xと違って、游ゴシックの既定でもトンドルは㌧㌦にならないし♫
    </Label>

    <Button Text="ボタンの三点リーダー「…」は……?"
            FontSize="36" BackgroundColor="Yellow"
            HorizontalOptions="Center" />

    <Editor Text="TexBoxの三点リーダー「…」は……?"
            FontSize="36" BackgroundColor="Yellow" />

  </StackLayout>
</ContentPage>

…で、 実行してみる。

20170205_xamarinforms01

Label (UWP の TextBlock) も Button も Editor (UWP の TextBox) も、 みんな Yu Gothic UI で表示されています。 三点リーダー 「…」 が下に表示されちゃってます。

ちなみに、 Yu Gothic UI は、 既定では 「ff」 などを ligature (合字) にしてくれません。 次の画像で 「f」 と 「f」 の間が少し空いているのが分かります。

20170205_xamarinforms02

続きを読む "【#Xamarin.Forms】【#UWP】 「游ゴシックを指定するには?」 あるいは 「三点リーダー『…』を中央に配置するには?」"

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

より以前の記事一覧