Pliki .xib na platformie Xamarin.Mac

W tym artykule opisano pracę z plikami xib utworzonymi w narzędziu Xcode Interface Builder w celu tworzenia i obsługi interfejsów użytkownika dla aplikacji Xamarin.Mac.

Uwaga

Preferowanym sposobem tworzenia interfejsu użytkownika dla aplikacji platformy Xamarin.Mac jest tworzenie scenorysów. Ta dokumentacja została pozostawiona ze względów historycznych i do pracy ze starszymi projektami platformy Xamarin.Mac. Aby uzyskać więcej informacji, zobacz dokumentację Wprowadzenie do scenorysów .

Omówienie

Podczas pracy z językami C# i .NET w aplikacji platformy Xamarin.Mac masz dostęp do tych samych elementów interfejsu użytkownika i narzędzi, które wykonuje deweloper pracujący w Objective-C środowisku I Xcode . Ponieważ platforma Xamarin.Mac integruje się bezpośrednio z narzędziem Xcode, możesz użyć narzędzia Interface Builder środowiska Xcode do tworzenia i obsługi interfejsów użytkownika (lub opcjonalnie tworzenia ich bezpośrednio w kodzie języka C#).

Plik .xib jest używany przez system macOS do definiowania elementów interfejsu użytkownika aplikacji (takich jak Menu, Windows, Widoki, Etykiety, Pola tekstowe), które są tworzone i przechowywane graficznie w narzędziu Xcode Interface Builder.

W tym artykule omówimy podstawy pracy z plikami xib w aplikacji platformy Xamarin.Mac. Zdecydowanie zaleca się, aby najpierw pracować za pośrednictwem artykułu Hello, Mac , ponieważ obejmuje ona kluczowe pojęcia i techniki, których będziemy używać w tym artykule.

Warto zapoznać się z sekcją Uwidacznianie klas/metod Objective-C języka C# w sekcji dokumentu Xamarin.Mac Internals , a także objaśnienie Register atrybutów i Export używanych do podłączania klas języka C# do Objective-C obiektów i elementów interfejsu użytkownika.

Wprowadzenie do narzędzi Xcode i Interface Builder

W ramach programu Xcode firma Apple utworzyła narzędzie o nazwie Interface Builder, które umożliwia wizualne tworzenie interfejsu użytkownika w projektancie. Platforma Xamarin.Mac bezproblemowo integruje się z narzędziem Interface Builder, umożliwiając tworzenie interfejsu użytkownika przy użyciu tych samych narzędzi, które Objective-C wykonują użytkownicy.

Składniki programu Xcode

Po otwarciu pliku xib w programie Xcode z Visual Studio dla komputerów Mac zostanie otwarty z nawigatorem projektu po lewej stronie, hierarchią interfejsu i edytorem interfejsu w środku oraz sekcją Właściwości i narzędzia po prawej stronie:

Przyjrzyjmy się temu, co robi każda z tych sekcji Xcode i jak będzie ich używać do tworzenia interfejsu dla aplikacji Xamarin.Mac.

Nawigacja po projekcie

Po otwarciu pliku xib do edycji w programie Xcode Visual Studio dla komputerów Mac tworzy plik projektu Xcode w tle w celu komunikowania zmian między samym sobą a programem Xcode. Później po przełączeniu się z powrotem do Visual Studio dla komputerów Mac z programu Xcode wszelkie zmiany wprowadzone w tym projekcie są synchronizowane z projektem Xamarin.Mac przez Visual Studio dla komputerów Mac.

Sekcja Nawigacja nad projektem umożliwia nawigowanie między wszystkimi plikami, które tworzą ten podkładka projektu Xcode. Zazwyczaj interesuje Cię tylko pliki .xib na tej liście, takie jak MainMenu.xib i MainWindow.xib.

Hierarchia interfejsu

Sekcja Hierarchia interfejsu umożliwia łatwy dostęp do kilku kluczowych właściwości interfejsu użytkownika, takich jak jego symbole zastępcze i główne okno. Możesz również użyć tej sekcji, aby uzyskać dostęp do poszczególnych elementów (widoków), które składają się na interfejs użytkownika i dostosować sposób ich zagnieżdżenia, przeciągając je w hierarchii.

Edytor interfejsu

