Wskazówki: Tworzenie prostej aplikacji z użyciem Visual C# lub Visual Basic

Wykonując polecenia tego instruktażu, zapoznasz się z wieloma narzędziami, oknami dialogowymi i projektantami używanymi podczas tworzenia aplikacji za pomocą programu Visual Studio.W trakcie poszerzania wiedzy o pracy w zintegrowanym środowisku programistycznym (IDE), stworzysz prostą aplikację w stylu „Hello, World” (Witaj, świecie), zaprojektujesz interfejs użytkownika, dodasz kod i zdebugujesz błędy.

Ten temat zawiera następujące sekcje:

Konfigurowanie IDE

Tworzenie prostej aplikacji

Debugowanie i testowanie aplikacji

[!UWAGA]

Ten instruktaż jest oparty na programie Visual Studio Professional. Oferuje on szablon aplikacji WPF, na którym będziesz tworzył projekt z tego instruktażu.Wersja Visual Studio Express for Windows Desktop również oferuje ten szablon, ale wersje Visual Studio Express for Windows i Visual Studio Express for Web go nie mają.Wstępne informacje na temat używania programu Visual Studio Express for Windows, zobacz Centrum deweloperów aplikacji ze Sklepu Windows.Wstępne informacje na temat używania programu Visual Studio Express for Web, zobacz Rozpocznij pracę z programem ASP.NET.Ponadto, wersja programu Visual Studio i ustawienia, których używasz, określają nazwy i lokalizacje niektórych elementów interfejsu użytkownika.Zobacz Dostosowywanie ustawień środowiska deweloperskiego w Visual Studio.

Konfigurowanie IDE

Po uruchomieniu programu Visual Studio po raz pierwszy, Visual Studio wyświetli monit o Zaloguj się przy użyciu programu Microsoft usługi konta (MSA), Zaloguj się do programu Visual Studio.Nie trzeba się zalogować, może to zrobić później.

Na Twój wydania programu Visual Studio następnie należy wybrać połączenia ustawienia, które dotyczą zestawu wstępnie zdefiniowanych dostosowań IDE.Każda kombinacja ustawień została zaprojektowana w celu ułatwienia tworzenia aplikacji.

Ten przewodnik założenie zastosowane ogólnych ustawień projektowych, co ma zastosowanie najmniejszą dostosowywania IDE.Jeśli zdecydujesz się już C# lub Visual Basic (zarówno powinno się), nie trzeba zmienić ustawienia.Jeśli chcesz zmienić ustawienia, można użyć Kreatora importu i eksportu ustawienia.Zobacz Dostosowywanie ustawień środowiska deweloperskiego w Visual Studio.

Po otwarciu programu Visual Studio widzisz okna narzędzi, menu i paski narzędzi oraz przestrzeń głównego okna.Okna narzędzi są zadokowane po lewej i prawej stronie okna aplikacji, zaś Szybkie uruchamianie, pasek menu i standardowy pasek narzędzi znajdują się u góry.Na środku okna aplikacji znajduje się Strona początkowa.Podczas ładowania rozwiązania lub projektu, redaktorzy i projektanci są widoczne w obszarze gdzie strona początkowa jest.Podczas opracowywania aplikacji spędzisz większość czasu w tym środkowym obszarze.

Rysunek 2: Visual Studio IDE

Możesz wykonać więcej dostosowań w programie Visual Studio, takich jak zmiana wyglądu i rozmiaru czcionki w edytorze lub zmiana kolorystyki środowiska IDE, za pomocą okna dialogowego Opcje.W zależności od kombinacji ustawień, które zostały już zastosowane, niektóre elementy w tym oknie dialogowym mogą nie być automatycznie widoczne.Możesz się upewnić, że wszystkie możliwe opcje są widoczne, zaznaczając pole wyboru Pokaż wszystkie ustawienia.

Rysunek 3: Okno dialogowe Opcje

