Windows10-development-xaml-controls

Windows 10開発-XAMLコントロール

XAMLは、拡張可能なアプリケーションマークアップ言語の略です。 これはユーザーインターフェイスフレームワークであり、WindowsのUI開発をサポートするコントロールの広範なライブラリを提供します。 それらの一部には、Button、Textbox、TextBlockなどの視覚的な表現があります。他のコントロールは、画像などの他のコントロールまたはコンテンツのコンテナとして使用されます すべてのXAMLコントロールは、*“ System.Windows.Controls.Control” *から継承されます。

XAMLエマージングストーリー

XAMLは、Windows Presentation Foundation（WPF）、Silverlight、現在のWindowsアプリなど、多くの重要なMicrosoftプラットフォームで使用されています。 現在、Microsoft Office 2016はUWPアプリのファミリーでもあります。 XAMLはリッチなプラットフォームであり、UWPアプリケーションで使用できる非常に優れた機能とコントロールを提供します。

コントロールの完全な継承階層を以下に示します。

継承階層

レイアウトコントロール

コントロールのレイアウトは、アプリケーションのユーザビリティにとって非常に重要かつ重要です。 アプリケーションでGUI要素のグループを配置するために使用されます。 レイアウトパネルを選択する際に考慮すべき特定の重要な事項があります-

• 子要素の位置。
• 子要素のサイズ。
• 重なり合っている子要素を互いの上に重ねます。

• レイアウトコントロール*のリストは以下のとおりです-

以下に一般的に使用されるレイアウトコントロールを示します。

S.No.	Controls & Description
1	StackPanel StackPanel* は、XAMLのシンプルで便利なレイアウトパネルです。 スタックパネルでは、方向プロパティに基づいて、子要素を水平または垂直に1行に配置できます。
2	WrapPanel WrapPanel* では、子要素は、方向プロパティに基づいて左から右へ、または上から下へ順番に配置されます。 StackPanelとWrapPanelの唯一の違いは、すべての子要素を1行にスタックするのではなく、スペースが残っていない場合、残りの要素を別の行にラップすることです。
3	DockPanel DockPanel* は、子要素を互いに対して水平方向または垂直方向に配置する領域を定義します。 DockPanelを使用すると、Dockプロパティを使用して、子要素を上、下、右、左、および中央に簡単にドッキングできます。 *LastChildFill* プロパティを使用すると、その要素に設定された他のドック値に関係なく、最後の子要素が残りのスペースを埋めます。
4	Canvas Canvas* は、左、右、上、下などの任意の辺に相対的な座標を使用して子要素を明示的に配置できる基本レイアウトパネルです。 通常、Canvasは2Dグラフィック要素（楕円、四角形など）に使用されますが、XAMLアプリケーションで絶対座標を指定するとサイズ変更、ローカライズ、またはスケーリング中に問題が発生するため、UI要素には使用されません。
5	Grid グリッド*は、行と列で構成される柔軟な領域を提供します。 グリッドでは、子要素を表形式で配置できます。 *Grid.Row および Grid.Column プロパティを使用して、特定の行および列に要素を追加できます。
6	SplitView SplitView* は、2つのビューを持つコンテナを表します。メインコンテンツ用の1つのビューと、ナビゲーションコマンドに通常使用される別のビュー。
7	RelativePanel RelativePanel* は、相互または親パネルに対して子オブジェクトを配置および整列できる領域を定義します。
8	ViewBox ViewBox* は、使用可能なスペースを埋めるために1つの子を拡大および拡大できるコンテンツデコレータを定義します。
9	FlipView FlipView* は、一度に1つのアイテムを表示するアイテムのコントロールを表し、アイテムのコレクションを横断するための「フリップ」動作を有効にします。
10	GridView GridView* は、行と列のアイテムのコレクションを表示し、水平にスクロールできるコントロールです。

UIコントロール

以下は、エンドユーザーに表示されるUIコントロールのリストです。

以下に一般的に使用されるUIコントロールを示します。

S.No.	UI Controls & Description
1	Button ユーザー入力に応答するコントロール
2	Calendar ユーザーが視覚的なカレンダー表示を使用して日付を選択できるようにするコントロールを表します。
3	CheckBox ユーザーが選択またはクリアできるコントロール。
4	ComboBox ユーザーが選択できるアイテムのドロップダウンリスト。
5	ContextMenu この要素内からユーザーインターフェイス（UI）を介してコンテキストメニューが要求されるたびに表示されるコンテキストメニュー要素を取得または設定します。
6	DataGrid カスタマイズ可能なグリッドにデータを表示するコントロールを表します。
7	DatePicker ユーザーが日付を選択できるようにするコントロール。
8	Dialogs アプリケーションは、ユーザーが重要な情報を収集または表示するために追加のウィンドウを表示することもあります。
9	Flyout 情報であるか、ユーザーの操作を必要とする軽量UIを表示するコントロールを表します。 ダイアログとは異なり、フライアウトの外側をクリックまたはタップする、デバイスの戻るボタンを押す、または「Esc」キーを押すと、フライアウトを簡単に閉じることができます。
10	Image 画像を表示するコントロール。
11	ListBox ユーザーが選択できるアイテムのインラインリストを表示するコントロール。
12	Menus コマンドおよびイベントハンドラーに関連付けられた要素を階層的に整理できるWindowsメニューコントロールを表します。
13	MenuFlyout コマンドのメニューを表示するフライアウトを表します。
14	PasswordBox パスワードを入力するためのコントロール。
15	Popup アプリケーションウィンドウの境界内で、既存のコンテンツの上にコンテンツを表示します。
16	ProgressBar バーを表示して進行状況を示すコントロール。
17	ProgressRing リングを表示して、不確定な進行状況を示すコントロール。
18	RadioButton ユーザーがオプションのグループから単一のオプションを選択できるようにするコントロール。
19	RichEditBox フォーマットされたテキスト、ハイパーリンク、画像などのコンテンツを含むリッチテキストドキュメントをユーザーが編集できるようにするコントロール。
20	ScrollViewer ユーザーがコンテンツをパンおよびズームできるようにするコンテナーコントロール。
21	SearchBox ユーザーが検索クエリを入力できるようにするコントロール。
22	Slider Thumbコントロールをトラックに沿って移動することにより、ユーザーが値の範囲から選択できるようにするコントロール。
23	TextBlock テキストを表示するコントロール。
24	TimePicker ユーザーが時間値を設定できるコントロール。
25	ToggleButton 2つの状態を切り替えることができるボタン。
26	ToolTip 要素の情報を表示するポップアップウィンドウ。
27	Window 最小化/最大化オプション、タイトルバー、境界線、および閉じるボタンを提供するルートウィンドウ。

