Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The Button is a simple-to-understand control. The most common use of the Button is to initiate an action via the click event. The event is triggered by mouse, touch or keyboard. There are several buttons to choose. I'm inside Visual Studio and I have opened a project called ButtonControls. In this application, I have created a class diagram called ButtonDiagram. As you can see it starts with the ButtonBase Class and then a number of derived types. We're going to start by looking at the basic Button Class and then we'll look at two of the ToggleButtons; CheckBox and RadioButton.
A ToggleButton here means you click once you enable it and click again to disable it. I have a class diagram called ButtonDiagram I'd like to look at. All these buttons derive from the Abstract Class called ButtonBase. I'm going to start by looking at the Button Class and then I will look at the RepeatButton, a button that repeats the action over and over again. Next we will look at the CheckBox and the RadioButton, Two examples of a ToggleButton. A ToggleButton of course is a button that you click once to turn on and click a second time to turn off. And then last, we'll look at a HyperlinkButton.
I'll start by opening this MainPage.xaml file and looking at the ClickMode property of the standard button. A click is usually considered to be a MouseDown and then a MouseUp on the same control, and a Silverlight button that is considered to be ClickMode Release. There are two other settings for click mode, only one that is commonly used and that is this one here called ClickMode=Press. Let me show you how those work. Press F5 to run the application.
I'm going to click on this first button and see that the color change which signifies then holding the mouse button down but I haven't released it yet. Now I'm going to release it now and you can see that the event fired. It's showing that click and the timestamp. On this second button, with ClickMode set to Press, as soon as I do a MouseDown on the button, it considers that to be a click event. The Repeat Button repeats an action over and over again. I will show you, I will click on this button and hold it. You see that there was an initial delay of three seconds and now every 400 ms it's stepping through my click procedure.
I can customize this interval and delay by editing my XAML, let me show you. I have returned back to my XAML. I will find my Repeat Button. Here is the Interval, set to 400 ms, I'll make that shorter. And I'll also set a shorter initial Delay, 1 second; run the application a second time; click and hold the Button. For the next demo we'll look at the CheckBox which is a form of a Toggle button; a check mark within a rectangle with some text on the side. It is a Content control so you can customize what is shown over here, it doesn't have to be text.
For this first CheckBox I have set the IsChecked property equal to True, which means of course when the user first sees it, it is checked. In the second CheckBox I have set the IsChecked property to a Null value. That means it is marked as Indeterminate, is neither checked or unchecked. And for the third CheckBox, I've set IsChecked = Null but I have also set another setting called IsThreeState = True. What does that mean? I will show you. On this first CheckBox, I can click once to move out of the Indeterminate mode and now I'm in the unchecked mode, and now I can click again to go back to the checked mode.
When I click the third time, it goes back unchecked. So at this point, the user can only switch between the two items, checked and unchecked. Whereas this CheckBox control has three states, because of the IsThreeState, it goes from checked to Indeterminate and back to unchecked. RadioButtons are Toggle buttons, main difference between them and a CheckBox is that they work in groups. Here I have got a group of radio buttons for Shiny and Matte. I have another radio group for the colors.
I will show you how I implemented that. This RadioButton has a GroupName called TrimColor. The Burgundy RadioButton also has a GroupName of TrimColor, therefore they are considered to be part of the same group. This RadioButton and the Matte RadioButton are set in the GroupName TrimFinish. From my last demo we will look at HyperlinkButtons. A hyperlink is a button that looks like a hyperlink. The user clicks on the hyperlink and it takes them to some Web URI. I can specify the Web URI in a property like I have done here, NavigateUri and then I specified my blog address.
I can also specify how it's loaded into the browser. In this case, I wanted to launch in a separate window. Now in order for this to work, I have to be running in an outer browser mode. There are Properties, make sure that I check this Enable running application out of browser and then I will press F5 to run the application. The user sees this link says, oh I want to go to this blog, they click here, the browser launches and loads my website. The HyperlinkButton is a button however so it has a click event procedure.
I will show you how you can implement that. I am returning back to my main page. On this second HyperlinkButton, I no longer have the NavigateUri, instead I have a Click event procedure. I'll switch to my code by pressing F7. The benefit of having a Click event procedure is that I can run some code before I send the user off to the Web address, so I could do something useful like log some information for reporting purposes. Or I could have some logic in here that determines where to actually send them when they click on the link.
To send them off to the browser, I use the HTMLPage class and I call it Window.Navigate method. Now interestingly enough, in the previous example I had to be in out-of-browser mode, if I use the HTML class to navigate, I can't be in out-of-browser mode, so I need to go back to my Properties window and uncheck this CheckBox before I run the demo. Now I will run the application and click on this second hyperlink and again the browser shows up, the user sees the webpage, but the difference is, I was able to run some code first.
Button controls are simple and are used for signaling user action.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101740 Viewers
61 Video lessons · 88497 Viewers
71 Video lessons · 72318 Viewers
56 Video lessons · 104030 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.