Wskazówki: eksploracja środowiska Visual Studio IDE z językiem C++ lub Visual Basic

Wykonując polecenia tego instruktażu, zapoznasz się z wieloma narzędziami i 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

Utwórz prostą aplikację.

Debuguj i testuj aplikację

[!UWAGA]

Niniejszy instruktaż został przygotowany w oparciu o wersję Professional programu Visual Studio 2012.Nazwy lub lokalizacje dla niektórych elementów interfejsu użytkownika mogą być inne w Twojej wersji programu Visual Studio.Te elementy są determinowane przez numer edycji Twojego programu Visual Studio oraz Twoje ustawienia.Aby uzyskać więcej informacji na temat ustawień, zobacz Visual Studio, ustawienia.

Konfigurowanie IDE

Po uruchomieniu programu Visual Studio po raz pierwszy musisz wybrać kombinację ustawień, która wprowadza zestaw predefiniowanych dostosowań do IDE.Każda kombinacja ustawień została zaprojektowany w celu ułatwienia opracowywania aplikacji.

Rysunek 1: Wybierz okno dialogowe Domyślne ustawienia środowiska

Niniejszy instruktaż został napisany z uwzględnieniem Ogólnych ustawień środowiska deweloperskiego, w ramach których stosowana jest najmniejsza ilość zmian IDE.Możesz zmienić swoją kombinację ustawień za pomocą Kreatora importowania i eksportowania ustawień.Aby uzyskać więcej informacji, zobacz Jak: Zmienianie wybierz ustawienia.

Po otwarciu programu Visual Studio, można określić trzy podstawowe obszary IDE: Narzędzie systemu windows, menu i paski narzędzi i przestrzeń głównego okna.Okna narzędziowe 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 startowa.Kiedy rozwiązanie lub projekt jest ładowany, redaktorzy i projektanci pojawiają się w tym miejscu.Podczas opracowywania aplikacji spędzisz większość czasu w tym środkowym obszarze.

Rysunek 2: Visual Studio IDE

Możesz dokonać dodatkowych 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ą być niewidoczne automatycznie.Możesz zapewnić, że wszystkie możliwe opcje są widoczne, zaznaczając Pokaż wszystkie ustawienia w polu wyboru.

Rysunek 3: Okno dialogowe Opcje

W tym przykładzie będziesz zmieniać motyw kolorów IDE z jasnego na ciemny.

Aby zmienić kolor tematu IDE.

1. Otwórz okno dialogowe Opcje.

   

2. Zmień motyw kolorów na ciemne, następnie kliknij przycisk OK.

   

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

Motywem kolorów używanym w pozostałej części tego instruktażu jest 'light theme'.Aby uzyskać więcej informacji na temat dostosowania IDE, zobacz Dostosowywanie środowiska programistycznego.

Utwórz prostą aplikację.

Utwórz projekt

Podczas tworzenia aplikacji w programie Visual Studio, należy najpierw utworzyć projekt i rozwiązanie.Dla tego przykładu użytkownik utworzy rozwiązanie Presentation Foundation systemu Windows.

Aby utworzyć projekt WPF

1. Utwórz nowy projekt.W pasku menu wybierz Plik, Nowy, Projekt.

   

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

   

2. Wybieranie szablonu aplikacji Visual Basic lub Visual C# WPF, a następnie nazwę projektu Aplikacji HelloWPF.

   

   LUB

   

Projekt i rozwiązanie HelloWPFApp są tworzone, poszczególne pliki pojawiają się w Eksploratorze rozwiązania.WPF Designer pokazuje widok projektu i widok XAML pliku MainWindow.xaml w widoku podzielonym.(Aby uzyskać więcej informacji, zobacz Projektant WPF dla deweloperów Windows Forms).Następujące elementy są wyświetlane w Eksploratorze rozwiązania:

Rysunek 5: Elementy projektu

Po utworzeniu projektu, można go dostosować.Za pomocą okna Właściwości, można wyświetlić i zmienić opcje elementów projektu, 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ązania, wybierz opcję MainWindow.xaml.Powinieneś zobaczyć okno Właściwości dla tego pliku pod oknem .Jeśli nie widzisz okna Właściwości, wybierz MainWindow.xaml w Eksploratorze rozwiązań, otwórz menu skrótów (klikając prawym przyciskiem myszy) i wybierz Właściwości.Zmień właściwość Nazwa pliku na Greetings.xaml.

   

   Eksplorator rozwiązania pokazuje, że nazwa pliku to teraz Greetings.xaml, a nazwa MainWindow.xaml.vb lub MainWindow.xaml.cs to teraz Greetings.xaml.vb lub Greetings.xaml.cs.

2. W Eksploratorze rozwiązania, otwórz Greetings.xaml w widoku projektanta i wybierz pasek tytułu okna.

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

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

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 okno Przybornik.Znajdziesz je po lewej stronie okna projektanta.Możesz to również otworzyć w menu Widok lub wpisując CTRL+ALT+X.

2. W Przyborniku, wyszukaj formant typu blok tekstu.

   

3. Dodaj funkcję kontroli bloku tekstu na powierzchni projektu i wyśrodkuj kontrolę w górnej części okna.

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

Rysunek 7: Okno Pozdrowienia z formantem blok tekstu

Znacznik XAML powinien wyglądać mniej więcej następująco:

<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 zlokalizuj znaczniki obiektu blok tekstu i zmień atrybut tekstu: Text=”Select a message option and then choose the Display button.”

