Sdílet prostřednictvím


Kurz: Vytvoření jednoduché aplikace WPF pomocí jazyka C#

Po dokončení tohoto kurzu se seznámíte s mnoha nástroji, dialogovými okny a návrháři, které můžete použít při vývoji aplikací pomocí sady Visual Studio. Vytvoříte aplikaci "Hello, World", navrhnete uživatelské rozhraní, přidáte kód a ladíte chyby, zatímco se dozvíte o práci v integrovaném vývojovém prostředí (IDE).

Požadavky

  • Pokud jste visual Studio ještě nenainstalovali, přejděte na stránku pro stažení sady Visual Studio a nainstalujte ji zdarma.
  • Ujistěte se, že je nainstalovaná úloha vývoje desktopových aplikací .NET. Tuto konfiguraci můžete ověřit v Instalační program pro Visual Studio.
  • Pro účely tohoto kurzu můžete použít rozhraní .NET Framework nebo .NET Core. .NET Core je novější, modernější architektura. .NET Core vyžaduje Visual Studio 2019 verze 16.3 nebo novější.

Co je WPF (Windows Presentation Foundation)?

WPF nebo Windows Presentation Foundation je architektura uživatelského rozhraní (uživatelského rozhraní), která vytváří desktopové klientské aplikace. Vývojová platforma WPF podporuje širokou paletu funkcí pro vývoj aplikací, například model aplikace, prostředky, ovládací prvky, grafiku, rozložení, datové vazby, dokumenty a zabezpečení.

WPF je součástí .NET, takže pokud jste dříve vytvořili aplikace s .NET pomocí ASP.NET nebo model Windows Forms, měli byste mít zkušenosti s programováním. WPF používá XAML jazyka EXTENSIBLE Application Markup Language k poskytnutí deklarativního modelu pro programování aplikací. Další informace naleznete v tématu WPF .NET přehled.

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

Při spuštění sady Visual Studio se nejprve otevře úvodní okno. Výběrem možnosti Pokračovat bez kódu otevřete vývojové prostředí. Zobrazí se okna nástrojů, nabídky a panely nástrojů a hlavní prostor okna. Okna nástrojů jsou ukotvená na levé a pravé straně okna aplikace. Vyhledávací pole, řádek nabídek a standardní panel nástrojů se nachází v horní části. Při načítání řešení nebo projektu se editory a návrháři zobrazí v centrálním prostoru okna aplikace. Při vývoji aplikace strávíte většinu času v této centrální oblasti.

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 WPF (Windows Presentation Foundation).

  1. Otevřete sadu Visual Studio.

  2. V úvodním okně zvolte Vytvořit nový projekt.

    View the 'Create a new project' window

  3. Na obrazovce Vytvořit nový projekt vyhledejte "WPF", zvolte aplikaci WPF a pak zvolte Další.

    Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, and the 'WPF Application' project template highlighted.

  4. Na další obrazovce pojmenujte projekt HelloWPFApp a zvolte Další.

    Screenshot of the 'Configure your new project' dialog in Visual Studio with 'HelloWPFApp' entered in the Project name field.

  5. V okně Další informace by už měla být pro cílovou architekturu vybraná .NET Core 3.1. Pokud ne, vyberte .NET Core 3.1. Pak zvolte Vytvořit.

    Screenshot that shows the Additional information window in Visual Studio with .NET Core 3.1 selected as the target framework for the new project.

Visual Studio vytvoří projekt a řešení HelloWPFApp a Průzkumník řešení zobrazí různé soubory. Návrhář WPF zobrazuje návrhové zobrazení a zobrazení XAML MainWindow.xaml v rozděleném zobrazení. Rozdělovač můžete posunout tak, aby se zobrazilo více nebo méně zobrazení. Můžete se rozhodnout zobrazit jenom vizuální zobrazení nebo jenom zobrazení XAML.

WPF project and solution in the IDE

Poznámka:

Další informace o jazyku XAML (eXtensible Application Markup Language) najdete na stránce Přehled XAML pro WPF .

