エクスポート (0) 印刷
すべて展開
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

クイックスタート: XAML での Windows Phone 8 のユーザー インターフェイスの作成

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

Extensible Application Markup Language (XAML) は、 Windows Phone ユーザー インターフェイスを定義するために使用します。XAML は、コントロール、図形、テキストなどのアプリの UI、および他の Windows Phone 画面コンテンツを作成するために使用できる宣言型言語です。XAML は、HTML で使用されるものと似た要素と属性で構成されます。ただし、XAML は XML ベースであるため、整形式を含む XML の規則に従う必要があります。開発者の方は Visual Studio や Blend for Visual Studio などのツールを使用して UI を作成するだけなのに、どうして XAML を考慮しなければならないのかと思うかもしれません。マークアップを生成するツールはありますが、XAML の意味を理解して修正できるようになると便利です。また、細かく制御したり、何が起きるか少々知りたいときは、手動で UI をコーディングする方が簡単な場合があります。

このトピックは、次のセクションで構成されています。

ボタンを作成する単純な XAML の例を次に示します。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <Button Height="72" Width="160" Content="Click Me" />
</Grid>

アプリを実行すると、アプリは次のような外観になります。

Windows Phone emulater image with button control

Button コントロールは、<Button> 要素によって指定されます。Width および Height 属性はボタンのサイズを指定します。<Grid>は新しい Windows Phone アプリを Visual Studio で作成するときに生成され、オブジェクトを配置するために使用されます。画面レイアウトの詳細については、「Windows Phone 8 のレイアウト」を参照してください。

Visual Studio を使用して XAML を生成することができます。たとえば、[ツールボックス] からデザイン サーフェイスへボタンをドラッグします。Visual Studio で生成する可能性がある XAML を次に示します(XAML の外観はそれぞれ異なります)。

<Grid x:Name="ContentGrid" Grid.Row="1">
   <Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="152,273,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
</Grid>

Visual Studio は、ボタンを配置するために HorizontalAlignmentMargin などのいくつかの属性を追加します。ニーズによっては、このような属性は不要である場合もあります。もちろん、Visual Studio UI を使用してこれらの属性を変更することはできますが、場合によっては、XAML を直接編集する方がよいこともあります。

XAML などの宣言型言語を使用する利点の 1 つは、アプリの UI を構成するマークアップと、アプリの動作を定義するコードとを明確に分離できるということです。たとえば、チームのデザイナーが UI エクスペリエンスをデザインし、その後で XAML を開発者に渡してプロシージャー コードを追加することができます。よくあるように 1 人でデザイナーと開発者を兼ねている場合、UI を XAML ファイル (.xaml) 内に保持し、プロシージャー コードを分離コード ファイル (.cs および .vb) に保持することができます。

<Button />などの XAML 要素は、プロシージャー コードでのオブジェクトのインスタンス化と同じです。たとえば、次の XAML について考えます。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <Button Height="72" Width="160" Content="Click Me" />
</Grid>


この XAML を C# または Visual Basic で記述した場合の例を次に示します。

// Initialize the button
Button myButton = new Button();
// Set its properties
myButton.Width = 160;
myButton.Height = 72;
myButton.Content = "Click Me";
// Attach it to the visual tree, specifically as a child of
// the Grid object (named 'ContentPanel'). In other words, position
// the button in the UI.
ContentPanel.Children.Add(myButton);

UI の場合、XAML はプロシージャ コードより可読性に優れ、簡潔に記述できるという利点があります。ただし、プロシージャー コードを使用して UI を動的に作成しなければならない場合もあります。

XAML でプロパティの値を指定する 2 つの方法を次に示します。

  • 属性要素構文

  • プロパティ要素の構文

属性要素構文は、上の例で見たように属性="値" という構文であり、これは HTML でよく目にするかもしれません。次の例では、赤い四角形が作成されます。Fill は、事前に定義された色の名前に設定される属性です。

<Rectangle Fill="Red" />

または、プロパティ要素構文を使用して色の値を指定することができます。

<Rectangle>
   <Rectangle.Fill>
      <SolidColorBrush Color="Red" />
   </Rectangle.Fill>
</Rectangle>

この場合、Red という文字列だけを使用するのではなく、Fill プロパティに必要な型である SolidColorBrush オブジェクトを明示的に指定します。この例から、プロパティ要素構文は、同じ処理を冗長に行うだけの方法に思われるかもしれません。しかし、単純な属性文字列を使用してすべてのプロパティの値を指定できるわけではありません。たとえば、プロパティの値として使用されるオブジェクトの複数のプロパティを指定する必要があるときなどに、プロパティ要素構文の使用が必要になる場合があります。次の例は、Rectangle を作成しますが、単純な赤の塗りつぶしの代わりにグラデーションを使用します。

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="200">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
         <GradientStop Color="Yellow" Offset="0.0" />
         <GradientStop Color="Red" Offset="0.25" />
         <GradientStop Color="Blue" Offset="0.75" />
         <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>

アプリを実行すると、アプリは次のような外観になります。

Gradient filled rectangle control

例を見るとわかるように、Fill プロパティは複雑なオブジェクト (LinearGradientBrush) を使用してグラデーションを作成します。このような場合、属性に割り当てられる文字列として単純に値を指定するのではなく、プロパティ要素構文を使用する必要があります。

