UWP アプリ ほげり願メーカー をリリースしました

UWP アプリ ほげり願メーカーをリリースしました。
UWP アプリを制作するのはこれが初めてです。

20151203_00
(ストア: https://www.microsoft.com/store/apps/9nblggh6j36p )

ソースを公開して、UWP の作り方説明の題材にしようかと考えて作ったアプリで、非常にシンプルなアプリです。
その分、とてもクイック、クイック、クイックに使用できるアプリになっています。

まず最初に注意点
・本アプリはジョークアプリです。ジョーク目的以外には使用しないでください。
・世間には “退職” という、不謹慎な言葉があるようですが、品位ある本ブログではそのような単語は “ほげ” という言葉に置き換わります。

■ アプリの概要
すばやく、「ほげ願」を作成し、共有を通じてそのままメール等で上司に送信できるオールインワンアプリです。
ほげしようと思った瞬間から最速 10 秒程度で、ほげ願を上司に送信できます。
突発的な衝動を醒ます間もなくすべてが完了します。
いざという時のために、常に PC にモバイルにインストールしておくべきアプリです。

■ 使い方
1.アプリを起動すると左に文章の入力欄、右にほげ願が表示されます。
    起動時に、デフォルトでほげ願のテンプレートが入力されています。
    ほげ願の文章のテンプレートを探して本屋さんに走る必要はありません。

20151203_01

2.入力欄を編集すると、右のほげ願も変更されます。
    出来上がりをリアルタイムに確認しながら、ほげ願を作成できます。

20151203_02

3.書き上げたら、[送信]ボタンで素早く送信します。
    送信方法としてメールや、インストールされているメッセージング、SNSクライアントなどが表示されます。
    (※他のアプリでは共有となっている機能です)
    送信方法を選択して気持ちの変わらない間に、素早く送信します。

20151203_03

4.以上で完了です。よいほげライフをお楽しみください!

※本アプリはジョークアプリです。ジョークの通じない相手に送信してしまわないよう注意して自己責任でご使用ください。

ユニバーサルアプリで XML を扱う

デスクトップでよく見ていたネームスペースにいなくて、悩みました。

==================================================
// XMLドキュメントオブジェクト
var xml = new Windows.Data.Xml.Dom.XmlDocument();
// ファイルに保存
await xml.SaveToFileAsync(await ApplicationData.Current.RoamingFolder.CreateFileAsync(FILE_NAME, CreationCollisionOption.ReplaceExisting));
// 文字列として
var text = xml.GetXml();
==================================================

ユニバーサルアプリでローミングファイルを読み書きする

今更ユニバーサルアプリの話です。MADOSMA さんでは UWP アプリ動かないですし…。

ローミングファイルを読み書きするコードです。

============================================================
/// <summary>
/// string を file へ Write
/// </summary>
/// <param name=”filename”>ファイル名</param>
/// <param name=”data”>ファイルへ書き込む文字列</param>
internal async void WriteToFile(string filename, string data)
{
    var file = await ApplicationData.Current.RoamingFolder.CreateFileAsync(filename, CreationCollisionOption.OpenIfExists);
    using (var fs = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite))
    {
        await fs.WriteAsync(Encoding.UTF8.GetBytes(data).AsBuffer());
    }
}

/// <summary>
/// string を file から Read
/// </summary>
/// <param name=”filename”>ファイル名</param>
/// <returns>ファイルから読み込んだ文字列</returns>
internal async Task<string> ReadFromFile(string filename)
{
    var file = await ApplicationData.Current.RoamingFolder.CreateFileAsync(filename, CreationCollisionOption.OpenIfExists);
    using (var fs = await file.OpenReadAsync())
    {
        using (var ins = fs.GetInputStreamAt(0))
        {
            var reader = new DataReader(ins);
            var size = await reader.LoadAsync((uint)fs.Size);
            return reader.ReadString(size);
        }
    }
}
============================================================

ComboBox の ItemsSource と SelectedValue の両方に Binding をする

ComboBox の ItemsSource と SelectedValue の両方に Binding をする場合、xaml 上で記述する順番を意識する必要があるようです。
具体的には
・ItemsSource を先に、SelectedValue を後に記述
します。

■ 正しく動作する記述
==========
<ComboBox SelectedValuePath=”SampleID” DisplayMemberPath=”SampleName” ItemsSource=”{Binding SampleList}” SelectedValue=”{Binding Sample.SampleID}”/>
==========

■ 正しく動作しない記述
==========
<ComboBox SelectedValuePath=”SampleID” DisplayMemberPath=”SampleName” SelectedValue=”{Binding Sample.SampleID}” ItemsSource=”{Binding SampleList}”/>
==========

正しい順序で記述していない場合、画面表示上で選択肢が未選択の状態になります。

Windows Phone 8.1 でメニューを使う

もう Windows 10 Mobile 用アプリ開発を皆が始めているこの時期に今更ですが、
Windows Phone 8.1 用アプリで画面下部のメニューを使う方法です。
Windows Phone 7.8 時代とは方法が変わっています。

