Programowanie w systemie Windows 10 - kontrolki XAML
XAML oznacza rozszerzalny język znaczników aplikacji. Jest to struktura interfejsu użytkownika i oferuje obszerną bibliotekę elementów sterujących, które obsługują tworzenie interfejsu użytkownika dla systemu Windows. Niektóre z nich mają reprezentację wizualną, taką jak przycisk, pole tekstowe i blok tekstowy itp.; podczas gdy inne kontrolki są używane jako kontenery dla innych kontrolek lub zawartości, takich jak obrazy itp. Wszystkie kontrolki XAML są dziedziczone z“System.Windows.Controls.Control”.
Powstająca historia XAML
XAML jest używany na wielu ważnych platformach firmy Microsoft, takich jak Windows Presentation Foundation (WPF), Silverlight, a teraz w aplikacjach systemu Windows. Teraz Microsoft Office 2016 to także rodzina aplikacji UWP. XAML to bogata platforma, która zapewnia bardzo fajne funkcje i kontrolki, których można używać w aplikacjach UWP.
Pełną hierarchię dziedziczenia formantów przedstawiono poniżej.
Układ sterowania
Układ elementów sterujących jest bardzo ważny i krytyczny dla użyteczności aplikacji. Służy do uporządkowania grupy elementów GUI w Twojej aplikacji. Podczas wybierania paneli układu należy wziąć pod uwagę kilka ważnych kwestii -
- Pozycje elementów potomnych.
- Rozmiary elementów podrzędnych.
- Nakładanie nakładających się na siebie elementów potomnych.
Lista Layout Controls podano poniżej -
| S.No. | Sterowanie i opis |
|---|---|
| 1 | StackPanel StackPanelto prosty i przydatny panel układu w języku XAML. W panelu stosu elementy potomne mogą być ułożone w jednej linii poziomo lub pionowo w zależności od właściwości orientacji. |
| 2 | WrapPanel W WrapPanel, elementy podrzędne są umieszczane w kolejności od lewej do prawej lub od góry do dołu w oparciu o właściwość orientacji. Jedyną różnicą między StackPanel i WrapPanel jest to, że nie umieszcza wszystkich elementów podrzędnych w jednym wierszu, ale zawija pozostałe elementy do innego wiersza, jeśli nie ma już miejsca. |
| 3 | DockPanel DockPaneldefiniuje obszar do rozmieszczenia elementów podrzędnych względem siebie, w poziomie lub w pionie. Dzięki DockPanel możesz łatwo zadokować elementy podrzędne na górze, na dole, w prawo, w lewo i na środku za pomocą właściwości Dock. Z LastChildFill ostatni element podrzędny wypełnia pozostałą przestrzeń niezależnie od innych wartości dokowania ustawionych dla tego elementu. |
| 4 | Canvas Canvasjest podstawowym panelem układu, w którym elementy podrzędne mogą być wyraźnie pozycjonowane za pomocą współrzędnych odnoszących się do dowolnej strony, na przykład lewej, prawej, góry i dołu. Zwykle Canvas jest używany do elementów graficznych 2D (takich jak Elipsa, Prostokąt itp.), Ale nie do elementów interfejsu użytkownika, ponieważ określanie współrzędnych bezwzględnych powoduje problemy podczas zmiany rozmiaru, lokalizacji lub skalowania w aplikacji XAML. |
| 5 | Grid Gridzapewnia elastyczny obszar, który składa się z wierszy i kolumn. W Grid elementy podrzędne można układać w formie tabelarycznej. Elementy można dodawać do dowolnego wiersza i kolumny za pomocąGrid.Row i Grid.Column nieruchomości. |
| 6 | SplitView SplitViewreprezentuje pojemnik z dwoma widokami; jeden widok głównej zawartości i inny widok, który jest zwykle używany dla poleceń nawigacji. |
| 7 | RelativePanel RelativePanel definiuje obszar, w którym można umieszczać i wyrównywać obiekty podrzędne względem siebie lub panelu nadrzędnego. |
| 8 | ViewBox ViewBox definiuje dekorator treści, który może rozciągać i skalować pojedyncze dziecko, aby wypełnić dostępne miejsce. |
| 9 | FlipView FlipView reprezentuje kontrolkę elementu, która wyświetla jeden element na raz i włącza zachowanie „odwracania” podczas przechodzenia przez jego kolekcję elementów. |
| 10 | GridView GridView to kontrolka prezentująca zbiór elementów w wierszach i kolumnach, którą można przewijać w poziomie. |
Sterowanie interfejsem użytkownika
Oto lista kontrolek interfejsu użytkownika, które są widoczne dla użytkowników końcowych.
| S.No. | Sterowanie i opis interfejsu użytkownika |
|---|---|
| 1 | Button Kontrolka, która reaguje na dane wejściowe użytkownika |
| 2 | Calendar Reprezentuje kontrolkę, która umożliwia użytkownikowi wybranie daty przy użyciu wyświetlania kalendarza wizualnego. |
| 3 | CheckBox Kontrolka, którą użytkownik może wybrać lub wyczyścić. |
| 4 | ComboBox Rozwijana lista elementów, z których użytkownik może wybierać. |
| 5 | ContextMenu Pobiera lub ustawia element menu kontekstowego, który powinien pojawić się za każdym razem, gdy menu kontekstowe jest żądane za pośrednictwem interfejsu użytkownika (UI) z poziomu tego elementu. |
| 6 | DataGrid Reprezentuje kontrolkę wyświetlającą dane w dostosowywalnej siatce. |
| 7 | DatePicker Kontrolka, która pozwala użytkownikowi wybrać datę. |
| 8 | Dialogs Aplikacja może również wyświetlać dodatkowe okna, aby użytkownik mógł zebrać lub wyświetlić ważne informacje. |
| 9 | Flyout Reprezentuje formant, który wyświetla lekki interfejs użytkownika, który jest informacją lub wymaga interakcji użytkownika. W przeciwieństwie do okna dialogowego, menu rozwijane można lekko odrzucić, klikając lub stukając poza nim, naciskając przycisk Wstecz na urządzeniu lub naciskając klawisz „Esc”. |
| 10 | Image Kontrolka przedstawiająca obraz. |
| 11 | ListBox Kontrolka przedstawiająca wbudowaną listę elementów, z których użytkownik może wybierać. |
| 12 | Menus Reprezentuje kontrolkę menu systemu Windows, która umożliwia hierarchiczne organizowanie elementów skojarzonych z poleceniami i programami obsługi zdarzeń. |
| 13 | MenuFlyout Reprezentuje menu wysuwane, które wyświetla menu poleceń. |
| 14 | PasswordBox Formant do wprowadzania haseł. |
| 15 | Popup Wyświetla zawartość nad istniejącą zawartością, w granicach okna aplikacji. |
| 16 | ProgressBar Kontrolka, która wskazuje postęp, wyświetlając pasek. |
| 17 | ProgressRing Kontrolka, która wskazuje nieokreślony postęp, wyświetlając pierścień. |
| 18 | RadioButton Kontrolka, która umożliwia użytkownikowi wybranie pojedynczej opcji z grupy opcji. |
| 19 | RichEditBox Kontrolka, która umożliwia użytkownikowi edytowanie dokumentów z tekstem sformatowanym z zawartością, taką jak sformatowany tekst, hiperłącza i obrazy. |
| 20 | ScrollViewer Kontrolka kontenera, która umożliwia użytkownikowi przesuwanie i powiększanie zawartości. |
| 21 | SearchBox Kontrolka, która umożliwia użytkownikowi wprowadzanie zapytań wyszukiwania. |
| 22 | Slider Kontrolka, która pozwala użytkownikowi wybierać z zakresu wartości, przesuwając kontrolkę Thumb wzdłuż ścieżki. |
| 23 | TextBlock Kontrolka wyświetlająca tekst. |
| 24 | TimePicker Kontrolka, która umożliwia użytkownikowi ustawienie wartości czasu. |
| 25 | ToggleButton Przycisk, który można przełączać między 2 stanami. |
| 26 | ToolTip Wyskakujące okienko, które wyświetla informacje o elemencie. |
| 27 | Window Okno główne, które zapewnia opcję minimalizacji / maksymalizacji, pasek tytułu, ramkę i przycisk zamykania. |
Poniżej przedstawiono przykład, który zawiera różne typy kontrolek w SplitView. W pliku XAML są tworzone różne kontrolki z niektórymi właściwościami i zdarzeniami.
<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>Podano poniżej Events implementacja w 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;
}
}
}Kiedy powyższy kod zostanie skompilowany i wykonany, zobaczysz następujące okno -
Po kliknięciu przycisku hamburgera w lewym górnym rogu otworzy się / zamknie plik SplitView szkło.
w SplitView Okienko, możesz zobaczyć plik Flyout, MenuFlyout i FlipView sterownica.
w SplitView Zawartość, możesz zobaczyć hiperłącze, panel względny, ViewBox i inne przyciski i kontrolki pola tekstowego.