Instruktaż: Projektowanie na ekranie

W tym instruktażu przedstawiono sposób używania projektanta ekranu LightSwitch, aby utworzyć ekran wyświetlający dane klienta z przykładowej bazy danych Northwind.Projektant ekranu jest kanwą do projektowania wizualnego, w której można zmodyfikować wygląd ekranu.

W tym instruktażu przedstawiono sposób wykonania następujących zadań:

• Tworzenie ekranu

• Zmiana układu ekranu

• Usuwanie pól z ekranu

• Zmiana kolejności elementów

• Zmiana nazwy wyświetlanej elementu

• Zmiana typu kontrolki elementu

• Dostosowywanie ekranu w działającej aplikacji

Wymagania wstępne

Instruktaż ten zakłada, że przykładowa baza danych Northwind jest zainstalowana na komputerze i że została dodana jako źródło danych w projekcie.

• Aby uzyskać informacje dotyczące sposobu instalowania przykładowej bazy danych Northwind, zobacz Instalacja bazy danych Northwind próbki.

• Informacje o dodawaniu przykładowej bazy danych Northwind jako źródła danych projektu, zobacz Połączenie z danymi.

Tworzenie ekranu

W tej sekcji przedstawiono sposób tworzenia ekranu, aby wyświetlić dane klienta z przykładowej bazy danych Northwind.Ekran jest podzielony na dwie części.Pierwsza część wyświetla listę podsumowującą wszystkich klientów; w innych częściach są wyświetlane szczegóły dotyczące wybranego klienta..

Aby utworzyć ekran

1. W Eksploratorze rozwiązań wybierz opcję Ekrany.

2. W menu Projekt kliknij opcję Dodaj ekran.

   Pojawi się okno dialogowe Dodaj nowy ekran.

3. W oknie dialogowym Dodaj nowy ekran w obszarze Wybierz szablon ekranu wybierz opcję Ekran listy i szczegóły.

4. W obszarze Nazwa ekranu wpisz Customers.

5. Z listy rozwijanej w obszarze Dane ekranu wybierz <DataSourceName>.Customers.

6. W obszarze Dodatkowe dane do dołączenia, wybierz opcję Customer Details i Customer Orders.

   Spowoduje to dodanie pól jednostki Customer do części szczegółów ekranu, wraz z listą zamówień, które zostały wprowadzone przez klienta.

   Na następującej ilustracji pokazano pojawienie się okna dialogowego po wykonaniu czynności opisanych w tej sekcji.

   

7. Kliknij OK, aby utworzyć ekran.

   Pojawi się Projektant ekranu.

Zmienianie układu ekranu

Ekran Listy i szczegóły zawiera dwie kolumny.Lewa kolumna jest listą klientów.Prawa kolumna zawiera dwa wiersze.Górny wiersz zawiera szczegóły wybranego klienta, a dolny wiersz zawiera zamówienia, które są związane z wybranym klientem.Drzewo zawartości ekranu projektanta ekranu pokazuje, z czego składa się lista.

W tej sekcji przedstawiono sposób modyfikowania układu ekranu, tak aby ekran zawierał dwa wiersze zamiast dwóch kolumn.Górny wiersz będzie zawierać listę klientów.Dolny wiersz będzie zawierać dwie kolumny.Lewa kolumna będzie zawierać szczegóły wybranego klienta, a prawa kolumna będzie zawierać zamówienia, które są związane z wybranym klientem.

Aby zmienić układ listy

1. W Drzewie zawartości ekranuProjektanta ekranu, zmień układu węzła Customers z Układu kolumn na Układ wierszy.Aby to zrobić, kliknij strzałkę w dół, który pojawia się obok węzła Customers.Następnie na liście rozwijanej kliknij Układ wierszy.

2. Zmiana układu Kolumny szczegółów z Układu wierszy na Układ kolumn.Aby to zrobić, kliknij strzałkę w dół, który pojawia się obok węzła Kolumna szczegółów, a następnie kliknij Układ kolumn.

Usuwanie pól z ekranu

