アプリバーとフライアウト (4/5)
作成:2014-02-22 11:09
更新:2014-02-22 11:09
更新:2014-02-22 11:09
■一般的なGUIを使ったフライアウトの利用
では、メニュー以外の一般的なGUI用のコントロールを使って作成した表示をフライアウトで呼び出したい場合はどうすればいいのでしょうか。
これには、<Flyout>というタグを使います。使い方はメニューの場合と同じで、<AppBarButton>タグの中に<AppBarButton.Flyout>タグを用意し、その中に記述をします。整理するとこんな感じです。
問題は、<Flyout>タグの中にどうやって表示したいGUIを作るか、ですね。やはり、まずレイアウトコントロールを用意し、その中にUIとなるものを配置してくことになるでしょう。先に登場した<Grid>や<StackPanel>をベースに部品を配置していくのが基本になるでしょう。
では、簡単な実装例を下にあげておきましょう。先ほどのサンプルに更に追記をしたものです。アプリバーの「Button2」のアイコンをクリックすると、「OK」「Cancel」という２つのボタンをもったダイアログのようなフライアウトが表示されます。
ここでは、<StackPanel>をベースに、<TextBlock>と<Button>を組み合わせてフライアウトの表示を作成しています。実際にフライアウトを呼び出して表示を確かめてみましょう。
これには、<Flyout>というタグを使います。使い方はメニューの場合と同じで、<AppBarButton>タグの中に<AppBarButton.Flyout>タグを用意し、その中に記述をします。整理するとこんな感じです。
<AppBarButton.Flyout>
<Flyout>
……表示する内容を記述……
</Flyout>
</AppBarButton.Flyout>
問題は、<Flyout>タグの中にどうやって表示したいGUIを作るか、ですね。やはり、まずレイアウトコントロールを用意し、その中にUIとなるものを配置してくことになるでしょう。先に登場した<Grid>や<StackPanel>をベースに部品を配置していくのが基本になるでしょう。
では、簡単な実装例を下にあげておきましょう。先ほどのサンプルに更に追記をしたものです。アプリバーの「Button2」のアイコンをクリックすると、「OK」「Cancel」という２つのボタンをもったダイアログのようなフライアウトが表示されます。
ここでは、<StackPanel>をベースに、<TextBlock>と<Button>を組み合わせてフライアウトの表示を作成しています。実際にフライアウトを呼び出して表示を確かめてみましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="textblock1" HorizontalAlignment="Left" Margin="113,78,0,0"
TextWrapping="Wrap" Text="Win 8 App" VerticalAlignment="Top"
Height="67" Width="1052" FontSize="48"/>
<AppBar Background="#33ff00ff" x:Name="appbar1">
<Grid>
<StackPanel Orientation="Horizontal">
<AppBarButton Label="Button1" x:Name="appbutton1">
<AppBarButton.Icon>
<SymbolIcon Symbol="Home" />
</AppBarButton.Icon>
<AppBarButton.Flyout>
<MenuFlyout>
<MenuFlyoutItem Text="menu 1" Click="Menu1_Click" />
<ToggleMenuFlyoutItem Text="menu 2" Click="Menu2_Click" />
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>
<AppBarButton Label="Button2" x:Name="appbutton2">
<AppBarButton.Icon>
<SymbolIcon Symbol="Help" />
</AppBarButton.Icon>
<AppBarButton.Flyout>
<Flyout x:Name="sampleFlyout">
<StackPanel Orientation="Vertical">
<TextBlock Text="Flyout" FontSize="24" HorizontalAlignment="left" />
<TextBlock Text="this is Flyout sample." FontSize="18"
HorizontalAlignment="left" />
<StackPanel Orientation="Horizontal">
<Button Content="OK" Width="200" Click="Button1_Click"/>
<Button Content="CANCEL" Width="200" Click="Button2_Click"/>
</StackPanel>
</StackPanel>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>
</StackPanel>
</Grid>
</AppBar>
</Grid>
</Page>
※関連コンテンツ