Poté, co jste projekt vytvořili, jej můžete upravit. Uděláte to tak, že v nabídce Zobrazení zvolíte okno Vlastnosti nebo stisknete klávesu F4. Potom můžete zobrazit a změnit možnosti pro položky projektu, ovládací prvky a další položky v aplikaci.

Properties window

  1. Otevřete sadu Visual Studio.

  2. V úvodním okně zvolte Vytvořit nový projekt.

    Screenshot of the start window in Visual Studio 2022 with the 'Create a new project' option highlighted.

  3. Na obrazovce Vytvořit nový projekt vyhledejte "WPF", zvolte aplikaci WPF a pak zvolte Další.

    Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, and the 'WPF Application' project template highlighted.

  4. Na další obrazovce pojmenujte projekt HelloWPFApp a zvolte Další.

    Screenshot that shows the 'Configure your new project' dialog in Visual Studio with 'HelloWPFApp' entered in the Project name field.

  5. V okně Další informace ověřte, že je pro cílovou architekturu vybraná rozhraní .NET 8.0. Pak zvolte Vytvořit.

    Screenshot that shows the Additional information window in Visual Studio with .NET 8.0 selected as the target framework for the new project.

Visual Studio vytvoří projekt a řešení HelloWPFApp a Průzkumník řešení zobrazí různé soubory. Návrhář WPF zobrazuje návrhové zobrazení a zobrazení XAML MainWindow.xaml v rozděleném zobrazení. Rozdělovač můžete posunout tak, aby se zobrazilo více nebo méně zobrazení. Můžete se rozhodnout zobrazit jenom vizuální zobrazení nebo jenom zobrazení XAML.

Screenshot of the HelloWPFApp project and solution in Solution Explorer, and the XAML and designer views of 'MainWindow.xaml' open in the WPF Designer.

Poznámka:

Další informace o jazyku XAML (eXtensible Application Markup Language) najdete na stránce Přehled XAML pro WPF .

Poté, co jste projekt vytvořili, jej můžete upravit. Uděláte to tak, že v nabídce Zobrazení zvolíte okno Vlastnosti nebo stisknete klávesu F4. Potom můžete zobrazit a změnit možnosti pro položky projektu, ovládací prvky a další položky v aplikaci.

Screenshot of the Properties window showing the Misc section of the Solution Properties for the HelloWPFApp project.

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

Pokud návrhář není otevřený, vyberte MainWindow.xaml a stisknutím kláves Shift+F7 otevřete návrháře.

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

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

  1. Stisknutím kombinace kláves Ctrl+Q aktivujte vyhledávací pole a zadejte Panel nástrojů. V seznamu výsledků zvolte Zobrazit > sadu nástrojů .

  2. V sadě nástrojů rozbalte uzel Běžných ovládacích prvků WPF a zobrazte ovládací prvek TextBlock.

    Toolbox with the TextBlock control highlighted

  3. Přidejte na návrhovou plochu ovládací prvek TextBlock tak, že vyberete položku TextBlock a přetáhnete ho do okna na návrhové ploše. Na střed ovládacího prvku v horní části okna. V sadě Visual Studio 2019 a novějších můžete pomocí červených pokynů ovládací prvek zacentrovat.

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

    TextBlock control on the MainWindow form

    Kód XAML by měl vypadat přibližně jako v následujícím příkladu:

    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
    </Grid>
    
  1. Stisknutím kombinace kláves Ctrl+Q aktivujte vyhledávací pole a zadejte Panel nástrojů. V seznamu výsledků zvolte Zobrazit > sadu nástrojů .

  2. V sadě nástrojů rozbalte uzel Běžných ovládacích prvků WPF a zobrazte ovládací prvek TextBlock.

    Screenshot of the Toolbox window with the TextBlock control selected in the list of Common WPF Controls.

  3. Přidejte na návrhovou plochu ovládací prvek TextBlock tak, že vyberete položku TextBlock a přetáhnete ho do okna na návrhové ploše. Na střed ovládacího prvku v horní části okna. Pokyny můžete použít ke středu ovládacího prvku.

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

    Screenshot of the TextBlock control on the design surface. Guidelines are shown for positioning and resizing the control.

    Kód XAML by měl vypadat přibližně jako v následujícím příkladu:

    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
    </Grid>
    