==========
<Page.BottomAppBar>
<CommandBar>
<CommandBar.SecondaryCommands>
<AppBarButton Label=”about” Click=”AppBarButton_Click”/>
</CommandBar.SecondaryCommands>
<AppBarButton Icon=”Accept” Label=”appbarbutton”/>
<AppBarButton Icon=”Cancel” Label=”appbarbutton”/>
</CommandBar>
</Page.BottomAppBar>
==========

こうです。

Windows Phone 7.8 のアプリのソースを見てみたら、当時こんなことを書いていたみたいです。
==========
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar Mode=”Minimized”>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text=”about” Click=”ApplicationBarMenuItem_Click_1″/>
</shell:ApplicationBar.MenuItems>
<shell:ApplicationBarIconButton Text=”appbarbutton” Click=”ApplicationBarIconButton_Click_2″ IconUri=”/Assets/AppBar/appbar.accept.rest.png”/>
<shell:ApplicationBarIconButton Text=”appbarbutton” Click=”ApplicationBarIconButton_Click_1″ IconUri=”/Assets/AppBar/appbar.cancel.rest.png”/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
==========

今回 MADOSMA 発売を機にアプリを作ろうとして、過去のプロジェクトをあさってみましたが、驚いたことに Windows Phone 8 世代向けのアプリを一つも作っていない私がいました。

そんな私にアプリを作らせる MADOSMA。最高です。居ないとは思いますがまだ MADOSMA 予約(注文)していない方、今すぐ買いましょう。

AppBarToggleButton のチェック時の色を変更する

AppBarToggleButton はクリックするたびに、On と Off を切り替えられるボタンです。
ちょっとした動作を変更する機能を実装する場合などに便利なコントロールです。
しかし、ちょっとチェック時の色が地味な気がします。

toggle01

なのでもう少し派手な感じに色を変更しましょう。

デザイナで右クリックから [ テンプレートの編集 > コピーして編集 ] を選びます。

toggle02

リソースの名前は適当につけてください。

xaml にリソースの定義が生まれるので、Checked 時の定義を探して OutlineEllipse と BackgroundEllipse の設定を変更します。

toggle03

今回は ComboBoxSelectedBackgroundThemeBrush に変更してみました。

toggle04
こんな感じになります。

ストアアプリでテーマを設定する

ストアアプリでは基本となるテーマ(明(Light)/暗(Dark))を設定できます。
明(Light)では背景が白で文字が黒、暗(Light)では背景が黒で文字が白になります。規定値は暗です。

テーマは、アプリ全体とページ個別で設定できます。
ページ個別の設定では、既定(Default)/明(Light)/暗(Dark)でデフォルトは Default(アプリ全体の設定を引き継ぐ) です。

アプリ全体の設定は App.xaml で、ページ個別の設定は各ページの xaml のプロパティで設定します。

ここで、ページ個別の設定はプロパティ ウィンドウで設定すればすんなり設定できますが、アプリ全体の設定については少し罠があります。
実際にはデフォルトでは Dark テーマが適用されているのにプロパティ ウィンドウ上では Light テーマが選択されています。

プロパティ ウィンドウでは Light が選択されています。しかし、実際の設定としては xaml には記述がなくデフォルトの Dark テーマが適用されます。
Dark テーマでアプリを作りたい場合、特にこの設定を見ることもないでしょう。しかし Light テーマに変更したい場合に、この設定をプロパティ ウィンドウから見ると既に Light テーマが設定されている様に見えます。
ここは冷静に、いったんプロパティで Dark を選択しましょう。するとxaml に設定が生まれます。その後、Light に戻すと Light での設定が xaml に残り Light テーマが有効になります。

AppBar(CommandBar) の作り方

Page.BottomAppBar で設定します。

———-

<Page>
<Page.BottomAppBar>
<CommandBar>
<CommandBar.SecondaryCommands>
<AppBarButton Icon=”Home” Label=”Home” Click=”AppBarButton_Click”/>
<AppBarButton Icon=”World” Label=”World” Click=”AppBarButton_Click”/>
</CommandBar.SecondaryCommands>

<CommandBar.PrimaryCommands>
<AppBarButton Icon=”Add” Label=”Add” Click=”AppBarButton_Click”/>
<AppBarButton Icon=”Delete” Label=”Delete” Click=”AppBarButton_Click”/>
<AppBarSeparator/>
<AppBarButton Icon=”Favorite” Label=”Favorite” Click=”AppBarButton_Click”/>
<AppBarButton Icon=”UnFavorite” Label=”UnFavorite” Click=”AppBarButton_Click”/>
</CommandBar.PrimaryCommands>

</CommandBar>
</Page.BottomAppBar>
</Page>

———-

こんな感じになります。

20141008

Universal App の起動画面の指定

Universal App の起動画面の指定は App.xaml.cs の 111 行目あたりにある。

———-

if (!rootFrame.Navigate(typeof(HubPage), e.Arguments))

———-

です。
Windows と Phone で同じ名前の画面を起動画面とする場合、上記の「 HubPage 」を書き換えれば OK です。
Windows と Phone で違う名前の画面を起動画面とする場合は、

「 #if WINDOWS_PHONE_APP 」や「 #if WINDOWS_APP 」

で切り替えれば良いようです。

20140924