My own Silverlight textbox

Size: px

Start display at page:

Download "My own Silverlight textbox"

Jared Kristian Riley
5 years ago
Views:

My own Silverlight textbox Step 1: create a new project I use the beta 2 of Visual Studio 2008 ( codename Orcas ) for this tutorial. http://msdn2.microsoft.com/en-us/vstudio/aa700831.aspx.

1 My own Silverlight textbox Step 1: create a new project I use the beta 2 of Visual Studio 2008 ( codename Orcas ) for this tutorial. You can download the beta2 form You also need the silverlight 1.1 runtimes and Visual Studio tools. They can be downloaded from It is also possible to use Expression Blend 2.0 September Preview for this tutorial. But the xaml code is pretty basic, so I do everything in Visual Studio. Start Visual Studio and choose File New Project. Choose VB as language and Silverlight as project type. Give also a name and choose a location for the project. Step 2: create the textbox The textbox is nothing more than a rectangle and a textblock. I use the rectangle as the border of the textbox and the textblock will contain the content. Open the page.xaml file. Complete the file between the <Canvas> and </Canvas> element with these two lines: <Rectangle x:name="myrectangle" Width="250" Height="24" Stroke="#FF000000" Canvas.Left="40" Canvas.Top="40" /> <TextBlock x:name="mytextblock" Width="246" Height="24" Text="" Canvas.Left="42" Canvas.Top="40" /> The element <Rectangle> or <TextBlock> will define a new rectangle or textblock. The attribute x:name gives the elements a unique name that can be used from code behind. The properties Width en Height defines the size of the elements. Notice that the size of the textblock is a little bit smaller. So, the text will not be stuck to the boder.

The properties Canvas.Left an Canvas.Height defines the position of the elements. For the same reason as the Width property, the Canvas.Left property for the textblock is a little bit larger.

If you run your application, you will see something like this Step 3: how to type in the textbox The textblock will act like a textbock if I catch the KeyDown event on the canvas and then put the

2 The properties Canvas.Left an Canvas.Height defines the position of the elements. For the same reason as the Width property, the Canvas.Left property for the textblock is a little bit larger. Finally, I give the rectangle a black stroke, so we will actualy see the border. If you run your application, you will see something like this Step 3: how to type in the textbox The textblock will act like a textbock if I catch the KeyDown event on the canvas and then put the result of the pressed key in the textblock. In the page.xaml file add the following line of code to the Canvas element: <Canvas x:name="parentcanvas" xmlns=" xmlns:x=" Loaded="Page_Loaded" KeyDown="AddCharacter" > This will call a routine AddCharacter from the code behind file. The routine looks like this: Private Sub AddCharacter(ByVal o As Object, ByVal e As KeyboardEventArgs) Dim newchar As Char = Chr(e.PlatformKeyCode) mytextblock.text &= newchar End Sub The argument e contains the key we pressed. With the Chr() function of VB, I convert the PlatformKeyCode property of the argument to a character. In the second line, I add the character to the textblock. Test the project again and you will see that you can type in the textbox.

3 Nice, but there are still a lot of problems: The backspace can t be used I can t decide to type in upper case or lower case There is no cursor in my textbox. We solve these problems in the next steps. Step 4: implement a backspace If you look at the e.platformkeycode when the backspace is pressed you will see that it returns the number 8. So, every time e.platformkeycode is equal to 8 we have to remove the last character from the textblock. But we must also check if there is any character in the textblock. Otherwise it will give an error to delete the latest character. The code looks like this and can be added above the first two lines: ' check if the pressed key is the backspace If e.platformkeycode = 8 Then ' delete the latest character is there is a character available If mytextblock.text.length > 0 Then mytextblock.text = mytextblock.text.substring(0, mytextblock.text.length - 1) ' exit the routine Exit Sub Test your project by typing some text and press the backspace multiple times. Step 5: lower case or upper case You have probably noticed that all text is displayed in upper case. I only want the text to be in upper case if the Shift key is also pressed. The problem is that pressing the Shift key also triggers the KeyDown event and shows a non printable character in my textbox. I will use a global variable of the type Boolean to solve this problem. I set the variable to true when the Shift key is pressed and exits the method when shift is the only key that is pressed. The next character will be in uppercase. After that the Boolean is set to false again. This is the code. You can add it below the code for the backspace. This code also replaces the first two lines from step 3. ' at the top of you code behind file Private mbshiftpressed As Boolean

