uwp Samouczek
Rozpoczęcie pracy z uwp

Uwagi

Instalacja lub konfiguracja

Szczegółowe instrukcje dotyczące konfiguracji lub instalacji UWP.

Wymagania

1. Windows 10
2. Visual Studio 2015

Kroki

• Pobierz i zainstaluj niestandardowo Visual Studio 2015, jednocześnie upewniając się, że wybrane są Universal Windows App Development Tools wraz z jego opcjami podrzędnymi: -
  a) Narzędzia i zestaw Windows SDK
  b) Emulator dla Windows Phone

• Pamiętaj, aby włączyć tryb programisty przy programowaniu i wdrażaniu urządzenia.

• Wybierz szablon w oparciu o język, którego chcesz użyć:
  C # , Visual Basic , C ++ lub JavaScript .

• Następnie utwórz pustą aplikację (Universal Windows).

• Wybierz docelową i minimalną wersję systemu Windows 10 odpowiednią dla Twojej aplikacji.

  Kliknij tutaj, jeśli nie masz pewności, które wersje wybrać, lub po prostu pozostaw opcje na wartości domyślnej i kliknij „OK”, aby rozpocząć!

Migawki

Installation    

Creating a new project

Selecting Target and minimum version for your Application

Tworzenie pierwszej aplikacji UWP

Ten przykład pokazuje, jak opracować prostą aplikację UWP.

Podczas tworzenia projektu „Pusta aplikacja (uniwersalny system Windows)” istnieje wiele niezbędnych plików, które są tworzone w twoim rozwiązaniu.

Wszystkie pliki w projekcie można zobaczyć w Eksploratorze rozwiązań .

Niektóre z kluczowych plików w twoim projekcie to:

• App.xaml i App.xaml.cs - App.xaml służy do deklarowania zasobów dostępnych w aplikacji, a App.xaml.cs jest dla niego kodem zaplecza. App.xaml.cs jest domyślnym punktem wejścia aplikacji
• MainPage.xaml - jest to domyślna strona początkowa interfejsu użytkownika dla aplikacji (można również zmienić stronę początkową aplikacji w App.xaml.cs)
• Package.appxmanifest - ten plik zawiera ważne informacje o aplikacji, takie jak nazwa wyświetlana, punkt wejścia, zasoby wizualne, lista możliwości, informacje na temat pakowania itp.

Pierwsze kroki

• Dodanie przycisku do swojej strony

  Aby dodać dowolny element interfejsu użytkownika lub narzędzie do swojej strony, po prostu przeciągnij i upuść element z okna przybornika po lewej stronie. Wyszukaj narzędzie „Przycisk” w przyborniku i upuść je na stronie aplikacji.

• Dostosowywanie interfejsu użytkownika

  Wszystkie właściwości dla konkretnego narzędzia są pokazane w oknie właściwości po prawej stronie u dołu.

  Tutaj zmienimy tekst w przycisku na „Mów!”. Aby to zrobić, najpierw dotknij przycisku, aby go wybrać, a następnie przewiń okno właściwości, aby znaleźć Treść i zmienić tekst na żądany ciąg („Mów!”).

  Zmienimy również kolor tła strony. Każda strona ma element nadrzędny (zwykle siatkę), który zawiera wszystkie pozostałe elementy. W ten sposób zmienimy kolor siatki nadrzędnej. Aby to zrobić, dotknij siatki i zmień Pędzel> Tło z okna właściwości na żądany kolor.

Interfejs użytkownika będzie wyglądał mniej więcej tak, jak go dostosujesz.

• Kod za

  Teraz zróbmy coś po kliknięciu naszego przycisku!

  Kliknięcie przycisku wywołuje zdarzenie i musimy obsłużyć to zdarzenie, aby zrobić coś użytecznego po kliknięciu przycisku.

  Dodawanie modułu obsługi zdarzeń

  Aby dodać moduł obsługi zdarzenia kliknięcia do przycisku, wybierz przycisk, przejdź do okna właściwości i wybierz ikonę błyskawicy . To okno składa się ze wszystkich zdarzeń dostępnych dla wybranego przez nas elementu (w naszym przypadku przycisk). Następnie kliknij dwukrotnie pole tekstowe obok zdarzenia „Kliknij” , aby automatycznie wygenerować moduł obsługi dla zdarzenia kliknięcia przycisku.

Następnie zostaniesz przekierowany na stronę ac # (MainPage.xaml.cs). Dodaj następujący kod do metody obsługi zdarzeń:

 MediaElement mediaElement = new MediaElement();
        var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
        Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
        mediaElement.SetSource(stream, stream.ContentType);
        mediaElement.Play();

Następnie dodaj słowo kluczowe async do modułu obsługi zdarzeń.

Po dodaniu powyższego kodu klasa powinna wyglądać mniej więcej tak:

public sealed partial class MainPage : Page
{
    string speakIt = "Hello, World!";
    public MainPage()
    {
        this.InitializeComponent();
    }

    private async void button_Click(object sender, RoutedEventArgs e)
    {
        MediaElement mediaElement = new MediaElement();
        var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
        Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync(speakIt);
        mediaElement.SetSource(stream, stream.ContentType);
        mediaElement.Play();

    }
}

• Uruchom aplikację!

  Twoja aplikacja jest gotowa do uruchomienia. Możesz uruchomić aplikację, naciskając klawisz F5 lub Wybierz urządzenie, na którym chcesz wdrożyć i debugować aplikację, a następnie kliknij przycisk Start.

Po skompilowaniu aplikacja zostanie wdrożona na urządzeniu. W zależności od rozdzielczości urządzenia i rozmiaru ekranu aplikacja automatycznie skonfiguruje swój układ. (Możesz zmienić rozmiar okna, aby zobaczyć, jak działa bezproblemowo)

• Idąc dalej

  Po złożeniu pierwszej aplikacji przejdźmy o krok dalej!

  Dodaj pole tekstowe do swojej strony, a po kliknięciu przycisku aplikacja wypowiada się, co jest napisane w polu tekstowym.

  Zacznij od przeciągnięcia i upuszczenia kontrolki TextBox z Przybornika do swojego układu. Następnie nadaj nazwę swojemu TextBoxowi z menu właściwości. (dlaczego musimy podać nazwę? abyśmy mogli łatwo użyć tej kontroli)

  Visual Studio domyślnie nadaje twojej kontrolce nazwę, ale dobrym zwyczajem jest nazywanie kontrolek zgodnie z tym, co robią lub czymś istotnym.

  Nadaję nazwę mojemu polu tekstowemu - „ speakText ”.

    private async void button_Click(object sender, RoutedEventArgs e)
    {
        //checking if the text provided in the textbox is null or whitespace
        if (!string.IsNullOrWhiteSpace(speakText.Text))
            speakIt = speakText.Text;
        else
            speakIt = "Please enter a valid string!";

        MediaElement mediaElement = new MediaElement();
        var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
        Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync(speakIt);
        mediaElement.SetSource(stream, stream.ContentType);
        mediaElement.Play();

    }

Teraz wdróż swój kod !!

Twoja aplikacja jest teraz w stanie wypowiedzieć dowolny prawidłowy ciąg znaków, który jej podasz !!

Gratulacje! Udało ci się zbudować własną aplikację UWP !!