W tym przykładzie zmienisz motyw kolorów IDE z jasnego na ciemny.Można również pominąć kompilację, jeśli chcesz, możesz utworzyć projekt.

Aby zmienić motyw kolorów IDE.

1. Otwórz opcje okno dialogowe, wybierając narzędzia menu u góry a następnie opcje... elementu.

   

2. Zmień Motyw kolorów na Ciemny, następnie kliknij OK.

   

Kolory w programie Visual Studio powinny odpowiadać następującemu obrazowi:

Kolor motywu używany dla obrazów w pozostałej części niniejszy przewodnik jest światła motywu.Aby uzyskać więcej informacji na temat dostosowywania IDE, zobacz Dostosowywanie ustawień środowiska deweloperskiego w Visual Studio.

Tworzenie prostej aplikacji

Utwórz projekt

Podczas tworzenia aplikacji w programie Visual Studio, należy najpierw utworzyć projekt i rozwiązanie.Na przykład możesz tworzyć projektu Windows Presentation Foundation (WPF).

Aby utworzyć projekt WPF

1. Utwórz nowy projekt.Na pasku menu wybierz polecenie pliku, nowy, projektu....

   

   Aby zrobić to samo, możesz też wpisać Nowy projekt w polu Szybkie uruchamianie.

   

2. Wybierz Visual Basic lub Visual C# WPF aplikacji szablonu, wybierając w lewym okienku zainstalowane, szablony, Visual C#, Windows, na przykład, a następnie wybierając aplikacji WPF w środkowym okienku.Nazwa projektu HelloWPFApp u dołu okna dialogowego Nowy projekt.

   

   LUB

   

Program Visual Studio tworzy HelloWPFApp projektu i rozwiązania oraz Eksploratora rozwiązań przedstawia różnych plików.Projektant WPF pokazuje projektu i widok XAML MainWindow.xaml w widoku złożonym.Można przesunąć podziału, aby wyświetlić więcej lub mniej albo widoku.Możesz zobaczyć visual widoku lub widoku XAML.(Aby uzyskać więcej informacji, zobacz WPF Designer for Windows Forms Developers).Następujące elementy są wyświetlane w Eksploratorze rozwiązań:

Rysunek 5: Elementy projektu

Po utworzeniu projektu, można go dostosować.Przy użyciu właściwości okna (na widoku menu), można wyświetlić i zmienić opcje elementy projektów, formantów i innych elementów w aplikacji.Za pomocą właściwości projektu i stron właściwości, można wyświetlić i zmienić opcje dla projektów i rozwiązań.

Aby zmienić nazwę MainWindow.xaml

1. W poniższej procedurze nadasz bardziej szczegółową nazwę obiektowi MainWindow.W Eksploratorze rozwiązań, wybierz opcję MainWindow.xaml.Powinien zostać wyświetlony właściwości okna, ale jeśli nie należy wybrać widoku menu i okno właściwości elementu.Zmień właściwość Nazwa pliku na Greetings.xaml.

   

   Eksploratora rozwiązań pokazuje, że nazwa pliku jest teraz Greetings.xaml i rozwinięciu węzła MainWindow.xaml (przez wprowadzenie fokus w węźle, a następnie naciśnięcie klawisza Strzałka w prawo), możesz przeglądać nazwy MainWindow.xaml.vb lub MainWindow.xaml.cs jest teraz Greetings.xaml.vb lub Greetings.xaml.cs.Ten plik kod jest zagnieżdżony w węźle .xaml pliku do wyświetlania, że są one bardzo ściśle powiązane ze sobą.

   Przestroga
   Ta zmiana powoduje wystąpienie błędu. Na dalszym etapie dowiesz się, jak go debugować i naprawiać.

2. W Eksploratora rozwiązań, otwórz Greetings.xaml w widoku Designer (naciskając klawisz Enter, gdy węzeł ma fokus) i wybierz na pasku tytułu okna za pomocą myszy.

3. W oknie Właściwości, zmień wartość właściwości Tytuł na Greetings.