The code in the routine AddCharacter: ' check is shift is pressed If e.shift = True Then ' set the boolean to true mbshiftpressed = True ' check if shift is the only key that is pressed If e.

4 The code in the routine AddCharacter: ' check is shift is pressed If e.shift = True Then ' set the boolean to true mbshiftpressed = True ' check if shift is the only key that is pressed If e.platformkeycode = 16 Then Exit Sub ' add the character to the textblock If mbshiftpressed = True Then ' the character must be in uppercase Dim supper As String = Convert.ToString(Chr(e.PlatformKeyCode)).ToUpper() mytextblock.text &= supper ' set the boolean back to false mbshiftpressed = False Else ' the character must be in lower case Dim slower As String = Convert.ToString(Chr(e.PlatformKeyCode)).ToLower() mytextblock.text &= slower Test your project and you will see that you can type in upper case and lower case just like in every other textblock. Step 6: display a cursor First, I will draw a rectangle that represents the cursor. Then, I will create a storyboard ( animation ) that makes the cursor blink. To create the rectangle, add this line of xaml code below the Rectangle and Textblock elements: <Rectangle Width="1" Height="20" Stroke="#FF000000" Canvas.Left="42" Canvas.Top="40" x:name="cursorrectangle"/> The attributes Width, Height, Canvas.Left and Canvas.Top makes sure that the cursor stands at the beginning of the textblock. Now, I will create the storyboard that makes the cursor blinks. The storyboard could also be created with Expression Blend 2.0, but it is a good practise to do this in pure xaml.

You can insert the xaml code between the Canvas and first Rectangle element of the file page.xaml: <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.

5 You can insert the xaml code between the Canvas and first Rectangle element of the file page.xaml: <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <BeginStoryboard> <Storyboard x:name="cursorblink"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="cursorRectangle" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <SplineDoubleKeyFrame KeyTime="00:00: " Value="1"/> <SplineDoubleKeyFrame KeyTime="00:00: " Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Canvas.Triggers> First, I got a Canvas.Triggers element with an EventTrigger element. This indicates that the animation should start when the canvas is loaded. BeginStoryboard indicates that we will create a new storyboard with the name cursorblink. This name can be used to address the storyboard in code behind. DoubleAnimatonUsingKeyFrames: indicates that the animation will change the value of a double. o BeginTime: the animation will start immidiatly o Storyboard.TargetName: the animation will infect the element cursorrectangle o Storyboard.TargetProperty: the property Opactiy of the cursorrectangle will be changed o Repeatbehaviour: the animation will never stop. SplineDoubleKeyFrame: this is one keyframe in the animation o KeyTime: when is the keyframe executed o Value: what is the value of the opacity for the cursorrectangle element If you test your project, you should see a blinking cursor at the beginning of the textbox. The last problem that should be solved, is that the cursor must move with the text. This will be done in code behind. Type this line of code before the Exit Sub of the backspace in the routine AddCharacter and at the bottom of the method AddCharacter. So the code will be executed if we press the backspace or another character. ' move the cursor cursorrectangle.setvalue(leftproperty, mytextblock.actualwidth + mytextblock.getvalue(leftproperty)) This code will set the LeftProperty of the cursorrectangle element to his AcualWidth + the left value of the textblock element. Test your project for the last time, and you should have a nice working textbox in Silverlight!

Silverlight memory board ( Part 2 )

Silverlight memory board ( Part 2 ) In the first part this tutorial we created a new Silverlight project and designed the user interface. In this part, we will add some code to the project to make the