Sekcja Edytor interfejsów zawiera powierzchnię, na której graficznie układasz interfejs użytkownika. Przeciągnij elementy z sekcji Biblioteka sekcji Właściwości i narzędzia , aby utworzyć projekt. Podczas dodawania elementów interfejsu użytkownika (widoków) do powierzchni projektowej zostaną one dodane do sekcji Hierarchia interfejsu w kolejności wyświetlania ich w Edytorze interfejsów.

Właściwości i narzędzia

Sekcja Właściwości i narzędzia jest podzielona na dwie główne sekcje, z którymi będziemy pracować, Właściwości (nazywane również inspektorami) i Biblioteką:

Początkowo ta sekcja jest prawie pusta, jednak jeśli wybierzesz element w Edytorze interfejsu lub hierarchii interfejsu, sekcja Właściwości zostanie wypełniona informacjami o danym elemecie i właściwościach, które można dostosować.

W sekcji Właściwości znajduje się 8 różnych kart inspektora, jak pokazano na poniższej ilustracji:

Od lewej do prawej są następujące karty:

• File Inspector — Inspektor plików zawiera informacje o plikach, takie jak nazwa pliku i lokalizacja edytowanego pliku Xib.
• Szybka pomoc — karta Szybka pomoc zawiera kontekstową pomoc opartą na tym, co zostało wybrane w programie Xcode.
• Identity Inspector — Inspektor tożsamości zawiera informacje o wybranej kontrolce/widoku.
• Inspektor atrybutów — Inspektor atrybutów umożliwia dostosowanie różnych atrybutów wybranej kontrolki/widoku.
• Inspektor rozmiaru — Inspektor rozmiaru umożliwia kontrolowanie rozmiaru i zmiany rozmiaru wybranej kontrolki/widoku.
• Inspektor połączeń — Inspektor połączeń pokazuje połączenia gniazd i akcji wybranych kontrolek. Przeanalizujemy punkty sprzedaży i akcje za chwilę.
• Bindings Inspector — Inspektor powiązań umożliwia skonfigurowanie kontrolek tak, aby ich wartości zostały automatycznie powiązane z modelami danych.
• View Effects Inspector — Inspektor efektów widoku umożliwia określenie efektów dla kontrolek, takich jak animacje.

W sekcji Biblioteka można znaleźć kontrolki i obiekty do umieszczenia w projektancie w celu graficznego skompilowania interfejsu użytkownika:

Teraz, gdy znasz środowisko IDE Xcode i narzędzie Interface Builder, przyjrzyjmy się jego użyciu do utworzenia interfejsu użytkownika.

Tworzenie i obsługa okien w środowisku Xcode

Preferowaną metodą tworzenia interfejsu użytkownika aplikacji platformy Xamarin.Mac jest użycie scenorysów (zobacz dokumentację Wprowadzenie do scenorysów , aby uzyskać więcej informacji), a w związku z tym każdy nowy projekt uruchomiony na platformie Xamarin.Mac będzie domyślnie używać scenorysów.

Aby przełączyć się na przy użyciu interfejsu użytkownika opartego na xib, wykonaj następujące czynności:

1. Otwórz Visual Studio dla komputerów Mac i uruchom nowy projekt Xamarin.Mac.

2. W okienku rozwiązania kliknij prawym przyciskiem myszy projekt i wybierz polecenie Dodaj>nowy plik...

3. Wybierz pozycję Kontroler systemu Windows dla komputerów Mac>:

   

4. Wprowadź MainWindow nazwę i kliknij przycisk Nowy :

   

5. Ponownie kliknij prawym przyciskiem myszy projekt i wybierz polecenie Dodaj>nowy plik...

6. Wybierz menu główne dla komputerów Mac>:

   

7. Pozostaw nazwę jako MainMenu i kliknij przycisk Nowy .

8. W okienku rozwiązania wybierz plik Main.storyboard, kliknij prawym przyciskiem myszy i wybierz polecenie Usuń:

   

9. W oknie dialogowym Usuń kliknij przycisk Usuń :

   

10. W okienku rozwiązania kliknij dwukrotnie plik Info.plist, aby otworzyć go do edycji.

11. Wybierz MainMenu z listy rozwijanej Główny interfejs :

    

12. W okienku rozwiązania kliknij dwukrotnie plik MainMenu.xib, aby otworzyć go do edycji w narzędziu Interface Builder programu Xcode.