Na pasku tytułu MainWindow.xaml pojawia się teraz napis „Greetings”.

Zaprojektuj interfejs użytkownika

Dodamy w tej aplikacji trzy typy kontrolek: kontrolkę TextBlock (blok tekstu), dwie kontrolki RadioButton (przycisk radiowy) i kontrolkę Button (przycisk).

Aby dodać kontrolkę TextBlock

1. Otwórz zestaw narzędzi okna, wybierając widoku menu i zestaw narzędzi elementu.

2. W Przyborniku, wyszukaj formant TextBlock.

   

3. Dodaj formant blok tekstu do powierzchnię projektową, wybierając element blok tekstu, a następnie przeciągając do okna na powierzchnię projektową.Centrum kontroli u góry okna.

Okno powinno wyglądać podobnie, jak na poniższej ilustracji:

Rysunek 7: Okno pozdrowień Greetings z formantem TextBlock

Znacznik XAML powinien wyglądać mniej więcej tak:

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>

Aby dostosować tekst w bloku tekstowym

1. W widoku XAML zlokalizować znaczników dla blok tekstu i zmień atrybut tekstu:Text=”Select a message option and then choose the Display button.”

2. Jeśli blok tekstu nie Rozwiń do widoku w projekt, powiększyć formant blok tekstu (przy użyciu obsługuje Przechwyć na krawędziach), tak aby wyświetlone cały tekst.

3. Zapisz zmiany, naciskając klawisz Ctrl-s lub przy użyciu pliku elementu menu.

Następnie należy dodać dwie kontrolki RadioButton do formularza.

Aby dodać przyciski radiowe

1. W Przyborniku, wyszukaj formant RadioButton.

   

2. Dodaj dwa formanty RadioButton do projektowania powierzchni wybierając element RadioButton i przeciągając go do okna na powierzchnię projektową dwa razy, a Przenieś przyciski (zaznaczając je i przy użyciu strzałek) tak, aby przyciski pojawiają się obok siebie pod kontrolą blok tekstu.

   Okno powinno wyglądać następująco:

   Rysunek 8: Przyciski radiowe w oknie Greetings.

   

3. W oknie Właściwości dla lewego formantu RadioButton, zmień właściwość Name (właściwość w górnej części okna Właściwości ) na RadioButton1.Upewnij się, że wybrano RadioButton i nie w tle siatki na formularzu. pole Typ okna właściwości, w polu Nazwa zostanie wyświetlony komunikat RadioButton.

4. W właściwości właściwy formant typu przycisk opcji, zmiany w oknie nazwa właściwości RadioButton2, a następnie zapisz zmiany naciskając klawisz Ctrl-s lub przy użyciu pliku elementu menu.Upewnij się, że wybrano RadioButton przed zmianą i zapisywania.

Możesz teraz dodawać wyświetlany tekst dla każdego formantu RadioButton.Następująca procedura aktualizuje właściwość Content dla kontrolki RadioButton.

Aby dodać wyświetlany tekst dla każdego przycisku radiowego

1. Na powierzchni projektowej, otwórz menu skrótów dla RadioButton1 naciskając klawisz podczas wybierania RadioButton1 prawym przyciskiem myszy, wybierz polecenie Edycja tekstu, a następnie wprowadź Hello.

2. Otwórz menu skrótów dla RadioButton2 naciskając klawisz podczas wybierania RadioButton2 prawym przyciskiem myszy, wybierz polecenie Edycja tekstu, a następnie wprowadź Goodbye.

Ostatnim elementem interfejsu użytkownika (UI), jaki dodasz, jest kontrolka Przycisk.

Aby dodać kontrolkę przycisku

1. W zestaw narzędzi, wyszukiwanie przycisk kontrolować, a następnie dodaj go do powierzchni projektu kontroli RadioButton wybranie przycisku i przeciągając go do formularza w widoku Projekt.

2. W widoku XAML, zmień wartość zawartości dla formantu przycisk z Content=”Button” do Content=”Display”, a następnie zapisz zmiany (Ctrl-s lub użyj pliku menu).

   Znaczniki powinny być podobne do następującego przykładu: <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

