Working with the TextBox Control In Silverlight 4.0
This exercise demostrates the use of the TextBox control in Silverlight by creating a simple application that will request the red,green,and blue values to fill an ellipse with a given color. The resulting application will appear as shown below.
Here is the codes.
1. In Visual Studio, create a new Silverlight application named TextBoxControl. Allow Visual Studio to create a Web Application project to host your application.
2. In the MainPage.xaml file, within the root Grid element, add three RowDefinition items, as follows:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height = "50" />
<RowDefinition Height = "50" />
<RowDefinition />
</Grid.RowDefinitions>
</Grid>
Add three Textbox and textarea controls contained in the horizontal-oriented StackPanel to the first row, a Button control to the second row, and an Ellipse control to the third row. In addition, plcace a textblock in the thrid row to stack on top of the Ellipse control for error-reporting purposes. Name each of the TextBox controls, as well as the Button control and the TextBlock. These additions are shown in the following code:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height = "50" />
<RowDefinition Height = "50" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Orientation = "Horizental" HorizontalAlignment = "Center">
<TextBlock VerticalAlignment = "center" Text="Red:" />
<TextBox Name="txtRed" Height = "24" Width = "50" Margin="5" />
<TextBlock VerticalAlignment = "center" Text="Green:" />
<TextBox Name="txtGreen" Height="24" Width="50" Margin="5" />
<TextBlock VerticalAlignment = "Center" Text="Blue:" />
<TextBox Name="txtBlue" Height="24" Width="50" Margin="5" />
</StackPanel>
<Button Name="btnTry" Content="Try Color" Height="24" Width="100" Grid.Row="1" />
<Ellipse Name="ellipse" Grid.Row="2" Stroke="Black" StrokeThickness="5" Margin="20" />
<TextBlock Name="lblColor" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" FontFamily="Arial" FontWeight="Bold" />
</Grid>
Now add the Click event to the Button control. Do this in the code behind.
public partial class MainPage: UserControl
{
public MainPage()
{
InitializeComponent();
this.btnTry.Click==new RoutedEventHandler(btnTry_Click);
}
void btnTry_Click(object sender, RoutedEventArgs e)
{
throw new NotImplementedException();
}
}
3. When the button is clicked, the application will change the Fill property of the ellipse control, which expects a SolidColorBrush(). You can create the SolidColorBrush using the Colors.FromArgb() method, which accepts four arguments: one for opacity, and one byte each for the red, green, and blue values. You will get the red, green, and blues values from the TextBox controls using the Text property.
void btnTry_Click(object sender, RoutedEventArgs e)
{
this.ellipse.Fill = new SolidColorBrush(Color.FromArgb(255, byte.Parse(this.txtRed.Text), byte.Parse(this.txtGreen.Text), byte.Parse(this.txtBlue.Text)));
}
Since the values for red, green and blue must be an integer from 0 to 255, you can either validate them using Silverlight validation or take the easy way out and just wrap your code in a try/catch block, and then report the error using the TextBlock. you'll go with the latter approch here. To keep things clean, you will make sure the error message is cleared if all workds correctly. Here is the updated code:
void btnTry_Click(object sender, RoutedEventArgs e)
{
try
{
this.ellipse.Fill = new SolidColorBrush(Color.FromArgb(255, byte.Parse(this.txtRed.Text), byte.Parse(this.txtGreen.Text), byte.Parse(this.txtBlue.Text)));
this.lblColor.Text="";
}
catch
{
this.lblColor.Text="Error with R,G,B Values" ;
}
}
4. Build and run the application to see what you get. Type 255, 0 and 0 in the Red, Green, and Blue text boxes, respectively, and then click the Try Color button .You shoud see the ellipse turn red. Just fro the fun of it, if you leave one of the values blank or enter a value other than 0 through 255, you will see the error message.