13. W inspektorze biblioteki wpisz object w polu wyszukiwania, a następnie przeciągnij nowy obiekt na powierzchnię projektową:

    

14. W inspektorze tożsamości wprowadź AppDelegate dla klasy:

    

15. Wybierz pozycję Właściciel pliku z hierarchii interfejsu, przejdź do Inspektora połączenia i przeciągnij wiersz z delegata do AppDelegate obiektu właśnie dodanego do projektu:

    

16. Zapisz zmiany i wróć do Visual Studio dla komputerów Mac.

Po wprowadzeniu wszystkich tych zmian zmodyfikuj plik AppDelegate.cs i wprowadź go w następujący sposób:

using AppKit;
using Foundation;

namespace MacXib
{
    [Register ("AppDelegate")]
    public class AppDelegate : NSApplicationDelegate
    {
        public MainWindowController mainWindowController { get; set; }

        public AppDelegate ()
        {
        }

        public override void DidFinishLaunching (NSNotification notification)
        {
            // Insert code here to initialize your application
            mainWindowController = new MainWindowController ();
            mainWindowController.Window.MakeKeyAndOrderFront (this);
        }

        public override void WillTerminate (NSNotification notification)
        {
            // Insert code here to tear down your application
        }
    }
}

Teraz okno główne aplikacji jest definiowane w pliku .xib automatycznie dołączone do projektu podczas dodawania kontrolera okna. Aby edytować projekt systemu Windows, w okienku rozwiązania kliknij dwukrotnie plik MainWindow.xib:

Spowoduje to otwarcie projektu okna w narzędziu Interface Builder programu Xcode:

Standardowy przepływ pracy okna

W przypadku dowolnego okna utworzonego i współpracującego z aplikacją platformy Xamarin.Mac proces jest w zasadzie taki sam:

1. W przypadku nowych okien, które nie są domyślnie dodawane automatycznie do projektu, dodaj nową definicję okna do projektu.
2. Kliknij dwukrotnie plik .xib, aby otworzyć projekt okna do edycji w narzędziu Interface Builder programu Xcode.
3. Ustaw wszystkie wymagane właściwości okna w Inspektorze atrybutów i Inspektorze rozmiaru.
4. Przeciągnij kontrolki wymagane do skompilowania interfejsu i skonfiguruj je w Inspektorze atrybutów.
5. Użyj inspektora rozmiaru, aby obsłużyć zmianę rozmiaru elementów interfejsu użytkownika.
6. Uwidocznij elementy interfejsu użytkownika okna w kodzie języka C# za pośrednictwem placówek i akcji.
7. Zapisz zmiany i wróć do Visual Studio dla komputerów Mac, aby przeprowadzić synchronizację z programem Xcode.

Projektowanie układu okna

Proces układania interfejsu użytkownika w konstruktorze interfejsu jest zasadniczo taki sam dla każdego dodawanego elementu:

1. Znajdź odpowiednią kontrolkę w Inspektorze biblioteki i przeciągnij ją do Edytora interfejsów i umieść ją.
2. Ustaw wszystkie wymagane właściwości okna w Inspektorze atrybutów.
3. Użyj inspektora rozmiaru, aby obsłużyć zmianę rozmiaru elementów interfejsu użytkownika.
4. Jeśli używasz klasy niestandardowej, ustaw ją w inspektorze tożsamości.
5. Uwidacznianie elementów interfejsu użytkownika w kodzie C# za pośrednictwem punktów i akcji.
6. Zapisz zmiany i wróć do Visual Studio dla komputerów Mac, aby przeprowadzić synchronizację z programem Xcode.

Na przykład:

1. W programie Xcode przeciągnij przycisk push z sekcji Biblioteka:

   

2. Upuść przycisk w oknie w Edytorze interfejsów:

   

3. Kliknij właściwość Title w Inspektorze atrybutów i zmień tytuł przycisku na Click Me:

   

4. Przeciągnij etykietę z sekcji Biblioteka:

   

5. Upuść etykietę na okno obok przycisku w Edytorze interfejsów:

   

6. Pobierz prawy uchwyt na etykiecie i przeciągnij go, aż znajduje się w pobliżu krawędzi okna:

   

7. Po wybraniu etykiety w Edytorze interfejsów przejdź do inspektora rozmiaru:

   

