Postupy: Seznámení s integrovaným vývojovým prostředím sady Visual Studio s použitím jazyka C# nebo Visual Basic

V tomto návodu se seznámíte s mnoha nástroji, dialogovými okny a návrháři, které lze použít při vývoji aplikací pomocí systému Visual Studio.Vytvoříte jednoduchou aplikaci ve stylu “Hello, World”, navrhnete uživatelské rozhraní (UI), vložíte kód a budete ladit chyby a v průběhu získáte zkušenosti s prací v integrovaném vývojovém prostředí (IDE).

Toto téma obsahuje následující oddíly:

Nastavení integrovaného vývojového prostředí (IDE)

Vytvoření jednoduché aplikace

Ladění a testování aplikace

[!POZNÁMKA]

Tento návod vychází z edice Professional systému Visual Studio 2012.Ve vaší kopii systému Visual Studio se u některých prvků uživatelského rozhraní mohou zobrazit jiné názvy a umístění, než jsou uvedeny v následujících pokynech.Tyto prvky jsou určeny verzí aplikace Visual Studio a použitým nastavením.Další informace o nastaveních naleznete v části Nastavení aplikace Visual Studio.

Nastavení integrovaného vývojového prostředí (IDE)

Při prvním spuštění systému Visual Studio je nutné vybrat kombinaci nastavení, které aplikuje sadu předdefinovaných nastavení pro integrované vývojové prostředí (IDE).Každá kombinace nastavení byla navržena za účelem usnadnění vývoje aplikací.

Obrázek 1: Dialogové okno Zvolit výchozí nastavení prostředí

Tento návod byl napsán s aplikovaným nastavením Obecné vývojové nastavení, které nastaví minimální množství vlastního nastavení rozhraní IDE.Kombinaci nastavení lze změnit pomocí Průvodce importem a exportem nastavení.Další informace naleznete v tématu Jak: Vyberte Změnit nastavení.

Po otevření systému Visual Studio lze rozeznat okna nástrojů, nabídky, panely nástrojů a místo hlavního okna.Panely nástrojů jsou ukotveny na levé a pravé straně okna aplikace. Panel Rychlé spuštění, panel nabídek a běžný panel nástrojů jsou umístěny v horní části okna.Střední část okna aplikace obsahuje okno s Úvodní stránkou.Při otevření řešení nebo projektu se na tomto místě objeví editory a návrháře.Při vývoji aplikace strávíte nejvíce času v této centrální oblasti.

Obrázek 2: integrované vývojové prostředí (IDE) systému Visual Studio

Pro systém Visual Studio lze pomocí dialogového okna Možnosti vytvořit další úpravy, jako jsou například změny řezu písma a velikost textu v editoru či barvy motivu rozhraní IDE.V závislosti na kombinaci použitého nastavení se některé položky v tomto dialogovém okně nemusejí automaticky zobrazit.Zobrazení všech dostupných možností lze zkontrolovat zaškrtnutím zaškrtávacího políčka Zobrazit všechna nastavení.

Obrázek 3: Dialogové okno Možnosti

Tento příklad demonstruje změnu barevného motivu integrovaného vývojového prostředí (IDE) ze světlého na tmavé.

Změna barevného motivu prostředí IDE

1. Otevřete dialogové okno Možnosti.

   

2. Změňte Barevný motiv na Tmavý a následně klikněte na tlačítko OK.

   

Barvy v systému Visual Studio by měly odpovídat následujícím obrázku:

Po zbytek návodu bude jako barevný motiv použit světlý motiv.Další informace o úpravách rozhraní IDE naleznete v části Přizpůsobení vývojové prostředí.

Vytvoření jednoduché aplikace

Vytvoření projektu

Při vytváření aplikace v systému Visual Studio, je třeba napřed vytvořit projekt a řešení.V tomto příkladu vytvoříte řešení Windows Presentation Foundation (WPF).

Pro vytvoření projektu WPF

1. Vytvořte nový projekt.V panelu nabídek zvolte Soubor, Nový, Projekt.

   

   Téhož lze docílit zadáním výrazu Nový projekt do textového pole Snadné spuštění.

   

2. Vyberte šablonu aplikace WPF v jazyce Visual Basic nebo Visual C# a následně projekt pojmenujte HelloWPFApp.

   

   -nebo-

   

Projekt a řešení HelloWPFApp jsou vytvořeny a v okně Průzkumník řešení se objeví různé soubory.Návrhář WPF ukazuje v rozděleném zobrazení návrhové a XAML zobrazení souboru MainWindow.xaml.(Další informace naleznete v tématu WPF Designer pro vývojáře model Windows Forms).V podokně Průzkumník řešení ze zobrazí následující položky.

Obrázek 5: Položky projektu

Poté, co jste projekt vytvořili, můžete jej upravit.Pomocí okna Vlastnosti si můžete zobrazit a změnit možnosti položek projektu, ovládacích prvků a dalších položek v aplikaci.Pomocí vlastností projektu a stránek vlastností si můžete zobrazit a změnit možnosti projektů a řešení.