2. Jeśli blok tekstu nie jest powiększony, aby pasował do widoku w projekcie, powiększ formant blok tekstu, tak aby został wyświetlone cały tekst.

3. Zapisz zmiany.

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

Aby dodać przyciski radiowe

1. W Przyborniku, wyszukaj formant typu przycisku opcji.

   

2. Dodaj dwa formanty RadioButton na powierzchnię projektu, a następnie przenieść je, tak aby były wyświetlane obok siebie pod kontrolą blok tekstu.

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

   Rysunek 8: Przycisk opcji w oknie Pozdrowienia.

   

3. W oknie Właściwości dla lewego formantu typu przycisk opcji, zmień właściwości Nazwa (właściwość w górnej części okna Właściwości ) na RadioButton1.

4. W oknie Właściwości dla prawego formantu przycisku opcji, zmień właściwości Nazwy, na RadioButton2 , a następnie zapisz zmiany.

Możesz teraz dodawać tekst wyświetlenia dla każdej kontrolki RadioButton (przycisk radiowy).Następująca procedura aktualizuje właściwość Zawartość dla kontrolki RadioButton.

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

1. Na powierzchni projektowej otwórz menu podręczne dla RadioButton1, wybierz polecenie Edytuj tekst, a następnie wprowadź Hello.

2. Otwórz menu podręczne dla RadioButton2 (przycisk radiowy 2), wybierz polecenie Edytuj tekst, a następnie wprowadź Goodbye.

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

Aby dodać kontrolkę przycisku

1. W Przybornik, wyszukaj przycisk kontroli, a następnie dodaj go do powierzchni projektowej, w obszarze formanty przycisku opcji.

2. W widoku XAML, zmień wartość Zawartość dla przycisku kontroli z Content=”Button” na Content=”Display” a następnie zapisz zmiany.

   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ńcowe pozdrowienia interfejsu użytkownika

Dodaj kodu do przycisku wyświetlania

Kiedy aplikacja jest uruchomiona, okno komunikatu pojawia się, gdy użytkownik najpierw wybierze przycisk radiowy, a następnie przycisk Wyświetl.Jedno okno komunikatu pojawi się, żeby wyświetlić "Hello", a inne pojawi się, by 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 projektowej kliknij dwukrotnie przycisk Wyświetlanie.

   Greetings.XAML.VB lub Greetings.xaml.cs otworzy się, kursor znajduje się w zdarzeniu Button_Click.Możesz też dodać moduł obsługi zdarzeń kliknięcia w następujący sposób:

   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ę.

Debuguj i testuj aplikację

Następnie należy debugować aplikację, aby wyszukać błędy i przetestować, czy oba okna komunikatów wyświetlają się poprawnie.Aby uzyskać więcej informacji, zobacz Budowanie aplikacji WPF (WPF) i Debugowanie WPF.

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.

   

Na początku tego instruktażu zmieniliśmy nazwę Mainwindow.xaml na Greetings.xaml. Mimo to rozwiązanie wciąż wskazuje Mainwindow.xaml jako startowy identyfikator URI dla aplikacji, przez co nie można uruchomić projektu.

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

1. W Eksploratorze rozwiązania, otwórz plik App.xaml (w projekcie języka C#) lub Application.xaml (w projekcie języka Visual Basic) w widoku XAML (nie można otworzyć tego w widoku Projekt).

2. Zapisz StartupUri="MainWindow.xaml" do StartupUri="Greetings.xaml", i następnie zapisz zmiany.

Ponownie uruchom debuger.Powinieneś zobaczyć okno powitania aplikacji.

Aby debugować z punktami przerwania

Dodając kilka punktów przerwania, można przetestować kod podczas debugowania.Możesz dodać punkty przerwania, wybierając na pasku menu Debuguj, Przełącz punkt przerwania lub klikając w lewy margines edytora obok wiersza kodu, na którym ma nastąpić przerwanie.

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 linii kodu na marginesie po lewej stronie okna edytora jest wyświetlane czerwone koło.

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

4. Wybierz klawisz F9, aby dodać punkt przerwania, a następnie wybierz klawisz F5, aby rozpocząć debugowanie.

5. W oknie Pozdrowienia wybierz polecenie Powitanie przycisk opcji, a następnie wybierz przycisk Wyświetl.

   Wiersz MessageBox.Show("Hello.") jest wyróżniony na żółto.W dolnej części zintegrowanego środowiska programistycznego (IDE) okno zmiennych automatycznych, okno zmiennych lokalnych i okno obserwacji są zadokowane razem po lewej stronie, zaś okno stosu wywołań, okno punktów przerwania, okno polecenia, okno błyskawiczne oraz okno wyniku są zadokowane razem 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 Pozdrowienia wybierz polecenie Pożegnanie przycisk opcji, a następnie wybierz przycisk Ekran.

   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. Wybierz klawisze SHIFT + F5, aby przerwać debugowania.

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

Tworzenie 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ę do publikacji

1. Wybierz polecenie Kompilacja, a następnie Czyste rozwiązanie, aby usunąć pliki pośrednie i pliki wyjściowe, które zostały utworzone podczas poprzednich kompilacji.

   

2. Zmień konfigurację kompilacji dla Aplikacji HelloWPF z Debuguj na Uwolnij.

   

3. Tworzenie rozwiązania.

   

Gratulujemy zakończenia instruktażu!Jeśli chcesz poznać więcej przykładów, zobacz Visual Studio — przykłady.

Zobacz też

Koncepcje

Co nowego w Visual Studio 2012

Wprowadzenie do programu Visual Studio

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