8. W polu Autoskalowania kliknij Dim Red Bracket (Przygaszone czerwone nawiasy) po prawej stronie i Dim Red Horizontal Arrow (Przygaszone czerwone strzałki poziomej) w środku:

   

9. Dzięki temu etykieta będzie rozciągać się w celu zwiększenia i zmniejszenia rozmiaru okna w uruchomionej aplikacji. Czerwone nawiasy i lewy górny i lewy obszar pola autoskalowania informują, że etykieta jest zablokowana do podanych lokalizacji X i Y.

10. Zapisywanie zmian w interfejsie użytkownika

Podczas zmiany rozmiaru i przenoszenia kontrolek należy zauważyć, że narzędzie Interface Builder zapewnia przydatne wskazówki dotyczące przyciągania oparte na wytycznych dotyczących interfejsu człowieka systemu OS X. Te wytyczne ułatwią tworzenie aplikacji wysokiej jakości, które będą miały znajomy wygląd i działanie dla użytkowników komputerów Mac.

Jeśli spojrzysz w sekcji Hierarchia interfejsu, zwróć uwagę na sposób wyświetlania układu i hierarchii elementów tworzących interfejs użytkownika:

W tym miejscu możesz wybrać elementy do edycji lub przeciągania w celu zmiany kolejności elementów interfejsu użytkownika w razie potrzeby. Jeśli na przykład element interfejsu użytkownika był objęty innym elementem, możesz przeciągnąć go na dół listy, aby ustawić go jako najbardziej górny element w oknie.

Aby uzyskać więcej informacji na temat pracy z systemem Windows w aplikacji platformy Xamarin.Mac, zapoznaj się z naszą dokumentacją systemu Windows .

Uwidacznianie elementów interfejsu użytkownika w kodzie C#

Po zakończeniu tworzenia wyglądu i działania interfejsu użytkownika w narzędziu Interface Builder należy uwidocznić elementy interfejsu użytkownika, aby można było uzyskać do nich dostęp z poziomu kodu języka C#. W tym celu będziesz używać akcji i placówek.

Ustawianie niestandardowego głównego kontrolera okna

Aby można było utworzyć elementy punktów i akcji w celu uwidocznienia elementów interfejsu użytkownika w kodzie języka C#, aplikacja Xamarin.Mac będzie musiała używać niestandardowego kontrolera okien.

Należy wykonać następujące czynności:

1. Otwórz scenorys aplikacji w narzędziu Interface Builder programu Xcode.

2. Wybierz element NSWindowController na powierzchni projektowej.

3. Przejdź do widoku Inspektor tożsamości i wprowadź WindowController jako nazwę klasy:

   

4. Zapisz zmiany i wróć do Visual Studio dla komputerów Mac, aby przeprowadzić synchronizację.

5. Plik WindowController.cs zostanie dodany do projektu w okienku rozwiązania w Visual Studio dla komputerów Mac:

   

6. Otwórz ponownie scenorys w narzędziu Interface Builder programu Xcode.

7. Plik WindowController.h będzie dostępny do użycia:

   

Gniazda i akcje

Więc co to są placówki i akcje? W tradycyjnym programowaniu interfejsu użytkownika platformy .NET po dodaniu kontrolka w interfejsie użytkownika jest automatycznie widoczna jako właściwość. Elementy działają inaczej na komputerze Mac, po prostu dodanie kontrolki do widoku nie sprawia, że jest dostępny dla kodu. Deweloper musi jawnie uwidocznić element interfejsu użytkownika w kodzie. W tym celu firma Apple oferuje nam dwie opcje:

• Gniazda — gniazda są analogiczne do właściwości. Jeśli połączysz kontrolkę z punktem wylotowym, zostanie on udostępniony kodowi za pośrednictwem właściwości, dzięki czemu możesz wykonywać takie czynności, jak dołączanie procedur obsługi zdarzeń, wywoływanie metod na nim itp.
• Actions — akcje są analogiczne do wzorca polecenia w WPF. Na przykład gdy akcja jest wykonywana na kontrolce, powiedzmy kliknięcie przycisku, kontrolka automatycznie wywoła metodę w kodzie. Akcje są zaawansowane i wygodne, ponieważ można połączyć wiele kontrolek z tą samą akcją.

