Interface Design in C#

Transcription

1 Interface Design in C# Project 1: Copy text from TextBox to Label as shown in the figure. TextBox and Label have the same property: display.text = nameentry.text; private void nameentry_textchanged display.text = nameentry.text; 1

2 Anchoring a Control Project 2: Anchors define to which of the container a certain control is bound. Default is Top and Left. If Form resized, controls will stay at the top left corner. Design the interface shown on the right side. Set the anchor properties in the following way and add events. Control Anchor Property TextBox (upper) Top Label Left, Right TextBox (lower) Bottom private void toptext_textchanged middledisplay.text = toptext.text; private void bottomtext_textchanged toptext.text = bottomtext.text; 2

3 Anchoring a Control (2) Project 3: Dock a TextBox to the top. Allow a Label to fill the rest. Copy text from TextBox to Label Change to upper case. private void entermessage_textchanged display.text = entermessage.text.toupper( ); Drag a Button from the Toolbox to the Form. Include a TextField and a Label. No event handling for text entry. When the user clicks the button, copy text entered to the label. private void copybutton_click displaylabel.text = entermessage.text; 3

4 RadioButton Project 4: May display text, an image, or both. Radio buttons from a group user must select exactly one. Design the form which has three radio buttons, where each represents a color. User selection changes Label text to the selected color. Label Configuration BorderStyle Fixed3D Font Size 14 Text The text color is black TextAlign MiddleCenter Anchor Left, Right Name display FixedSingle Frames the label with black rectangle private void redradio_checkedchanged display.forecolor = Color.Red; display.text = "The color is red"; 4

5 The LinkLabel control Project 5: This links to a site with information about George Washington. The code to open IExplorer is: System.Diagnostics.Process.Start( IEExplore, ); Event handling code: private void presidentlink_linkclicked(object sender, System.Windows.Forms.LinkLabelLinkClickedEventArgs e) System.Diagnostics.Process.Start( IEExplore, ); Add RadioButtons as shown. When the user selects a radio button we want to do three things Show the president s name in the link Underline the link Associate the link with the site containing the president s biography. Event handling code: (double click on George Washington and add the code) private void george_checkedchanged presidentlink.text = "George Washington"; presidentlink.linkbehavior = LinkBehavior.AlwaysUnderline; presidentlink.links[0].linkdata = " 5

6 LinkLabel and Grouping Radio Buttons Project 5 (continuation): A LinkLabel may have a collection of links. The Links property holds that collection. Links[0] refers to the first link in the collection. The LinkLabel in our example has only one link. The LinkData specifies the web site for the link. Drag a GroupBox to the Form. Add each RadioButton to the GroupBox. GroupBox has a border with a title Change its Text property to Choose a President to change the title in the group box border. A Form may have more than one group. To make the link work we add the code: private void presidentlink_linkclicked(object sender, System.Windows.Forms.LinkLabelLinkClickedEventArgs e) System.Diagnostics.Process.Start(e.Link.LinkData.ToString()); 6

7 Selecting Border Style Group Box Project 6: The Border Style group box. Choose a border style for the link label. The user chooses exactly one radio button from each group one to choose the president and one to choose the border style. Border Style Event Handling private void singleborder_checkedchanged presidentlink.borderstyle = BorderStyle.FixedSingle; private void threedborder_checkedchanged presidentlink.borderstyle = BorderStyle.Fixed3D; 7

8 Project 7: The PictureBox control The Size Mode Property Normal Places the image in the upper-left corner, clipped if too large StretchImage Stretches or shrinks the image to fit AutoSize Resizes the PictureBox to the size of the image CenterImage Displays the image in the center if the PictureBox is larger than the image. Centers and clips the image if it is larger. Can set border styles to None, FixedSingle, or Fixed3D 8

9 Project 8: Make multiple selections or select nothing. The CheckBox control May have a label, an image, a background image. May appear with a box to check or like a button. Design the form on the right side. Steps to set allignment: Click on the View, Properties menu item to show the list of properties. Click on the ImageAlign, CheckAlign, or TextAlign property to display a small button at the right. Click on the small button to pop up a grid of three rows and three columns that allows us to choose the alignment position. Click to choose one of the nine positions. The three vertical positions Top, Middle, and Bottom combine with the three horizontal positions, Left, Center, and Right to give the nine choices. 9

10 Check Box Properties and Event Handling Properties for CheckBox Flat The box appears flat Popup Appears flat until the mouse passing over makes it appear three-dimensional Standard Appears three-dimensional System Appearance determined by the user s operating system Event-Handling Code private void berrybox_checkedchanged display.text = "Strawberry " + berrybox.checked; private void pizzabox_checkedchanged display.text = "Pizza " + pizzabox.checked; private void saladbox_checkedchanged display.text = "Salad " + saladbox.checked; 10

11 ListBox and ComboBox Project 8: ListBox shows all the elements ComboBox pops them up. Click on Items property to display a String Collection Editor to enter the items. SelectedItem property refers to the selected item. ListBox SelectionMode None One MultiSimple MultiExtended No items can be selected One item can be selected Multiple items can be selected Multiple items can be selected and the user can use the shift, control, and arrow keys to make the selection 11

12 ListBox and ComboBox Event Handler Project 8 (continuation): private void foodlist_selectedindexchanged display.text = foodlist.selecteditem.tostring() + " has + foodlist.selecteditem.tostring().length.tostring() + " letters"; private void drinkscombo_selectedindexchanged display.text = "It's " + foodlist.selecteditem.tostring() + " and " + drinkscombo.text; 12