Přizpůsobení textu v bloku textu

  1. V zobrazení XAML vyhledejte kód pro TextBlock a změňte atribut Text z TextBox na Select a message option and then choose the Display button.

    Kód XAML by měl vypadat přibližně jako v následujícím příkladu:

    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
    </Grid>
    
  2. Pokud chcete, znovu nastavte objekt TextBlock na střed a uložte změny stisknutím ctrl +S nebo pomocí položky nabídky Soubor .

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

Přidání tlačítek přepínače

  1. V sadě nástrojů vyhledejte ovládací prvek RadioButton.

    Toolbox window with RadioButton control selected

  2. Přidejte dva ovládací prvky RadioButton na návrhovou plochu tak, že zvolíte položku RadioButton a přetáhnete ho do okna na návrhové ploše. Přesuňte tlačítka (tak, že je vyberete a použijete šipkové klávesy), aby se tlačítka zobrazovala vedle sebe pod ovládacím tlačítkem TextBlock. K zarovnání ovládacích prvků použijte červené pokyny.

    Okno aplikace by mělo vypadat takto:

    MainWindow form with TextBlock and two radio buttons

  3. V okně Vlastnosti levého ovládacího prvku RadioButton změňte vlastnost Name (vlastnost v horní části okna Properties ) na HelloButton.

    RadioButton properties window

  4. V okně Vlastnosti pravého ovládacího prvku RadioButton změňte vlastnost Name na GoodbyeButtona pak uložte změny.

Dále přidáte zobrazovaný text pro každý ovládací prvek RadioButton. Následující postup aktualizuje vlastnost Content ovládacího prvku RadioButton.

  1. V sadě nástrojů vyhledejte ovládací prvek RadioButton.

    Screenshot of the Toolbox window with the RadioButton control selected in the list of Common WPF Controls.

  2. Přidejte dva ovládací prvky RadioButton na návrhovou plochu tak, že zvolíte položku RadioButton a přetáhnete ho do okna na návrhové ploše. Přesuňte tlačítka (tak, že je vyberete a použijete šipkové klávesy), aby se tlačítka zobrazovala vedle sebe pod ovládacím tlačítkem TextBlock. Pokyny můžete použít k zarovnání ovládacích prvků.

    Okno aplikace by mělo vypadat takto:

    Screenshot of the Design window for Greetings.xaml, showing a TextBlock control and two RadioButton controls positioned on the design surface.

  3. V okně Vlastnosti levého ovládacího prvku RadioButton změňte vlastnost Name (vlastnost v horní části okna Properties ) na HelloButton.

    Screenshot of the Properties window for a RadioButton control. The value of the Name property has been changed to HelloButton.

  4. V okně Vlastnosti pravého ovládacího prvku RadioButton změňte vlastnost Name na GoodbyeButtona pak uložte změny.

Dále přidáte zobrazovaný text pro každý ovládací prvek RadioButton. Následující postup aktualizuje vlastnost Content ovládacího prvku RadioButton.

Přidání zobrazovaného textu pro každé přepínač

  1. Aktualizujte atribut Content pro dvě přepínače HelloButton a GoodbyeButton na "Hello" a "Goodbye" v XAML. Kód XAML by teď měl vypadat podobně jako v následujícím příkladu:

    <Grid>
         <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
         <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
         <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
    </Grid>
    

Nastavení přepínače, které má být ve výchozím nastavení zaškrtnuté

