Udostępnij za pośrednictwem

Debugowanie XAML w Blend

  • Artykuł

Narzędzia w programie Blend for Visual Studio umożliwiają debugowanie kodu XAML w aplikacji. Podczas tworzenia projektu wszystkie błędy są wyświetlane na panelu Wyniki . Kliknij dwukrotnie błąd, aby zlokalizować znaczniki związane z błędem. Jeśli potrzebujesz więcej miejsca do pracy, możesz ukryć panel Wyniki , naciskając klawisz F12.

Błędy składniowe

Błędy składni występują, jeśli pliki XAML lub pliki związane z kodem nie są zgodne z regułami formatowania języka. Opis błędu może pomóc zrozumieć, jak go naprawić. Lista określa również nazwę pliku i numer wiersza, w którym występuje błąd. Błędy XAML są wyświetlane na karcie Znaczniki na panelu Wyniki .

Napiwek

XAML to język znaczników oparty na języku XML i jest zgodny z regułami składni XML.

Oto niektóre typowe przyczyny błędów składni XAML:

  • Słowo kluczowe zostało błędnie napisane lub wielkie litery jest błędne.

  • W cudzysłowie brakuje atrybutów lub ciągów tekstowych.

  • Brak tagu zamykającego elementu XAML.

  • Element XAML istnieje w lokalizacji, w której jest niedozwolona.

Aby uzyskać więcej informacji na temat typowej składni XAML, zobacz Przewodnik po podstawowej składni języka XAML.

Możesz również zidentyfikować i rozwiązać proste błędy składni kodu, błędy kompilacji i błędy czasu wykonywania w programie Blend. Błędy związane z kodem mogą być jednak łatwiejsze do zidentyfikowania i rozwiązania w programie Visual Studio.

Debugowanie przykładowego kodu XAML

Poniższy przykład przeprowadzi Cię przez prostą sesję debugowania XAML w programie Blend.

Aby utworzyć projekt

  1. W programie Blend otwórz menu Plik , a następnie kliknij pozycję Nowy projekt.

    W oknie dialogowym Nowy projekt zostanie wyświetlona lista typów projektów po lewej stronie. Po kliknięciu typu projektu szablony projektów, które są skojarzone z nim, są wyświetlane po prawej stronie.

  2. Na liście typów projektów kliknij pozycję Uniwersalne systemu Windows.

  3. Na liście szablonów projektów kliknij pozycję Pusta aplikacja (uniwersalny system Windows).

  4. W polu tekstowym Nazwa wpisz DebuggingSample.

  5. W polu tekstowym Lokalizacja sprawdź lokalizację projektu.

  6. Na liście Język kliknij pozycję Visual C#, a następnie kliknij przycisk OK, aby utworzyć projekt.

  7. Kliknij prawym przyciskiem myszy powierzchnię projektową, a następnie kliknij pozycję Wyświetl źródło , aby przełączyć się na widok Podział .

  8. Skopiuj poniższy kod, klikając link Kopiuj w prawym górnym rogu kodu.

    <Grid HorizontalAlignment="Left" Height="222" VerticalAlignment="Top>
     <Button content="Button" x:Mame="Home" HorizontalAlignment="Left" VerticalAlignment="Top"/>
     <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,38,0,0">
     <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,75,0,0"/>
     <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,112,0,0"/>
     <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top Margin="0,149,0,0"/>
</Grid>

  9. Znajdź domyślną siatkę i wklej kod między otwierającymi i zamykającymi tagami siatki. Po zakończeniu kod powinien wyglądać następująco:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
     <Grid HorizontalAlignment="Left" Height="222" VerticalAlignment="Top>
          <Button content="Button" x:Mame="Home" HorizontalAlignment="Left" VerticalAlignment="Top"/>
          <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,38,0,0">
          <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,75,0,0"/>
          <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,112,0,0"/>
          <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top Margin="0,149,0,0"/>
     </Grid>
</Grid>

  10. Naciśnij klawisze Ctrl+Shift+B, aby skompilować projekt.

    Zostanie wyświetlony komunikat o błędzie informujący o tym, że nie można skompilować projektu, a w dolnej części aplikacji zostanie wyświetlony panel Wyniki zawierający listę błędów.

    Debug XAML in Blend for Visual Studio

Rozwiązywanie problemów z błędami XAML

