We'll add a Button to the Inspector and a View Controller to the Design Surface. For the last control, we want to display a popover that allows the user to select from four preset character styles. We'll drag some controls onto the bottom view to layout the UI of the inspector. We are going to layout the right hand side of the Split View to act as an Inspector for the selected text's properties. If we return to Visual Studio for Mac and run the project now, notice that the right side keeps it's smaller size and the window is resized: Next select the Split Item that represents the right side, set a higher Holding Priority and click the User Can Collapse checkbox: Return to Xcode and edit the View for the right side by selecting it in the Design Surface and clicking on the Size Inspector. Since we are going to be using the right hand side of the split view as an Inspector area, we want it to have a smaller size and allow it to be collapsed. If we return to Visual Studio for Mac and run the project, notice that the Text View automatically resizes to fill the left side of the Split View as the Window or the split are resized: Drag a Text View onto the top View Controller attached to the Split View and click the Pin auto layout constraint (the second icon from the right at the bottom of the Design Surface).įrom here we will click all four of the I-Beam icons around the bounding box at the top of the Constraints Popover and click the Add 4 Constraints button at the bottom to add the required constraints. We want to place a Text View in the left side of the Split View and have it automatically fill the available area when either the Window or the Split View is resized. This will tie the two interface element together using a Segue: To tie the split view to it's parent window, press the Control key, click on the Window Controller (the blue circle in the Window Controller's frame) and drag a line to the Split View Controller. Notice that the controller automatically included two child View Controllers (and their related views), wired-up to the left and right sides of the split view. Next, type split into the Filter area, select the Vertical Split View Controller and drag it onto the Design Surface: To do this, we will need to first remove the default View Controller and View that comes with the Storyboard by select it in Interface Builder and pressing the Delete key: For our sample app, we are going to be creating a UI that has a main Content View on one side and an Inspector View in the second. In the Solution Explorer, double-click the Main.storyboard file to open it for editing in Xcode's Interface Builder:Īs you can see above, the default Storyboard defines both the app's Menu Bar and its main Window with it View Controller and View. Use the default Project Name and Solution Name and click the Create button: Use the App Name of MacStoryboard and click the Next button: Select Mac > App > Cocoa App and click the Next button: As a quick introduction to using Storyboards to define a Xamarin.Mac app's User Interface, let's start a new Xamarin.Mac project.
0 Comments
Leave a Reply. |