V tomto kroku nastavíme funkci HelloButton tak, aby byla ve výchozím nastavení zaškrtnutá, aby byla vždy vybrána jedna ze dvou přepínačů.

  1. V zobrazení XAML vyhledejte kód pro HelloButton.

  2. Přidejte atribut IsChecked a nastavte ho na Hodnotu True. Konkrétně přidejte IsChecked="True".

    Kód XAML by teď měl vypadat podobně jako v následujícím příkladu:

    <Grid>
         <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
         <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
         <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
    </Grid>
    

Posledním prvkem uživatelského rozhraní, který přidáte, je ovládací prvek Button .

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

  1. V sadě nástrojů najděte ovládací prvek Tlačítko a potom ho přidejte na návrhovou plochu pod ovládacími prvky RadioButton přetažením do formuláře v návrhovém zobrazení. Pokud používáte Visual Studio 2019 nebo novější, červená čára vám pomůže na střed ovládacího prvku.

  2. V zobrazení XAML změňte hodnotu obsahu ovládacího prvku Tlačítko z Content="Button" na Content="Display"a uložte změny.

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

    MainWindow form with control labels

    Kód XAML by teď měl vypadat podobně jako v následujícím příkladu:

    <Grid>
         <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
         <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
         <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
         <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
    </Grid>
    
  1. V sadě nástrojů najděte ovládací prvek Tlačítko a potom ho přidejte na návrhovou plochu pod ovládacími prvky RadioButton přetažením do formuláře v návrhovém zobrazení. Pokyny vám můžou pomoct na střed ovládacího prvku.

  2. V zobrazení XAML změňte hodnotu obsahu ovládacího prvku Tlačítko z Content="Button" na Content="Display"a uložte změny.

    Okno by mělo vypadat podobně jako na následujícím snímku obrazovky.

    Screenshot of the Design window for Greetings.xaml showing a TextBlock control, two RadioButton controls labeled 'Hello' and 'Goodbye', and a button labeled 'Display'.

    Kód XAML by teď měl vypadat podobně jako v následujícím příkladu:

    <Grid>
         <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
         <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
         <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
         <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
    </Grid>
    

Přidání kódu na tlačítko zobrazení

Když se tato aplikace spustí, zobrazí se po výběru přepínače uživatele okno se zprávou a pak zvolí tlačítko Zobrazit . Jedno okno se zprávou se zobrazí pro Hello a další se zobrazí pro Goodbye. Chcete-li toto chování vytvořit, přidáte kód do Button_Click události v MainWindow.xaml.cs.

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

    Otevře se mainWindow.xaml.cs s kurzorem Button_Click v události.

    private void Button_Click(object sender, RoutedEventArgs e)
    {
    
    }
    
  2. Zadejte následující kód:

    if (HelloButton.IsChecked == true)
    {
         MessageBox.Show("Hello.");
    }
    else if (GoodbyeButton.IsChecked == true)
    {
        MessageBox.Show("Goodbye.");
    }
    
  3. Uložte aplikaci.

Když se tato aplikace spustí, zobrazí se po výběru přepínače uživatele okno se zprávou a pak zvolí tlačítko Zobrazit . Jedno okno se zprávou se zobrazí pro Hello a další se zobrazí pro Goodbye. Chcete-li toto chování vytvořit, přidáte kód do Button_Click události v MainWindow.xaml.cs.

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

    Otevře se mainWindow.xaml.cs s kurzorem Button_Click v události.

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

    Když dvakrát kliknete na tlačítko Zobrazit , Click="Button_Click" přidá se do XAML.

    Kód XAML by teď měl vypadat podobně jako v následujícím příkladu:

    <Grid>
         <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
         <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
         <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
         <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
    </Grid>
    
  2. Zadejte následující kód:

    if (HelloButton.IsChecked == true)
    {
         MessageBox.Show("Hello.");
    }
    else if (GoodbyeButton.IsChecked == true)
    {
        MessageBox.Show("Goodbye.");
    }
    
  3. Uložte aplikaci.

Ladění a testování aplikace