Změna názvu souboru MainWindow.xaml

1. V následujícím postupu pojmenujete okno MainWindow konkrétněji.V okně Průzkumník řešení vyberte soubor MainWindow.xaml.Pod oknem Průzkumník řešení byste měli vidět okno Vlastnosti tohoto souboru.Pokud se okno Vlastnosti nezobrazí, klikněte pravým tlačítkem myši na soubor MainWindow.xaml v Průzkumníku řešení a z místní nabídky vyberte položku Vlastnosti.Hodnotu vlastnosti Název souboru přepište na Greetings.xaml.

   

   Průzkumník řešení zobrazí nový název souboru Greetings.xaml a také to, že byl přejmenován soubor MainWindow.xaml.vb, případně MainWindow.xaml.cs, na Greetings.xaml.vb, případně Greetings.xaml.cs.

2. V okně Průzkumník řešení otevřete soubor Greetings.xaml v návrháři a klikněte do záhlaví okna.

3. V okně Vlastnosti přepište hodnotu vlastnosti Název na Greetings.

   Upozornění
   Tato změna způsobí chybu, kterou se dozvíte později během ladění a opravování.

V záhlaví okna souboru MainWindow.xaml je nyní napsáno Greetings.

Návrh uživatelského rozhraní (UI)

Nyní do této aplikace přidáme tři typy ovládacích prvků: ovládací prvek TextBlock, dva ovládací prvky RadioButton a ovládací prvek Button.

Přidání ovládacího prvku TextBlock

1. Otevřete okno Nástroje.Měli byste jej najít nalevo od okna návrháře.Lze jej taky otevřít z nabídky Zobrazení nebo pomocí klávesové zkratky CTRL+ALT+X.

2. V okně Nástroje najděte ovládací prvek TextBlock.

   

3. Vložte ovládací prvek TextBlock do návrhové plochy a vycentrujte jej v horní části okna.

Okno aplikace, by mělo vypadat jako na následujícím obrázku:

Obrázek 7: Okno Greetings s ovládacím prvkem TextBlock

XAML značka by měla vypadat následovně:

<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"/>

Úprava textu v textovém bloku

1. V XAML zobrazení najděte značku pro TextBlock a přepište hodnotu atributu Text následovně: Text=”Select a message option and then choose the Display button.”

2. Pokud se ovládací prvek TextBlock v návrhovém zobrazení nerozšíří tak, aby zobrazil celý text, rozšiřte jej.

3. Uložte provedené změny.

Dále do formuláře přidejte dva ovládací prvky Komponenta RadioButton.

Přidání přepínačů

1. V okně Nástroje najděte ovládací prvek RadioButton.

   

2. Na návrhovou plochu přidejte dva ovládací prvky RadioButton a přesuňte je tak, aby byly zobrazeny vedle sebe pod ovládací prvkem TextBlock.

   Okno aplikace by mělo vypadat takto:

   Obrázek 8: Přepínače v okně Greetings.

   

3. V okně Vlastnosti levého ovládacího prvku RadioButton přepište hodnotu vlastnosti Název (vlastnost v horní části okna Vlastnosti) na RadioButton1.

4. V okně Vlastnosti pravého ovládacího prvku RadioButton přepište hodnotu vlastnosti Název na RadioButton2 a následně změny uložte.

Nyní můžete zadat text k zobrazení u obou ovládacích prvků RadioButton.Následující postup předvádí aktualizaci hodnoty vlastnosti Obsah ovládací prvku RadioButton.

Přidání textu k zobrazení u obou přepínače

1. Na návrhové ploše otevřete místní nabídku ovládacího prvku RadioButton1, vyberte Upravit Text a potom zadejte Hello.

2. Otevřete místní nabídku ovládacího prvku RadioButton2, vyberte Upravit text a zadejte Goodbye.

Poslední prvek uživatelského rozhraní, který přidáte, je ovládací prvek Tlačítko.

Přidání ovládacího prvku tlačítko

1. V okně Nástroje vyhledejte ovládací prvek Button a následně jej vložte na návrhovou plochu pod ovládací prvky RadioButton.

2. V XAML zobrazení přepište hodnotu vlastnosti Content ovládacího prvku Button z Content=”Button” na Content=”Display” a následně změny uložte.

   Značka by měla vypadat následovně: <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>.

Okno aplikace by mělo vypadat jako na následujícím obrázku.

Obrázek 9: Konečné uživatelské rozhraní aplikace Greetings

Přidání kódu k tlačítku Display

Po spuštění aplikace se poté, co uživatel poprvé zvolí přepínač a následně klikne na tlačítko Zobrazení, objeví okno se zprávou.Objeví se jedno okno se zprávou pro Hello a druhé se zprávou pro Goodbye.Pro vytvoření tohoto chování je nutné do události Button_Click v souboru Greetings.xaml.vb, případně Greetings.xaml.cs, přidat kód.

Přidání kódu pro zobrazení oken se zprávami

