Návod: Vytvoření jednoduché aplikace s použitím jazyka Visual 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 přitom 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í ze systému Visual Studio Professional, který nabízí šablonu aplikace WPF, na které vytvoříte projekt pro tento návod.Visual Studio Express pro stolní počítače se systémem Windows tuto šablonu nabízí také, ale Visual Studio Express pro Windows a Visual Studio Express pro Web nikoli.Úvodní informace o tom, jak používat Visual Studio Express for Windows Centrum pro vývojáře aplikací pro Windows Store.Úvodní informace o tom, jak pomocí sady Visual Studio Express pro Web, Začínáme s technologií ASP.NET.Vaše verze aplikace Visual Studio a nastavení, která používáte, určují také názvy a umístění některých prvků uživatelského rozhraní.Další informace naleznete v tématu Přizpůsobení nastavení pro vývoj v sadě Visual Studio.

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

Při prvním spuštění sady Visual Studio, Visual Studio výzva k přihlášení pomocí účtu Microsoft služby účtu (MSA), přihlásit ke službě Visual Studio.Není nutné přihlásit a můžete provést později.

Na uvedení na trh sady Visual Studio dále musíte vybrat kombinaci nastavení, která se použije sadu předdefinovaných vlastních nastavení pro prostředí IDE.Každá kombinace nastavení byla navržena za účelem usnadnění vývoje aplikací.

Tento průvodce předpokládat, že jste provedli obecné nastavení pro vývoj, která platí minimem přizpůsobení pro prostředí IDE.Pokud již jste zvolili C# nebo Visual Basic (obojí jsou dobře vybrat), není nutné změnit nastavení.Pokud chcete změnit nastavení, můžete použít Import a Export Průvodce nastavením.Další informace naleznete v tématu Přizpůsobení nastavení pro vývoj v sadě Visual Studio.

Po otevření sady Visual Studio lze rozeznat okna nástrojů, nabídky, panely nástrojů a prostor hlavního okna.Okna nástrojů jsou ukotvena na levé a pravé straně okna aplikace. Panel Snadné spuštění, řádek nabídek a běžný panel nástrojů jsou umístěny v horní části okna.Ve střední části okna aplikace se nachází Úvodní stránka.Při načítání řešení nebo projektu, zobrazit v prostoru editory a návrhářů, kde úvodní stránka je.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 zajistit zaškrtnutím políčka Zobrazit všechna nastavení.

Obrázek 3: Dialogové okno Možnosti

V tomto příkladu změníte barevný motiv integrovaného vývojového prostředí (IDE) ze světlého na tmavé.Pokud chcete vytvořit projekt můžete přeskočit dopředu.

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

1. Otevřít možnosti dialogové okno volbou nástroje nabídky nahoře a potom možnosti... položky.

   

2. Změňte možnost Barevný motiv na Tmavý a klikněte na tlačítko OK.

   

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

Barva motiv použitý pro obrázky v zbytek tohoto průvodce je light motivu.Další informace o úpravách rozhraní IDE naleznete v části Přizpůsobení nastavení pro vývoj v sadě Visual Studio.

Vytvoření jednoduché aplikace

Vytvoření projektu

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

Vytvoření projektu WPF

1. Vytvořte nový projekt.V nabídce, zvolte soubor, nový, projektu....

   

   Můžete také zadat Nový projekt do textového pole Snadné spuštění.

   

2. Zvolte šablonu aplikace WPF Visual C# nebo Visual Basic volbou v levém podokně nainstalované, šablony, Visual C#, Windows, například a potom v prostředním podokně zvolíte aplikace WPF.Pojmenujte tento projekt HelloWPFApp v dolní části dialogového okna Nový projekt.

   

   NEBO

   