W programie Xcode punkty i akcje są dodawane bezpośrednio w kodzie za pomocą przeciągania kontrolek. Mówiąc dokładniej, oznacza to, że aby utworzyć gniazdo lub akcję, wybierz element sterujący, który chcesz dodać ujście lub akcję, przytrzymaj przycisk Kontrolka na klawiaturze i przeciągnij tę kontrolkę bezpośrednio do kodu.

W przypadku deweloperów platformy Xamarin.Mac oznacza to przeciągnięcie do Objective-C plików wycinków odpowiadających plikowi języka C#, w którym chcesz utworzyć gniazdo lub akcję. Visual Studio dla komputerów Mac utworzono plik o nazwie MainWindow.h jako część projektu shim Xcode wygenerowanego w celu użycia konstruktora interfejsu:

Ten plik stub .h odzwierciedla MainWindow.designer.cs , który jest automatycznie dodawany do projektu Xamarin.Mac po utworzeniu nowego NSWindow . Ten plik będzie używany do synchronizowania zmian wprowadzonych przez konstruktora interfejsu i jest miejscem, w którym utworzymy twoje placówki i akcje, aby elementy interfejsu użytkownika były uwidocznione w kodzie języka C#.

Dodawanie gniazda

Mając podstawową wiedzę na temat punktów wyjścia i akcji, przyjrzyjmy się tworzeniu gniazda w celu uwidocznienia elementu interfejsu użytkownika w kodzie języka C#.

Należy wykonać następujące czynności:

1. W programie Xcode w prawym górnym rogu ekranu kliknij przycisk Podwójne kółko, aby otworzyć Edytor Asystenta:

   

2. Program Xcode przełączy się do trybu widoku podzielonego z Edytorem interfejsów po jednej stronie i Edytorem kodu po drugiej stronie.

3. Zwróć uwagę, że program Xcode automatycznie wybrał plik MainWindowController.m w Edytorze kodu, który jest niepoprawny. Jeśli pamiętasz z naszej dyskusji na temat powyższych punktów sprzedaży i akcji, musimy wybrać elementy MainWindow.h .

4. W górnej części Edytora kodu kliknij link automatyczny i wybierz plik MainWindow.h:

   

5. Kod Xcode powinien teraz mieć wybrany prawidłowy plik:

   

6. Ostatni krok był bardzo ważny! Jeśli nie masz wybranego poprawnego pliku, nie będzie można utworzyć placówek i akcji lub zostaną one ujawnione niewłaściwej klasie w języku C#!

7. W Edytorze interfejsów przytrzymaj Control na klawiaturze i kliknij przycisk przeciągnij etykietę utworzoną powyżej do edytora kodu tuż poniżej @interface MainWindow : NSWindow { } kodu:

   

8. Zostanie wyświetlone okno dialogowe. W polu Połączenie pozostaw wartość ujścia i wprowadź wartość ClickedLabel w polu Nazwa:

   

9. Kliknij przycisk Połącz, aby utworzyć gniazdo:

   

10. Zapisz zmiany w pliku.

Dodawanie akcji

Następnie przyjrzyjmy się utworzeniu akcji, aby uwidocznić interakcję użytkownika z elementem interfejsu użytkownika z kodem języka C#.

Należy wykonać następujące czynności:

1. Upewnij się, że nadal znajdujemy się w Edytorze Asystentów, a plik MainWindow.h jest widoczny w Edytorze kodu.

2. W Edytorze interfejsów przytrzymaj Control na klawiaturze i kliknij przycisk utworzony powyżej w edytorze kodu tuż poniżej @property (assign) IBOutlet NSTextField *ClickedLabel; kodu:

   

3. Zmień typ połączenia na akcję:

   

4. Wprowadź ClickedButton jako nazwę:

   

5. Kliknij przycisk Połącz, aby utworzyć akcję:

   

6. Zapisz zmiany w pliku.

Za pomocą interfejsu użytkownika połączonego i uwidocznionego kodu w języku C#przejdź z powrotem do Visual Studio dla komputerów Mac i zezwłań synchronizowanie zmian z narzędzi Xcode i Interface Builder.

Pisanie kodu

Po utworzeniu interfejsu użytkownika i jego elementach interfejsu użytkownika uwidocznionych w kodzie za pośrednictwem placówek i akcji możesz przystąpić do pisania kodu w celu dostosowania programu do życia. Na przykład otwórz plik MainWindow.cs do edycji, klikając go dwukrotnie w okienku rozwiązania:

Dodaj następujący kod do MainWindow klasy, aby pracować z przykładowym gniazdem, który został utworzony powyżej:

private int numberOfTimesClicked = 0;
...

public override void AwakeFromNib ()
{
    base.AwakeFromNib ();

    // Set the initial value for the label
    ClickedLabel.StringValue = "Button has not been clicked yet.";
}

Należy pamiętać, że NSLabel dostęp do elementu w języku C# jest uzyskiwany za pomocą bezpośredniej nazwy, którą przypisano w środowisku Xcode podczas tworzenia gniazda w środowisku Xcode. W tym przypadku jest to nazwa .ClickedLabel Dostęp do dowolnej metody lub właściwości uwidocznionego obiektu można uzyskać w taki sam sposób, jak w przypadku dowolnej normalnej klasy języka C#.

Ważne

Należy użyć metody AwakeFromNib, zamiast innej metody, takiej jak Initialize, ponieważ AwakeFromNib jest wywoływana po załadowaniu i utworzeniu wystąpienia interfejsu użytkownika z pliku .xib. Jeśli próbowano uzyskać dostęp do kontrolki etykiety przed pełnym załadowaniem i utworzeniem NullReferenceException wystąpienia pliku xib, zostanie wyświetlony błąd, ponieważ kontrolka etykiety nie zostanie jeszcze utworzona.

Następnie dodaj następującą klasę MainWindow częściową do klasy:

partial void ClickedButton (Foundation.NSObject sender) {

    // Update counter and label
    ClickedLabel.StringValue = string.Format("The button has been clicked {0} time{1}.",++numberOfTimesClicked, (numberOfTimesClicked < 2) ? "" : "s");
}

Ten kod jest dołączany do akcji utworzonej w programie Xcode i narzędziu Interface Builder i będzie wywoływany za każdym razem, gdy użytkownik kliknie przycisk.

Niektóre elementy interfejsu użytkownika automatycznie mają wbudowane akcje, na przykład elementy na domyślnym pasku menu, takie jak element menu Otwórz... (openDocument:). W okienku rozwiązania kliknij dwukrotnie plik AppDelegate.cs, aby otworzyć go do edycji i dodać następujący kod poniżej DidFinishLaunching metody:

[Export ("openDocument:")]
void OpenDialog (NSObject sender)
{
    var dlg = NSOpenPanel.OpenPanel;
    dlg.CanChooseFiles = false;
    dlg.CanChooseDirectories = true;

    if (dlg.RunModal () == 1) {
        var alert = new NSAlert () {
            AlertStyle = NSAlertStyle.Informational,
            InformativeText = "At this point we should do something with the folder that the user just selected in the Open File Dialog box...",
            MessageText = "Folder Selected"
        };
        alert.RunModal ();
    }
}

Wiersz klucza w tym miejscu to [Export ("openDocument:")], informuje NSMenu , że element AppDelegate ma metodę void OpenDialog (NSObject sender) , która odpowiada na openDocument: akcję.

Aby uzyskać więcej informacji na temat pracy z menu, zobacz dokumentację menu .

Synchronizowanie zmian za pomocą programu Xcode

Po powrocie do Visual Studio dla komputerów Mac z programu Xcode wszelkie zmiany wprowadzone w programie Xcode zostaną automatycznie zsynchronizowane z projektem Xamarin.Mac.

Jeśli wybierzesz MainWindow.designer.cs w okienku rozwiązania, zobaczysz, jak nasze wyjście i działanie zostały połączone w naszym kodzie języka C#:

Zwróć uwagę, że dwie definicje w pliku MainWindow.designer.cs :

[Outlet]
AppKit.NSTextField ClickedLabel { get; set; }

[Action ("ClickedButton:")]
partial void ClickedButton (Foundation.NSObject sender);

Utwórz wiersz z definicjami w pliku MainWindow.h w środowisku Xcode:

@property (assign) IBOutlet NSTextField *ClickedLabel;
- (IBAction)ClickedButton:(id)sender;

