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.