XAML には、他の要素 (ノード) を下に置くことができる (子にすることができる) <Button /><Grid> などの要素があります。この親/子関係は、画面上でのオブジェクトなどの配置方法や、ユーザーが開始したイベントへのそれらの応答の仕方などを指定します。例を次に示します。

アプリを実行すると、アプリは次のような外観になります。

Stack panel control showing element placement
<Grid x:Name="ContentPanel" Background="Red" Grid.Row="1" Margin="12,0,12,0">
   <StackPanel Margin="20" Background="Blue" >
      <TextBlock Name="firstTextBlock" FontSize="30">First TextBlock</TextBlock>
      <TextBlock Name="secondTextBlock" FontSize="30">Second TextBlock</TextBlock>
      <TextBlock Name="thirdTextBlock" FontSize="30">Third TextBlock</TextBlock>
   </StackPanel>
</Grid>

青の StackPanel が赤の Grid に含まれています。TextBlock 要素は StackPanel 内に含まれています (TextBlock 要素は StackPanel の子です)。さらに、TextBlock 要素は、XAML で宣言された順序で積み重ねられます。

次のツリー ダイアグラムは、要素間の関係を示しています。

Tree diagram depicting relationships among UI elem

ビジュアル ツリーは、コンテンツの表示方法を決定することに加えて、イベントの処理方法にも影響することがあります。多くの一般的なイベント (ルーティング イベントと呼ばれます) は、"バブル" イベントでありツリーを上方向に移動します。たとえば、マウスの左ボタンがクリックされたとき (MouseLeftButtonDown イベント) に処理を行う StackPanel にイベント ハンドラーを結び付けることができます。次の XAML は、commonMouseHandler という名前の MouseLeftButtonDown イベント ハンドラーを StackPanel に追加する方法を示しています。

<Grid Background="Red" x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <StackPanel Margin="20" Background="Blue" MouseLeftButtonDown="commonMouseHandler">
      <TextBlock Name="firstTextBlock" FontSize="30" >First TextBlock</TextBlock>
      <TextBlock Name="secondTextBlock" FontSize="30" >Second TextBlock</TextBlock>
      <TextBlock Name="thirdTextBlock" FontSize="30" >Third TextBlock</TextBlock>
   </StackPanel>
</Grid>

イベントを処理するプロシージャー コードを次に示します。

private void commonMouseHandler(object sender, RoutedEventArgs e){
   FrameworkElement feSource = e.OriginalSource as FrameworkElement;
   switch (feSource.Name)
   {        
      case "firstTextBlock":
         firstTextBlock.Text = firstTextBlock.Text + " Click!";
         break;
      case "secondTextBlock":
         secondTextBlock.Text = secondTextBlock.Text + " Click!";
         break;
      case "thirdTextBlock":
         thirdTextBlock.Text = thirdTextBlock.Text + " Click!";
         break;  
   }
}

次の図は、イベントがツリーを上に移動するしくみを示しています。

Tree diagram depicting event hierarchy

たとえば、ユーザーが TextBlockをクリックするとします。

  1. MouseLeftButtonDown イベントは、親である StackPanel まで通知されます。

  2. 次に、MouseLeftButtonDown イベントが、ツリーを上に移動し、Grid に伝達されます。

イベントは、ツリーを上に移動し続けるので、Grid 要素でも同様に MouseLeftButtonDownイベントを "リッスン" することができます。

XAML を使用して静的 UI の表示以外の処理を実行できます。アニメーションや埋め込みビデオを作成し、マークアップを使用してデータにバインドすることができます。XAML を使用して作成した単純なアニメーションの例を次に示します。

<StackPanel Background="#FDF5E6">
   <StackPanel.Resources>
      <Storyboard x:Name="myStoryboard">
         <DoubleAnimationUsingKeyFrames
         Storyboard.TargetName="myRectangle"
         Storyboard.TargetProperty="Height">
         <!-- This key frame resets the animation to its starting
               value (30) at the beginning of the animation. -->
         <LinearDoubleKeyFrame Value="30" KeyTime="0:0:0" />
         <!-- Spline animations are used to create acceleration. This
               SplineDoubleKeyFrame creates an animation that starts out slow
               and then speeds up. The rectangle "falls". -->
         <SplineDoubleKeyFrame KeySpline="0,0 1,0" Value="300" KeyTime="0:0:0.8" />
         <!-- This spline animation creates the "bounce" at the end where
               the rectangle shortens its length quickly at first and then
               slows down and stops. -->
         <SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="250"
            KeyTime="0:0:1.5" />
         </DoubleAnimationUsingKeyFrames>
      </Storyboard>
   </StackPanel.Resources>
   <Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" Fill="Blue" 
      Width="200" Height="30" />
</StackPanel>
// When the user clicks the rectangle, the animation begins.
private void Mouse_Clicked(object sender, MouseEventArgs e){
   myStoryboard.Begin();
}

これは、XAML を使用して、レイアウトまたは他の静的な UI ではなく、コンテンツの動作を指定する例です。Storyboard 要素は、アニメーション化するオブジェクトなど、アニメーションのいくつかの一般的なプロパティを定義します。LinearDoubleKeyFrame などの Storyboard の子要素は、アニメーションの実行方法を指定します。

表示:
© 2014 Microsoft