Okno powinno wyglądać podobnie, jak na poniższej ilustracji.

Rysunek 9: Końcowy interfejs użytkownika Greetings

Dodaj kod do przycisku Display

Kiedy aplikacja jest uruchomiona, okno komunikatu pojawia się, gdy użytkownik najpierw wybierze przycisk radiowy, a następnie przycisk wyświetlania Display.Jedno okno komunikatu pojawi się, żeby wyświetlić „Hello”, a inne pojawi się, aby wyświetlić „Goodbye”.Aby uzyskać takie zachowanie, dodasz kod do zdarzenia Button_Click w Greetings.xaml.vb lub Greetings.xaml.cs.

Dodaj kod do wyświetlania okien komunikatów

1. Na powierzchni projektowania kliknij dwukrotnie przycisk Display.

   Greetings.xaml.vb lub Greetings.xaml.cs otworzy się, kursor będzie się znajdował w zdarzeniu Button_Click.Można również dodać obsługi zdarzenia kliknięcia w następujący sposób (jeśli wklejonego kodu ma czerwona falista w obszarze wszelkie nazwy, prawdopodobnie nie zaznaczysz formantów RadioButton na powierzchnię projektową i zmienić ich nazwy):

   Dla języka Visual Basic zdarzenie obsługi powinno wyglądać następująco:

   Private Sub Button_Click_1(sender As Object, e As RoutedEventArgs)
   
   End Sub
   

   Dla języka Visual C# zdarzenie obsługi powinno wyglądać następująco:

   private void Button_Click_1(object sender, RoutedEventArgs e)
   {
   
   }
   

2. Dla języka Visual Basic wprowadź następujący kod:

   If RadioButton1.IsChecked = True Then
       MessageBox.Show("Hello.")
   Else RadioButton2.IsChecked = True
       MessageBox.Show("Goodbye.")
   End If
   

   Dla języka Visual# wprowadź następujący kod:

   if (RadioButton1.IsChecked == true)
   {
       MessageBox.Show("Hello.");
   }
   else
   {
       RadioButton2.IsChecked = true;
       MessageBox.Show("Goodbye.");
   }
   

3. Zapisz aplikację.

Debugowanie i testowanie aplikacji

Następnie należy debugować aplikację, aby wyszukać błędy i przetestować, czy oba okna komunikatów wyświetlają się poprawnie.Poniższe instrukcje informacje, jak tworzenie i uruchamianie debuger, ale później może odczytać Kompilowanie aplikacji WPF (WPF) i Debugowanie WPF uzyskać więcej informacji.

Znajdowanie i naprawianie błędów

W tym kroku można znaleźć błędy spowodowane wcześniej przez zmianę nazwy okna głównego pliku XAML.

Aby rozpocząć debugowanie i znaleźć błąd

1. Uruchom debuger, wybierając Debuguj, a następnie polecenie Rozpocznij debugowanie.

   

   Zostanie wyświetlone okno dialogowe, wskazując, że wystąpił IOException: nie można zlokalizować zasobu 'mainwindow.xaml'.

2. Wybierz przycisk OK, a następnie przerwij debugowanie.

   

Możemy zmienić nazwy Mainwindow.xaml Greetings.xaml na początku niniejszy przewodnik, ale kod nadal odnosi się do Mainwindow.xaml jako uruchamiania identyfikatora URI dla aplikacji, więc nie można uruchomić projektu.

Aby określić Greetings.xaml jako startowy identyfikator URI