以下に示すのは、 SplitView にさまざまなタイプのコントロールを含む例です。 XAMLファイルでは、いくつかのプロパティとイベントを持つさまざまなコントロールが作成されます。

<Page
   x:Class = "UWPControlsDemo.MainPage"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "using:UWPControlsDemo"
   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}">
      <StackPanel Margin = "20">

         <StackPanel Orientation = "Horizontal">

            <ToggleButton x:Name = "HamburgerButton" FontFamily = "Segoe MDL2 Assets"
               Content = "" Checked = "HandleCheck" Unchecked = "HandleUnchecked"
               HorizontalAlignment = "Center"/>

            <AppBarButton Icon = "Like"/>
            <AppBarButton Icon = "Dislike"/>
            <AppBarSeparator/>
            <AppBarButton Icon = "Accept"/>
            <AppBarButton Icon = "Add"/>

         </StackPanel>

         <SplitView x:Name = "splitView" DisplayMode = "Inline"
            OpenPaneLength = "296">

            <SplitView.Pane>
               <StackPanel>
                  <TextBlock Text = "SplitView Pane" FontSize = "36"
                     VerticalAlignment = "Center" HorizontalAlignment = "Center"
                     Margin = "10"/>

                  <Button Content = "Options" Margin = "10">

                     <Button.Flyout>
                        <MenuFlyout>
                           <MenuFlyoutItem Text = "Reset"/>
                           <MenuFlyoutSeparator/>
                           <MenuFlyoutItem Text = "Repeat"/>
                           <MenuFlyoutItem Text = "Shuffle"/>
                        </MenuFlyout>
                     </Button.Flyout>

                  </Button>

               </StackPanel>
            </SplitView.Pane>

            <StackPanel>

               <TextBlock Text = "SplitView Content" FontSize = "36"
                  VerticalAlignment = "Center" HorizontalAlignment = "Center"
                  Margin = "10"/>

               <Border BorderThickness = "3" BorderBrush = "Red" Margin = "5">
                  <StackPanel Orientation = "Horizontal">
                     <TextBlock Text = "Hyperlink example" Margin = "5"/>
                     <HyperlinkButton Content = "www.microsoft.com"
                        NavigateUri = "http://www.microsoft.com"/>
                  </StackPanel>
               </Border>

               <RelativePanel BorderBrush = "Red" BorderThickness = "2"
                  CornerRadius = "10" Padding = "12" Margin = "5">

                  <TextBlock x:Name = "txt" Text = "Relative Panel example"
                     RelativePanel.AlignLeftWithPanel = "True"
                     Margin = "5,0,0,0"/>

                  <TextBox x:Name = "textBox1" RelativePanel.RightOf = "btn"
                     Margin = "5,0,0,0"/>

                  <Button x:Name = "btn" Content = "Name"
                     RelativePanel.RightOf = "txt" Margin = "5,0,0,0"/>

               </RelativePanel>

               <FlipView Height = "400" Margin = "10" Width = "400">
                  <Image Source = "Images/DSC_0104.JPG"/>
                  <Image Source = "Images/DSC_0080.JPG"/>
                  <Image Source = "Images/DSC_0076.JPG"/>
                  <Image Source = "Images/thGTF7BWGW.jpg"/>
               </FlipView>

            </StackPanel>

         </SplitView>

      </StackPanel>

   </Grid>

</Page>

Copy

以下に、C＃での*イベント*実装を示します。

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

//The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace UWPControlsDemo {

  ///<summary>
     ///An empty page that can be used on its own or navigated to within a Frame.
  ///</summary>

   public sealed partial class MainPage : Page {

      public MainPage() {
         this.InitializeComponent();
      }

      private void HandleCheck(object sender, RoutedEventArgs e) {
         splitView.IsPaneOpen = true;
      }

      private void HandleUnchecked(object sender, RoutedEventArgs e) {
         splitView.IsPaneOpen = false;
      }

   }

}

Copy

上記のコードをコンパイルして実行すると、次のウィンドウが表示されます-

コンテンツの分割

左上のハンバーガーボタンをクリックすると、 SplitView ペインが開閉します。

スプリットビュー

*SplitView* ペインで、 *Flyout* 、 *MenuFlyout* および *FlipView* コントロールを確認できます。

Copy

*SplitView* コンテンツでは、ハイパーリンク、相対パネル、ViewBox、その他のボタンおよびテキストボックスコントロールを確認できます。

Copy