Jak widać, Visual Studio dla komputerów Mac nasłuchuje zmian w pliku .h, a następnie automatycznie synchronizuje te zmiany w odpowiednim pliku .designer.cs, aby uwidocznić je w aplikacji. Możesz również zauważyć, że MainWindow.designer.cs jest klasą częściową, dlatego Visual Studio dla komputerów Mac nie musi modyfikować MainWindow.cs, co spowoduje zastąpienie wszelkich zmian wprowadzonych w klasie.

Zwykle nigdy nie trzeba otwierać MainWindow.designer.cs siebie, został przedstawiony tutaj tylko do celów edukacyjnych.

Ważne

W większości sytuacji Visual Studio dla komputerów Mac automatycznie zobaczy wszelkie zmiany wprowadzone w środowisku Xcode i zsynchronizuje je z projektem Xamarin.Mac. W przypadku wystąpienia wyłączenia, które synchronizacja nie jest wykonywana automatycznie, przełącz się z powrotem do środowiska Xcode i wróć do Visual Studio dla komputerów Mac ponownie. Zwykle rozpoczyna się to cykl synchronizacji.

Dodawanie nowego okna do projektu

Oprócz głównego okna dokumentu aplikacja Xamarin.Mac może wymagać wyświetlenia innych typów okien dla użytkownika, takich jak Preferencje lub Panele inspektorów. Podczas dodawania nowego okna do projektu należy zawsze używać opcji Okno Cocoa z kontrolerem , ponieważ ułatwia to ładowanie okna z pliku xib.

Aby dodać nowe okno, wykonaj następujące czynności:

1. W okienku rozwiązania kliknij prawym przyciskiem myszy projekt i wybierz polecenie Dodaj>nowy plik...

2. W oknie dialogowym Nowy plik wybierz pozycję Okno Xamarin.Mac>Cocoa z kontrolerem:

   

3. Wprowadź PreferencesWindow nazwę i kliknij przycisk Nowy.

4. Kliknij dwukrotnie plik PreferencesWindow.xib, aby otworzyć go do edycji w narzędziu Interface Builder:

   

5. Projektowanie interfejsu:

   

6. Zapisz zmiany i wróć do Visual Studio dla komputerów Mac, aby przeprowadzić synchronizację z programem Xcode.

Dodaj następujący kod, aby AppDelegate.cs wyświetlić nowe okno:

[Export("applicationPreferences:")]
void ShowPreferences (NSObject sender)
{
    var preferences = new PreferencesWindowController ();
    preferences.Window.MakeKeyAndOrderFront (this);
}

Wiersz var preferences = new PreferencesWindowController (); tworzy nowe wystąpienie kontrolera okna, które ładuje okno z pliku .xib i zawyża je. Wiersz preferences.Window.MakeKeyAndOrderFront (this); wyświetla nowe okno dla użytkownika.

Jeśli uruchomisz kod i wybierzesz pozycję Preferencje... z menu Aplikacji, zostanie wyświetlone okno:

Aby uzyskać więcej informacji na temat pracy z systemem Windows w aplikacji platformy Xamarin.Mac, zapoznaj się z naszą dokumentacją systemu Windows .

Dodawanie nowego widoku do projektu

Czasami łatwiej jest podzielić projekt okna na kilka plików xib, którymi można zarządzać. Na przykład, na przykład po wyłączeniu zawartości okna głównego podczas wybierania elementu paska narzędzi w oknie preferencji lub zamiany zawartości w odpowiedzi na wybór listy źródłowej.

Podczas dodawania nowego widoku do projektu należy zawsze używać opcji Widok cocoa z kontrolerem , ponieważ ułatwia to ładowanie widoku z pliku .xib.

Aby dodać nowy widok, wykonaj następujące czynności:

1. W okienku rozwiązania kliknij prawym przyciskiem myszy projekt i wybierz polecenie Dodaj>nowy plik...

2. W oknie dialogowym Nowy plik wybierz pozycję Widok platformy Xamarin.Mac>Cocoa z kontrolerem:

   

3. Wprowadź SubviewTable nazwę i kliknij przycisk Nowy.

4. Kliknij dwukrotnie plik SubviewTable.xib, aby otworzyć go do edycji w narzędziu Interface Builder i Projektowanie interfejsu użytkownika:

   

5. Podłączanie wszelkich wymaganych akcji i gniazd.

6. Zapisz zmiany i wróć do Visual Studio dla komputerów Mac, aby przeprowadzić synchronizację z programem Xcode.

