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
|
| 2 |
WrapPanel
|
| 3 |
DockPanel
|
| 4 |
Canvas
|
| 5 |
Grid グリッド*は、行と列で構成される柔軟な領域を提供します。 グリッドでは、子要素を表形式で配置できます。 *Grid.Row および Grid.Column プロパティを使用して、特定の行および列に要素を追加できます。 |
| 6 |
SplitView
|
| 7 |
RelativePanel
|
| 8 |
ViewBox
|
| 9 |
FlipView
|
| 10 |
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>以下に、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;
}
}
}上記のコードをコンパイルして実行すると、次のウィンドウが表示されます-
左上のハンバーガーボタンをクリックすると、 SplitView ペインが開閉します。
*SplitView* ペインで、 *Flyout* 、 *MenuFlyout* および *FlipView* コントロールを確認できます。*SplitView* コンテンツでは、ハイパーリンク、相対パネル、ViewBox、その他のボタンおよびテキストボックスコントロールを確認できます。