1. W Eksploratora rozwiązań, otwórz plik App.xaml (w języku C# projektu) lub pliku Application.xaml (w projekcie języka Visual Basic) w widoku XAML (go nie można otworzyć w widoku Projekt), zaznaczając plik i naciskając klawisz Enter lub klikając go dwukrotnie.

2. Zmiany StartupUri="MainWindow.xaml" do StartupUri="Greetings.xaml", a następnie zapisz zmiany Ctrl-s.

Uruchom ponownie debuger (naciśnij klawisz F5).Powinieneś zobaczyć okno powitania aplikacji.

Aby debugować z punktami przerwania

Dodając kilka punktów przerwania, można przetestować kod podczas debugowania.Punkty przerwania można dodać, wybierając debugowanie menu główne, następnie Przełącz punkt przerwania lub za pomocą przycisków w lewym margin edytora obok wiersza kodu, na której ma nastąpić przerwa.

Aby dodać punkty przerwania

1. Otwórz Greetings.xaml.vb lub Greetings.xaml.cs i zaznacz następujący wiersz: MessageBox.Show("Hello.")

2. Dodaj punkt przerwania z menu, zaznaczając Debuguj, następnie Przełącz punkt przerwania.

   

   Obok wiersza kodu na marginesie po lewej stronie okna edytora jest wyświetlane czerwone koło.

3. Zaznacz następujący wiersz: MessageBox.Show("Goodbye.").

4. Naciśnij klawisz F9, aby dodać punkt przerwania, a następnie naciśnij klawisz F5, aby rozpocząć debugowanie.

5. W oknie Greetings wybierz przycisk radiowy Hello, a następnie wybierz przycisk Display.

   Wiersz MessageBox.Show("Hello.") jest wyróżniony na żółto.U dołu IDE, samochody, zmiennych lokalnych i obserwowanych systemu windows zostanie zadokowanych po lewej stronie, a windows stos wywołań, punktów przerwania, polecenia, natychmiastowe i dane wyjściowe zostanie zadokowanych po prawej stronie.

6. Na pasku menu wybierz Debuguj, Wyjdź.

   Aplikacja wznawia działanie i pojawia się okno komunikatu z napisem „Hello”.

7. Wybierz przycisk OK w oknie komunikatu, aby je zamknąć.

8. W oknie Greetings wybierz przycisk radiowy Goodbye, a następnie wybierz przycisk Display.

   Wiersz MessageBox.Show("Goodbye.") jest wyróżniony na żółto.

9. Wciśnij klawisz F5, aby kontynuować debugowanie.Gdy pojawi się okno komunikatu, wybierz przycisk OK w oknie komunikatu, aby je zamknąć.

10. Naciśnij klawisze SHIFT + F5 klucze (naciśnij klawisze shift najpierw, jak i przytrzymaj, naciśnij klawisz F5) do Zatrzymaj debugowanie.

11. Na pasku menu wybierz polecenie Debuguj, Wyłącz wszystkie punkty przerwania.

Tworzenie dystrybucyjnej wersji tej aplikacji

Teraz, gdy masz już pewność, że wszystko działa, możesz przygotować wersję dystrybucyjną aplikacji.

Aby wyczyścić pliki rozwiązań i zbudować wersję przeznaczoną do publikacji

1. W menu głównym wybierz tworzenia, następnie czyszczenia rozwiązania można usunąć pośrednie pliki i dane wyjściowe plików, które zostały utworzone podczas kompilacji poprzedniego.Nie jest to konieczne, ale go czyści wyjść Kompilacja debugowania.

   

2. Zmienić konfigurację kompilacji HelloWPFApp z debugowanie do wersji przy użyciu formantu listy rozwijanej na pasku narzędzi (wskazanego "Debugowania" obecnie).

   

3. Twórz rozwiązania, wybierając tworzenie, następnie tworzyć rozwiązania lub naciśnij klawisz F6.

   

Gratulujemy zakończenia instruktażu!Można znaleźć .exe utworzony w obszarze katalogu projekt i rozwiązania (... \HelloWPFApp\HelloWPFApp\bin\Release\).Jeśli chcesz poznać więcej przykładów, zobacz Visual Studio — przykłady.

Zobacz też

Koncepcje

Co nowego w Visual Studio 2013

Wprowadzenie do programu Visual Studio

Visual Studio — wskazówki dotyczące produktywności