CUSTOM CONTROLS in Visual C#.NET

Drawer PDF 417 in Visual C#.NET CUSTOM CONTROLS

} } } 4.

corePart.MouseLeftButtonUp += new MouseButtonEventHandler( corePart_MouseLeftButtonUp);

Recall that when the button is clicked, you need to make sure the button is disabled for however many seconds are set as the cooldown period. To do this, first create a method that checks to see if the cooldown time has expired, as follows: private bool CheckCoolDown() { if (!isCoolDown) { return false; } else { if (DateTime.Now > pressedTime.AddSeconds(CoolDownSeconds)) { isCoolDown = false; return false; } else { return true; } } } The logic behind this method is pretty simple. If the isCoolDown flag is true, then you are simply checking to see if the current time is greater than the pressedTime added to the cooldown. If so, you reset the isCoolDown flag and return false; otherwise, you return true.

Now you need to surround the code in each of the event handlers with a call to the CheckCoolDown() method, as follows. If the cooldown has not yet expired, none of the event handlers should perform any action. void corePart_MouseEnter(object sender, MouseEventArgs e) { if (!CheckCoolDown()) { isMouseOver = true; GoToState(true); } }

void corePart_MouseLeave(object sender, MouseEventArgs e) { if (!CheckCoolDown()) { isMouseOver = false; GoToState(true); } } void corePart_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { if (!CheckCoolDown()) { isPressed = true; GoToState(true); } } void corePart_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { if (!CheckCoolDown()) { isPressed = false; isCoolDown = true; pressedTime = DateTime.Now; GoToState(true); } } 6. Recall that in step 2 of the Defining Properties and States section you created a method called OnCoolDownButtonChange(). At that time, you did not place anything in this method. This is the method that is called whenever there is a notification change to a dependency property. When a change occurs, you need to call GoToState() so the control can reflect the changes, as follows: protected virtual void OnCoolDownButtonChange(RoutedEventArgs e) { GoToState(true); } 7. Next, create a constructor for your control and apply the default style key. In many cases, this will simply be the type of your control itself. public CoolDownButtonControl() { DefaultStyleKey = typeof(CoolDownButtonControl); }

The final step in creating the control is to define a control contract that describes your control. This is required in order for your control to be modified by tools such as Expression Blend. This contract consists of a number of attributes that are placed directly in the control class, as follows. These attributes are used only by tools; they are not used by the runtime. namespace CoolDownButton { [TemplatePart(Name = "Core", Type = typeof(FrameworkElement))] [TemplateVisualState(Name = "Normal", GroupName = "NormalStates")] [TemplateVisualState(Name = "MouseOver", GroupName = " NormalStates")] [TemplateVisualState(Name = "Pressed", GroupName = " NormalStates")] [TemplateVisualState(Name = "CoolDown", GroupName = "CoolDownStates")] [TemplateVisualState(Name = "Available", GroupName = "CoolDownStates")] public class CoolDownButtonControl : Control { ... } }

Now you re ready to try out your new control. 1. 2. Compile your control. If everything compiles correctly, you need create an instance of your control in your CoolDownButton project. To do this, right-click the CoolDownButton project in Solution Explorer and select Add Reference. In the Add Reference dialog box, select the Projects tab and choose CoolDownButton, as shown in Figure 146. Then click OK.

Figure 14-6. Adding a reference to your control 3. Navigate to your MainPage.xaml file within the CoolDownButton project. First add a new xmlns to the UserControl definition, and then add an instance of your control, as follows: <UserControl x:Class="CooldownButtonTest.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:bsl="clr-namespace:CoolDownButton;assembly=CoolDownButton" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <Grid x:Name="LayoutRoot" Background="White"> <bsl:CoolDownButtonControl CoolDownSeconds="3" Width="150" Height="60" /> </Grid> </UserControl> 4. Run the project. You should see your button.

Test the states of your button. When you move the mouse over the button, the border thickness will increase. Click the mouse on the button, and the border will decrease. When you release the mouse from the button, the border will go back to normal, and the overlay will appear. You can continue to move the mouse over the button, and you will notice that it will not respond to your events until three seconds have passed. Figure 14-7 shows the various control states.

Figure 14-7. Button states Clearly, this cooldown button has a lot of room for improvement. However, the goal was to show you the basic steps involved in creating a custom control. As you most certainly could tell, the process is pretty involved, but the rewards of following the best practices are worth it. When the control is built properly like this, you can apply custom templates to it to dramatically change its appearance, without needing to rewrite any of the code logic.

Summary

Without a doubt, this was the most complex content so far covered in this book. The goal was to give you a basic understanding of what is involved in creating custom controls the right way in Silverlight. In this chapter, you looked at when you might want to create a custom control. Then you learned about some of the key concepts within the Silverlight control model, including the Parts and States model and dependency properties. Finally, you built your own custom control.