Dále ladíte aplikaci a vyhledáte chyby a otestujete, že se obě okna zpráv zobrazují správně. Následující pokyny vám řeknou, jak sestavit a spustit ladicí program, ale později si můžete přečíst sestavení aplikace WPF (WPF) a ladění WPF další informace.

Změna názvu MainWindow.xaml

Dáme MainWindow konkrétnější název. V Průzkumník řešení klikněte pravým tlačítkem na MainWindow.xaml a zvolte Přejmenovat. Přejmenujte soubor na Greetings.xaml.

Vyhledání a oprava chyb

V tomto kroku zjistíte chybu, kterou jsme dříve způsobili změnou názvu souboru MainWindow.xaml .

Spusťte ladění a vyhledejte chybu.

  1. Ladicí program spusťte stisknutím klávesy F5 nebo výběrem možnosti Ladit a pak spusťte ladění.

    Zobrazí se okno Režim přerušení a výstupníokno indikuje, že došlo k výluce IOException: Nelze najít prostředek mainwindow.xaml.

    IOException message

  2. Zastavte ladicí program tak, že zvolíte >Ladění zastavit ladění.

Přejmenovali jsme MainWindow.xaml na Greetings.xaml, ale kód stále odkazuje na MainWindow.xaml jako spouštěcí identifikátor URI aplikace, takže projekt nejde spustit.

  1. Ladicí program spusťte stisknutím klávesy F5 nebo výběrem možnosti Ladit a pak spusťte ladění.

    Zobrazí se okno Režim přerušení a výstupníokno indikuje, že došlo k výluce IOException: Nelze najít prostředek mainwindow.xaml.

    Screenshot of the Output window showing a System.IO.IOException with the message, Cannot locate resource mainwindow.xaml.

  2. Zastavte ladicí program tak, že zvolíte >Ladění zastavit ladění.

Na začátku tohoto kurzu jsme přejmenovali MainWindow.xaml na Greetings.xaml , ale kód stále odkazuje na MainWindow.xaml jako spouštěcí identifikátor URI pro aplikaci, takže projekt nejde spustit.

Zadání souboru Greetings.xaml jako spouštěcího identifikátoru URI

  1. V Průzkumník řešení otevřete soubor App.xaml.

  2. Přejděte StartupUri="MainWindow.xaml" na StartupUri="Greetings.xaml"a uložte změny.

Jako volitelný krok zabrání nejasnostem při změně názvu okna aplikace tak, aby odpovídalo tomuto novému názvu.

  1. V Průzkumník řešení otevřete soubor Greetings.xaml, který jste právě přejmenovali.

  2. Změňte hodnotu vlastnosti Window.Title z Title="MainWindow" na Title="Greetings"a uložte změny.

Znovu spusťte ladicí program (stiskněte klávesu F5). Teď byste měli vidět okno Greetings vaší aplikace.

Screenshot of running app

Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.

Teď zavřete okno aplikace a zastavte ladění.

Ladění pomocí zarážek

Kód můžete otestovat během ladění přidáním některých zarážek. Zarážky můžete přidat tak, že kliknete >na levý okraj editoru vedle řádku kódu, ke kterému chcete přerušení dojít, nebo stisknutím klávesy F9.