Sada Visual Studio vytvoří HelloWPFApp projektu a řešení a Průzkumníka řešení ukazuje různých souborů.Návrháři WPF ukazuje zobrazení návrhu a zobrazení XAML MainWindow.xaml v zobrazení rozdělení.Můžete snímek rozdělování, chcete-li zobrazit více nebo méně buď zobrazení.Můžete zobrazit pouze vizuální zobrazení nebo pouze zobrazení jazyka XAML.(Další informace naleznete v tématu WPF Designer for Windows Forms Developers).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, jej můžete upravit.Pomocí vlastnosti okna (na nalezena zobrazení nabídky), můžete zobrazit a změnit možnosti pro položky projektu, ovládací prvky a další položky v aplikaci.Pomocí vlastností projektu a stránek vlastností 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 Průzkumníku řešení vyberte soubor MainWindow.xaml.Zobrazí vlastnosti okna, ale pokud nechcete, zvolte zobrazení nabídky a okno vlastností položky.Hodnotu vlastnosti Název souboru přepište na Greetings.xaml.

   

   Průzkumník řešení vyplývá, že název souboru je nyní Greetings.xaml, a pokud je Rozbalit uzel MainWindow.xaml (uvedení fokusu v uzlu a stisknutím klávesy šipka vpravo), zobrazí se název MainWindow.xaml.vb nebo MainWindow.xaml.cs je nyní Greetings.xaml.vb nebo Greetings.xaml.cs.Tento soubor kódu vnořen v uzlu .xaml soubor zobrazit, že jsou velmi těsně související s sebou.

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

2. V Průzkumníka řešení, otevřete Greetings.xaml zobrazení Návrh (stisknutím klávesy Enter během uzlu je zaměřen) a vyberte záhlaví okna pomocí myši.

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

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řít nástrojů okna volbou zobrazení nabídky a nástrojů položky.

2. V okně Sada nástrojů najděte ovládací prvek TextBlock.

   

3. Přidejte ovládací prvek TextBlock návrhovou plochu zvolením položky TextBlock a přetažením do okna na návrhové ploše.Centrum ovládací prvek 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

Značka XAML 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 zobrazení jazyka XAML pro TextBlock najít kódu a změňte atribut Text:Text=”Select a message option and then choose the Display button.”

2. Pokud chcete-li přizpůsobit zobrazení v návrhu, zvětšete TextBlock (pomocí držadel na okraje) tak, aby zobrazil veškerý text objektu TextBlock nelze rozbalit.

3. Uložte provedené změny stisknutím kombinace kláves Ctrl s nebo pomocí soubor položky nabídky.

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

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

1. V okně Sada nástrojů najděte ovládací prvek RadioButton.

   

2. Přidat dva přepínač ovládací prvky návrhu objevit vybrat položku přepínač a jeho přetažením do okna na návrhové ploše dvakrát, a přesunout tlačítka (tak, že je vyberete a pomocí kláves se šipkami) tak, aby se zobrazí tlačítka vedle sebe pod kontrolou 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.Přesvědčte se, zda že jste vybrali přepínač a nikoli na pozadí mřížky ve formuláři; Typ pole v okně Vlastnosti pod polem název měla objevit zpráva přepínač.

4. V vlastnosti okno pro správné ovládací prvek přepínač, změnu název vlastnost, která má RadioButton2a poté uložte provedené změny stisknutím kombinace kláves Ctrl s nebo pomocí soubor položky nabídky.Ujistěte se, že jste vybrali přepínač před změny a ukládání.

Nyní můžete zadat text k zobrazení u obou ovládacích prvků RadioButton.Následující postup aktualizuje vlastnost Obsah ovládacího prvku RadioButton.

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

1. Na návrhové ploše, otevřete místní nabídku pro RadioButton1 stisknutím klávesy při výběru RadioButton1 pravým tlačítkem myši, zvolte upravit Texta stiskněte enter Hello.

2. Otevřete místní nabídku pro RadioButton2 stisknutím klávesy při výběru RadioButton2 pravým tlačítkem myši, zvolte upravit Texta stiskněte enter 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čítka