Domyślnie obszar ekranu o nazwie Kolumna szczegółów, który wyświetla szczegóły klienta, wyświetla wszystkie pola ze źródła danych.Jeśli nie chcesz wyświetlać wszystkich pól, możesz usunąć te, które nie mają być wyświetlane.Na przykład, poniższe kroki pokazują jak usunąć pole Country.

Aby usunąć pola z ekranu

1. W Drzewie zawartości ekranu, rozwiń węzeł Szczegóły klienta, jeśli nie jest rozwinięty.

2. Kliknij pole Country, następnie na pasku poleceń Projektanta ekranu kliknij Usuń.

Zmienianie kolejności pól

Poniższe kroki pokazują jak zmienić kolejność wyświetlania pól, na przykład pola CustomerID i pola Postal Code.

Aby zmienić kolejność pól

1. W Drzewie zawartości ekranu, rozwiń węzeł Szczegóły klienta, jeśli nie jest rozwinięty.

2. Aby przenieść pole CustomerID na dół kolumny szczegółów, przeciągnij go pod pole Fax.

3. Aby przenieść pole Kod pocztowy na pozycję bezpośrednio powyżej Customer ID, przeciągnij je między pole Fax i pole CustomerID.

Zmienianie typu kontrolki pola

Można dostosować sposób wyświetlania pola użytkownikowi.Na przykład można ustawić aby pole tekstowe było wyświetlane jako TextBox lub jako Label.Poniższe kroki pokazują jak zmienić sposób wyświetlania pola na Label tak, aby użytkownik nie mógł modyfikować jego wartości.

Aby zmienić typ kontrolki pola

1. W Drzewie zawartości ekranu, rozwiń węzeł Szczegóły klienta, jeśli nie jest rozwinięty.

2. Zaznacz pole Customer ID, a następnie na liście rozwijanej zaznacz Label.

   Można powtórzyć ten krok, aby zmienić pozostałe pola.

3. Aby przetestować zmiany, naciśnij klawisz F5, aby uruchomić aplikację.

Dostosowywanie ekranu w działającej aplikacji

Można również dostosować ekran, gdy aplikacja jest uruchomiona.Na przykład można usunąć pola, zmienić kolejność pól i zmienić właściwości, takie jak typ kontrolki lub wyrównanie etykiety.

Aby dostosować ekran w działającej aplikacji

1. Jeżeli aplikacja nie jest jeszcze uruchomiona, naciśnij klawisz F5, aby ją uruchomić.

2. Na pasku poleceń ekranu kliknij Projektuj ekran.

3. Na ekranie Tryb dostosowywania usuń pole Customer ID z kolumny szczegółów, wybierając je w węźle Customer Details, a następnie klikając przycisk Usuń ().

4. Przenieś pole Fax pod pole Postal Code przez wybranie go w węźle Customer Details i kliknięcie przycisku Przenieś w dół ().

5. Zmień nazwę pola Phone na Phone Number wybierając je w węźle Customer Details a następnie w oknie Właściwości zmień wartość właściwości Nazwa wyświetlana na Phone Number.

6. Zmień typ wyświetlania pola Phone Number na Label wybierając pole w węźle Customer Details, a następnie w oknie Właściwości, klikając właściwość Typ formantu i wybierając wartość Label.

7. Zmień wyrównanie etykiet w kolumnie szczegóły.Zaznacz pierwsze pole w węźle Customer Details, w tym przypadku pole Company Name.W oknie Właściwości kliknij właściwość Pozycja etykiety i wybierz wartość Wyrównana do prawej.Powtórz ten krok dla wszystkich pól w węźle Customer Details.

8. Kliknij przycisk Zapisz w celu zapisania zmian.Teraz aplikacja wyświetla wprowadzone przed chwilą zmiany.

Następne kroki

Domyślnie po wybraniu źródła danych dla ekranu wyświetlane są wszystkie dane w źródle.Jeśli chcesz wyświetlić podzbiór danych, możesz utworzyć zapytanie do definiowania danych do wyświetlenia.Aby uzyskać więcej informacji, zobacz Jak: projektowania kwerendy przy użyciu projektanta kwerend.

Zobacz też

Inne zasoby

Ekrany: Interfejs użytkownika aplikacji