Přidání zarážek

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

  2. Pokud chcete přidat zarážku z nabídky, vyberte Ladit a potom Přepnout 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. Stisknutím klávesy F9 přidejte zarážku a stisknutím klávesy F5 spusťte ladění.

  5. V okně Pozdravy zvolte přepínač Hello a pak zvolte tlačítko Zobrazit.

    Čára MessageBox.Show("Hello.") je zvýrazněná žlutou barvou. V dolní části integrovaného vývojového prostředí jsou okna Automatické hodnoty, Místní hodnoty a Kukátka ukotvená na levé straně a zásobník volání, zarážky, výjimky Nastavení, příkaz, okamžité a výstupní okna jsou ukotvena společně na pravé straně.

    Breakpoint in the debugger

  6. Na řádku nabídek zvolte Ladit>krok ven.

    Aplikace obnoví provádění a zobrazí se okno se zprávou "Hello".

  7. Kliknutím na tlačítko OK v okně zprávy ho zavřete.

  8. V okně Pozdravy zvolte přepínač Sbohem a pak zvolte tlačítko Zobrazit.

    Čára MessageBox.Show("Goodbye.") je zvýrazněná žlutou barvou.

  9. Pokud chcete pokračovat v ladění, zvolte klávesu F5 . Když se zobrazí okno se zprávou, zavřete ho kliknutím na tlačítko OK v poli zprávy.

  10. Zavřete okno aplikace a zastavte ladění.

  11. Na řádku nabídek zvolte Ladit>Zakázat všechny zarážky.

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

  2. Pokud chcete přidat zarážku z nabídky, vyberte Ladit a potom Přepnout 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. Stisknutím klávesy F9 přidejte zarážku a stisknutím klávesy F5 spusťte ladění.

  5. V okně Pozdravy zvolte přepínač Hello a pak zvolte tlačítko Zobrazit.

    Čára MessageBox.Show("Hello.") je zvýrazněná žlutou barvou. V dolní části integrovaného vývojového prostředí jsou okna Automatické hodnoty, Místní hodnoty a Kukátka ukotvená na levé straně a zásobník volání, zarážky, výjimky Nastavení, příkaz, okamžité a výstupní okna jsou ukotvena společně na pravé straně.

    Screenshot of a debug session in Visual Studio. The code window for Greetings.xaml.cs shows execution stopped at a breakpoint with a line highlighted in yellow.

  6. Na řádku nabídek zvolte Ladit>krok ven.

    Aplikace obnoví provádění a zobrazí se okno se zprávou "Hello".

  7. Kliknutím na tlačítko OK v okně zprávy ho zavřete.

  8. V okně Pozdravy zvolte přepínač Sbohem a pak zvolte tlačítko Zobrazit.

    Čára MessageBox.Show("Goodbye.") je zvýrazněná žlutou barvou.

  9. Pokud chcete pokračovat v ladění, zvolte klávesu F5 . Když se zobrazí okno se zprávou, zavřete ho kliknutím na tlačítko OK v poli zprávy.

  10. Zavřete okno aplikace a zastavte ladění.

  11. Na řádku nabídek zvolte Ladit>Zakázat všechny zarážky.

Zobrazení reprezentace prvků uživatelského rozhraní

Ve spuštěné aplikaci by se měl zobrazit widget, který se zobrazí v horní části okna. Widget je pomocník modulu runtime, který poskytuje rychlý přístup k některým užitečným funkcím ladění. Vyberte první tlačítko, přejít do živého vizuálního stromu. Mělo by se zobrazit okno se stromem, který obsahuje všechny vizuální prvky stránky. Rozbalte uzly a vyhledejte tlačítka, která jste přidali.

Screenshot of Live Visual Tree window

Screenshot of the Live Visual Tree window, showing the tree of visual elements in HelloWPFApp.exe while it's running.

Sestavení verze pro vydání aplikace

Teď, když jste ověřili, že všechno funguje, můžete připravit sestavení vydané verze aplikace.

  1. V hlavní nabídce vyberte Sestavit>čisté řešení, abyste odstranili přechodné soubory a výstupní soubory vytvořené během předchozích sestavení. Tento krok není povinný, ale vyčistí výstupy sestavení ladění.

  2. Pomocí ovládacího prvku rozevíracího seznamu na panelu nástrojů změňte konfiguraci sestavení pro HelloWPFApp z Debug na Release (v současné době říká Debug).

  3. Sestavte řešení tak, že zvolíte Sestavit>řešení.

Blahopřejeme k dokončení tohoto kurzu! Soubor .exe, který jste vytvořili ve svém řešení a adresáři projektu (...\HelloWPFApp\HelloWPFApp\bin\Release).

Další kroky

Blahopřejeme k dokončení tohoto kurzu! Další informace najdete v následujících kurzech.

Viz také