Następnie zmodyfikuj SubviewTable.cs i dodaj następujący kod do pliku AwakeFromNib, aby wypełnić nowy widok po załadowaniu:

public override void AwakeFromNib ()
{
    base.AwakeFromNib ();

    // Create the Product Table Data Source and populate it
    var DataSource = new ProductTableDataSource ();
    DataSource.Products.Add (new Product ("Xamarin.iOS", "Allows you to develop native iOS Applications in C#"));
    DataSource.Products.Add (new Product ("Xamarin.Android", "Allows you to develop native Android Applications in C#"));
    DataSource.Products.Add (new Product ("Xamarin.Mac", "Allows you to develop Mac native Applications in C#"));
    DataSource.Sort ("Title", true);

    // Populate the Product Table
    ProductTable.DataSource = DataSource;
    ProductTable.Delegate = new ProductTableDelegate (DataSource);

    // Auto select the first row
    ProductTable.SelectRow (0, false);
}

Dodaj wyliczenie do projektu, aby śledzić, który widok jest obecnie wyświetlany. Na przykład SubviewType.cs:

public enum SubviewType
{
    None,
    TableView,
    OutlineView,
    ImageView
}

Edytuj plik .xib okna, który będzie zużywał widok i wyświetlał go. Dodaj widok niestandardowy, który będzie działać jako kontener widoku po załadowaniu go do pamięci przez kod języka C# i uwidacznia go w ujściu o nazwie ViewContainer:

Zapisz zmiany i wróć do Visual Studio dla komputerów Mac, aby przeprowadzić synchronizację z programem Xcode.

Następnie zmodyfikuj plik .cs okna, który będzie wyświetlał nowy widok (na przykład MainWindow.cs), a następnie dodaj następujący kod:

private SubviewType ViewType = SubviewType.None;
private NSViewController SubviewController = null;
private NSView Subview = null;
...

private void DisplaySubview(NSViewController controller, SubviewType type) {

    // Is this view already displayed?
    if (ViewType == type) return;

    // Is there a view already being displayed?
    if (Subview != null) {
        // Yes, remove it from the view
        Subview.RemoveFromSuperview ();

        // Release memory
        Subview = null;
        SubviewController = null;
    }

    // Save values
    ViewType = type;
    SubviewController = controller;
    Subview = controller.View;

    // Define frame and display
    Subview.Frame = new CGRect (0, 0, ViewContainer.Frame.Width, ViewContainer.Frame.Height);
    ViewContainer.AddSubview (Subview);
}

Gdy musimy wyświetlić nowy widok załadowany z pliku .xib w kontenerze okna ( dodany powyżej widok niestandardowy), ten kod obsługuje usuwanie istniejącego widoku i zamianę go na nowy. Wygląda na to, że jest już wyświetlany widok, jeśli tak zostanie usunięty z ekranu. Następnie przyjmuje widok, który został przekazany (załadowany z kontrolera widoku) zmienia jego rozmiar tak, aby mieścił się w obszarze zawartości i dodaje go do zawartości do wyświetlania.

Aby wyświetlić nowy widok, użyj następującego kodu:

DisplaySubview(new SubviewTableController(), SubviewType.TableView);

Spowoduje to utworzenie nowego wystąpienia kontrolera widoku do wyświetlenia nowego widoku, ustawienie jego typu (określonego przez wyliczenie dodane do projektu) i użycie DisplaySubview metody dodanej do klasy Okna w celu rzeczywistego wyświetlenia widoku. Na przykład:

Aby uzyskać więcej informacji na temat pracy z systemem Windows w aplikacji platformy Xamarin.Mac, zapoznaj się z naszą dokumentacją systemu Windows i okien dialogowych .

Podsumowanie

W tym artykule szczegółowo przedstawiono pracę z plikami xib w aplikacji platformy Xamarin.Mac. Zobaczyliśmy różne typy i zastosowania plików xib w celu utworzenia interfejsu użytkownika aplikacji, sposobu tworzenia i obsługi plików xib w narzędziu Interface Builder programu Xcode oraz sposobu pracy z plikami xib w kodzie języka C#.

Linki powiązane

• Witaj, Mac
• Windows
• Menu
• Okna dialogowe
• Praca z obrazami
• Wskazówki dotyczące interfejsu człowieka dla systemu macOS