1. V nástrojů, Hledat tlačítko řídit a pak přidejte návrhovou plochu v rámci kontrol přepínač výběrem tlačítka a přetažením do formuláře v zobrazení návrhu.

2. V zobrazení jazyka XAML, změňte hodnotu obsahu ovládací prvek tlačítka z Content=”Button” k Content=”Display”a poté uložte provedené změny (Ctrl s nebo použití soubor nabídky).

   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 Zobrazit

Po spuštění aplikace se poté, co uživatel poprvé zvolí přepínač a následně klikne na tlačítko Zobrazit, 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 dvakrát klikněte na tlačítko Zobrazit.

   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žná rutina události kliknutí můžete také přidat takto (je-li vloženého kódu má červenou vlnovkou pod libovolné názvy, pak jste pravděpodobně není výběr ovládacích prvků přepínač na návrhovou plochu a přejmenujte je):

   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 aplikaci, abychom vyhledali chyby a vyzkoušeli, zda se obě okna se zprávami zobrazila správně.Podle následujících pokynů se dozvíte, jak vytvářet a spusťte ladicí program, ale později může číst Sestavení aplikace WPF (WPF) a Ladění WPF Další informace.

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.

   

Můžeme Mainwindow.xaml přejmenován na Greetings.xaml na začátku tohoto průvodce, ale kód stále se rozumí Mainwindow.xaml jako spouštěcího identifikátor URI pro aplikaci, tak, aby projekt nelze spustit.

Určení souboru Greetings.xaml jako spouštěcího identifikátoru URI

1. V Průzkumníka řešení, otevřete soubor App.xaml (v jazyce C# projektu) nebo soubor Application.xaml (v projektu Visual Basic) v zobrazení jazyka XAML (nelze otevřít v zobrazení návrhu) výběrem souboru a stisknutím klávesy Enter nebo dvojitým kliknutím na.

2. Změna StartupUri="MainWindow.xaml" k StartupUri="Greetings.xaml"a pomocí kombinace kláves Ctrl s uložte provedené změny.

Spusťte ladicí program znovu (stisknete klávesu F5).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 můžete přidat výběrem ladění na hlavní nabídky, pak Přepnout zarážky nebo kliknutím na tlačítko levého okraje editoru vedle řádku kódu, které chcete zalomení.

Přidání zarážek

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í a kliknutím na položku Přepnout zarážku přidáte zarážku z nabídky.

   

   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 přidat zarážky a potom 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 Zobrazit.

   Řádek MessageBox.Show("Hello.") je zvýrazněn žlutě.V dolní části rozhraní IDE, Autos, lokální a sledovat jsou společně ukotvit windows na levé straně a zásobník volání, zarážky, příkazu, okamžité a výstupu windows jsou společně ukotvení na pravé straně.

6. Na řádku nabídek vyberte položku Ladění, 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 Zobrazit.

   Řá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. Stiskněte klávesy SHIFT + F5 klíče (stisknutím klávesy shift nejprve a podržíte stisknutou klávesu F5) Zastavit ladění.

11. V panelu nabídky zvolte položky Ladění, Zakázat všechny zarážky.

Sestavení verze pro vydání aplikace

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

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

1. Na hlavní nabídky vyberte sestavení, pak Vyčistit řešení odstranit středně pokročilý soubory a výstupní soubory, které byly vytvořeny během předchozí sestavení.Není to nutné, ale je vyčistí výstupy sestavení ladění.

   

2. Změnit konfiguraci sestavení pro HelloWPFApp z ladění k verze pomocí ovládací prvek rozevírací seznam na panelu nástrojů (se říká "Ladění" aktuálně).

   

3. Sestavte řešení volbou sestavení, pak sestavit řešení nebo stisknutím klávesy F6.

   

Blahopřejeme k dokončení tohoto návodu!Můžete najít .exe zvládli za adresáři řešení a projektu (... \HelloWPFApp\HelloWPFApp\bin\Release\).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 2013

Začínáme se sadou Visual Studio

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