ButtonにFlyoutを表示させるには

ButtonのFlyout Flyoutを追加するにはAttachedFlyoutを使う必要がありました。 しかし、いちいちC#コードから表示させたりするのがめんどうなので ButtonコントロールにはデフォルトでFlyoutプロパティがあります。 ですので、AttachedFlyoutのようにC#コードからFlyoutを呼びださなくても、ButtonにFlyoutを追加するとButtonがクリックされると自動で表示されます。 <Button Content=”ShowFlyout”> <Button.Flyout> <Flyout> <Grid Width=”300″ Height=”100″> <Image Source=”https://pbs.twimg.com/profile_images/423644636754628608/z3o8honJ.jpeg”></Image> <TextBlock Text=”TestFlyout” /> </Grid> </Flyout> </Button.Flyout> </Button>

Flyoutを表示するには

Flyout Windowsストアアプリには、画面上にポップアップのように表示されるFlyoutというものを実装することができます。 Flyoutを実装する Flyoutは様々なコントロールに追加することができます。 その名の通り、コントロールに追加(Attach)することができるのでコントロールの子要素としてAttchedFlyoutを追加し、さらにFlyoutタグをネストすることで実装できます。 <Grid x:Name=”gridRoot” Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> <FlyoutBase.AttachedFlyout> <Flyout> <TextBlock Text=”ほげほげお” FontSize=”36″ /> </Flyout> </FlyoutBase.AttachedFlyout> </Grid> Flyoutを表示するには、FlyoutBaseクラスのShowAttachedFlyoutを呼び出します。 引数内にFlyoutがAttachされたUI要素を入れることでFlyoutを表示することができます。 FlyoutBase.ShowAttachedFlyout(gridRoot); MenuFlyout AttachedFlyout内にMenuFlyoutというタグを書くとメニュー形式のFlyoutを表示することができます。 MenuFlyuoutItemでボタンアイテムを追加できます。(Clickイベントでクリックを取得) MenuFlyoutSeparatorでセパレーターを置くことができます。 <Grid x:Name=”gridRoot” Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}” Loaded=”gridRoot_Loaded”> <FlyoutBase.AttachedFlyout> <MenuFlyout> <MenuFlyoutItem Text=”Menu1″ Click=”MenuFlyoutItem_Click” /> <MenuFlyoutItem Text=”Menu2″ /> <MenuFlyoutSeparator /> <MenuFlyoutItem Text=”Menu2″ /> </MenuFlyout> </FlyoutBase.AttachedFlyout> </Grid>

アプリの証明書を作成するには

.pfxファイル Windowsストアアプリには、新しくプロジェクトを作成すると.pfxファイルという証明書ファイルが自動でプロジェクト内に作成されます。 これがデジタル証明書となり、アプリをパッケージ化する際には必ず必要です。 証明書ファイルを作成する 例えば証明書の有効期限がきれたりとか、.pfxファイルをなくしたりとかした場合、新しく証明書を作る必要があります。 証明書を作るには、 アプリの.appxmanifestファイルを開き、パッケージ化タブを開きます。 その中に証明書の選択というボタンがあるので押します。 証明書の構成コンテキストボックスからテスト証明書の作成を選択します。 証明書の作成ダイアログが出てくるのでパスワードを入力し、OKを押します。 証明書を作成することができました

MVVMとは

MVVM MVVMとは、WPFやSilverlight、Windowsストアアプリなどのプロジェクトで、 プログラムをView-Model-ViewModelの3つに分割するデザインパターンです。 ViewからViewModelにはCommandで命令が実行されます。 ViewModelからViewにはMessengerで命令が実行されます。 ViewとModelとはViewModelを介し、DataBindingで結合されます。 ViewModelはModelのインスタンスを所有します。 このようなデザインパターンでプログラムを設計すると何が良いのかというと、 MVVMの目的としてView(UI)とModel(ロジック)の分離があります。 つまり、「ユーザーインターフェースと計算するプログラムコードを分離する」ということです。 これができると、ユーザーインターフェースが計算するプログラムコードに依存していないのでWPFで作っていたプログラムをWindowsストアアプリにすぐに移植することが可能となります。

マウスホバー時やクリック時のStyleを変更する

Style内のVisualState Buttonコントロールの押された時の色やマウスホバー時の色はどこで定義しているかというと、コントロールのStyle内のVisualStateで定義されています。 なのでコレを編集してやればマウスホバー時やボタンプレス時のStyleを編集することができます。 Style内のVisualStateを編集する まずはStyleを編集するので編集したいボタンを右クリック→テンプレートの編集→コピーして編集を押します。 名前を聞いてくるので適切な名前を設定しましょう。 編集画面に入ったら、状態ウインドウに様々なVisualStateがあることが確認できます。 PointerOverがマウスホバー時のStyleです。 Pressedが押下時のStyleです。 これらを編集することによって、マウスホバー時や、ボタン押し下時のStyleを編集することができます。