Po wykryciu błędów XAML na powierzchni projektowej zostanie wyświetlony alert zawierający nieprawidłowy znacznik. Po rozwiązaniu błędów lista błędów na panelu Wyniki zostanie zaktualizowana. Po usunięciu wszystkich błędów powierzchnia projektowa jest włączona, a aplikacja jest wyświetlana na powierzchni projektowej.

Aby rozwiązać problemy z błędami XAML

  1. Kliknij dwukrotnie pierwszy błąd na liście. Opis to "Wartość "<" jest nieprawidłowa w atrybucie. Po dwukrotnym kliknięciu błędu wskaźnik znajdzie odpowiednią lokalizację w kodzie. Button Powyższy element < jest prawidłowy, a nie atrybut sugerowany w komunikacie o błędzie. Jeśli spojrzysz na poprzedni wiersz kodu, zauważysz, że brakuje cudzysłowów zamykających atrybutu Top . Wpisz znaki cudzysłowu zamykającego. Zwróć uwagę, że lista błędów na panelu Wyniki zostanie zaktualizowana, aby odzwierciedlić zmiany.

  2. Kliknij dwukrotnie opis "0" jest nieprawidłowy na początku nazwy. Margin="0,149,0,0" wydaje się być dobrze sformułowane. Należy jednak zauważyć, że kodowanie Margin kolorów nie jest zgodne z innymi wystąpieniami Margin w kodzie. Ponieważ w poprzednim parze nazwa/wartość () brakuje znaków cudzysłowu zamykającego,VerticalAlignment="TopMargin=" jest odczytywany jako część wartości poprzedniego atrybutu, a wartość 0 jest odczytywana jako początek pary nazwa/wartość. Wpisz znaki cudzysłowu zamykającego dla .Top Lista błędów na panelu Wyniki zostanie zaktualizowana w celu odzwierciedlenia zmian.

  3. Kliknij dwukrotnie pozostały błąd", "Zamykający tag XML "Przycisk" jest niezgodny. Wskaźnik znajduje się w zamykającym tagu Grid (</Grid>), sugerując, że błąd znajduje się wewnątrz Grid obiektu. Zwróć uwagę, że w drugim Button obiekcie brakuje tagu zamykającego. Po dodaniu zamykającego /okienka zostanie zaktualizowana lista Wyników . Po usunięciu tych początkowych błędów zidentyfikowano dwa dodatkowe błędy.

  4. Kliknij dwukrotnie pozycję "Zawartość elementu członkowskiego nie jest rozpoznawana lub jest niedostępna". Element c in content powinien mieć wielkie litery. Zastąp małe litery "c" wielkimi literami "c".

  5. Kliknij dwukrotnie pozycję "Właściwość Mame nie istnieje w http://schemas.microsoft.com/winfx/2006/xaml przestrzeni nazw". "M" w "Mame" powinien być "N". Zastąp ciąg "M" ciągiem "N". Po przeanalizowaniu kodu XAML aplikacja zostanie wyświetlona na powierzchni projektowej.

    Debugging XAML in Blend for Visual Studio

    Naciśnij klawisze Ctrl+Shift+B, aby skompilować projekt i potwierdzić, że nie ma żadnych pozostałych błędów.

Debugowanie w programie Visual Studio

Możesz otworzyć projekty Blend w programie Visual Studio, aby łatwiej debugować kod w aplikacji. Aby otworzyć projekt Blend w programie Visual Studio, kliknij prawym przyciskiem myszy projekt w panelu Projekty , a następnie kliknij polecenie Edytuj w programie Visual Studio. Po zakończeniu sesji debugowania w programie Visual Studio naciśnij klawisze Ctrl+Shift+S, aby zapisać wszystkie zmiany, a następnie wróć do programu Blend. Zostanie wyświetlony monit o ponowne załadowanie projektu. Kliknij przycisk Tak, aby kontynuować pracę w programie Blend.

Aby uzyskać więcej informacji na temat debugowania aplikacji, zobacz Debugowanie aplikacji platformy UWP w programie Visual Studio.

Uzyskaj pomoc

Jeśli potrzebujesz dodatkowej pomocy przy debugowaniu aplikacji Blend, możesz wyszukać fora społeczności aplikacji platformy UWP pod kątem wpisów związanych z problemem lub opublikować pytanie.