1. Na návrhové ploše poklikejte na tlačítko Zobrazení.

   Otevře se okno s obsahem souboru Greetings.xaml.vb, případně Greetings.xaml.cs, s kurzorem umístěným v události Button_Click.Obslužnou rutinu události kliknutí lze také přidat následovně:

   V jazyce Visual Basic by měla obslužná rutina události vypadat takto:

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

   V jazyce Visual C# by měla obslužná rutina události vypadat takto:

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

2. Pro jazyk Visual Basic zadejte následující kód:

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

   Pro jazyk Visual C# zadejte následující kód:

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

3. Uložte aplikaci.

Ladění a testování aplikace

Dále budeme ladit aplikace, abychom vyhledali chyby a vyzkoušeli, že se obě okna se zprávami zobrazila správně.Další informace naleznete v tématu Vytváření aplikací WPF (WPF) a Ladění WPF.

Vyhledání a oprava chyb

V tomto kroku zjistíte chybu, kterou jsme dříve způsobili změnou názvu souboru XAML v hlavním okně.

Spuštění ladění a vyhledání chyby

1. Spusťte ladicí program kliknutím na položku Ladit a následně na položku Spustit ladění.

   

   Zobrazí se dialogové okno označující, že došlo k výjimce IOException: Nelze najít zdroj "mainwindow.xaml".

2. Klikněte na tlačítko OK a následně ukončete ladicí program.

   

Na začátku tohoto návodu jsme přejmenovali soubor Mainwindow.xaml na Greetings.xaml, ale řešení se stále odkazuje na soubor Mainwindow.xaml, jakožto spouštěcí URI aplikace, takže se projekt nemůže spustit.

Určení souboru Greetings.xaml jako spouštěcí URI

1. V okně Průzkumník řešení otevřete soubor App.xaml (C# projekt) nebo Application.xaml (Visual Basic projekt) do XAML zobrazení (nemůže být otevřen v návrhovém zobrazení).

2. Přepište StartupUri="MainWindow.xaml" na StartupUri="Greetings.xaml" a následně změny uložte.

Znovu spusťte ladicí program.Měli byste vidět okno Greetings aplikace.

Ladění se zarážkami

Přidáním zarážek lze otestovat kód během ladění.Zarážky lze přidat kliknutím na položku Ladění a následně na položku Přepnout zarážku v řádku nabídek nebo kliknutím do levého okraje editoru vedle řádku, kde chcete, aby se zarážka objevila.

Přidání zarážky

1. Otevřete soubor Greetings.xaml.vb, případně Greetings.xaml.cs, a vyberte následující řádek: MessageBox.Show("Hello.")

2. Výběrem položky Ladění z nabídek a kliknutím na položku Přepnout zarážku přidáte zarážku.

   

   Na levém okraji okna editoru se vedle řádku kódu zobrazí červený kruh.

3. Vyberte následující řádek: MessageBox.Show("Goodbye.").

4. Stiskněte klávesu F9 pro přidání zarážky a následně stiskněte klávesu F5 pro spuštění ladění.

5. V okně Greetings vyberte přepínač Hello a následně klikněte na tlačítko Display.

   Řádek MessageBox.Show("Hello.") je zvýrazněn žlutě.Na spodní straně rozhraní IDE se na levé straně společně ukotví okna Automatické hodnoty, Místní hodnoty a Sledování a na pravé straně se ukotví okna Zásobník volání, Zarážky, Okamžité a Výstup.

6. V řádku nabídek klikněte na položku Ladění a následně na položku Krok ven.

   Aplikace bude pokračovat v provádění a zobrazí se okno se zprávou obsahující slovo "Hello".

7. Okno zpráv zavřete kliknutím na tlačítko OK.

8. V okně Greetings vyberte přepínač Goodbye a následně klikněte na tlačítko Display.

   Řádek MessageBox.Show("Goodbye.") je zvýrazněn žlutě.

9. Pro pokračování v ladění stiskněte klávesu F5.Když se objeví okno zpráv, klikněte na tlačítko OK, abyste jej zavřeli.

10. Pro zastavení ladění použijte klávesovou zkratku SHIFT + F5.

11. V řádku nabídek klikněte na položku Ladění a následně na Zakázat všechny zarážky.

Sestavení verze pro vydání aplikace

Nyní poté, co bylo ověřeno, že vše funguje jak má, lze připravit verzi pro vydání aplikace.

Vyčištění řešení a sestavení verze pro vydání aplikace

1. Klikněte na položku Sestavit, Vyčistit řešení pro okamžité odstranění souborů, které byly během předchozích sestavení vytvořeny.

   

2. Změňte nastavení sestavení aplikace HelloWPFApp z Debug na Release.

   

3. Sestavte řešení.

   

Blahopřejeme k dokončení tohoto návodu!Pokud si budete chtít projít další příklady, přejděte na téma Ukázky sady Visual Studio.

Viz také

Koncepty

Novinky v sadě Visual Studio 2012

Začínáme se sadou Visual Studio

Tipy pro vyšší produktivitu v sadě Visual Studio