Post Comments Using Silverlight

During my search on Google I have seen many web sites and there layouts But the one which really impress me is the how web sites owner ask to the user to post their comments. The layout of the posting the feedback about the post or article on website or blog is necessary as website or blog know about his/her post feedback and improve the future posts. The layout of the how to post comments against post or article is integral part and In this post I will show you one of the layout I have like most. You can see the layout in the image.

Image 1

In the above image you can see that icon is displayed in the textbox control which looks quite nice. In the above image you can see the controls are arranged in two columns one for the label and second one for the textbox controls. One lable to show the total characters entered in the comments text box control and the button control for submit. I have not used icon for the comments multiline text box. For this I have created class of ImageTextBox which inherites from the TextBox control. The ImageTextBox control which Inherit from the TextBox control has one additional dependency property with the name of Icon to add the icon with the Text box control. The code is shown in the List 1 . The Icon dependency property is of ImageSource type.

public class ImageTextBox : TextBox
    {
        public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(ImageSource), typeof(ImageTextBox), new PropertyMetadata((ImageSource)null));

        public ImageSource Icon
        {
            get { return (ImageSource)(GetValue(IconProperty)); }
            set { SetValue(IconProperty, value); }
        }
    }

List 1

Next is to create the custom style for the ImageTextBox which is same as the Text Box But here I have added the Image control which of size 20*20 height and width of the Image control. The xaml code for the style is shown in the list 2 I have added only the part which is used to show the Image in the style not the whole style. Here you can see that I have bind the Source of the Image control to the Icon property of the ImageTextBox.

<Grid  >
    <Grid.ColumnDefinitions >
         <ColumnDefinition Width="25"/>
         <ColumnDefinition />
    </Grid.ColumnDefinitions >
    <Image Source="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}" Width="20" Height="20" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="3,0"/>
    <ScrollViewer Grid.Column="1" x:Name="ContentElement" BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}" VerticalAlignment="Center"/>
</Grid >

List 2

Next is to add the ImageTextBox control in the form by adding the namespace add the top of the main form and name it to the local which you can see in the list 3. And then the local:ImageTextBox when you set the properties of the ImageTextBox control you can see the Icon property there which will take the Image path. I have used the png for the all the icon here in my sample. The code for adding the ImageTextBox is shown in the List 3.

xmlns:local="clr-namespace:Post_Comments.User_Control"   

<local:ImageTextBox Grid.Column="1" Grid.Row="1" Height="30" Icon="Icon/User.png" />

List 3

Next I have add the converter for the character count of the comments field. The converter is simple one and is listed down in the List 4. You can see that I have just return the length of the string passed to the converter as I have bind the counter label with the text propperty of the comments field. I have added the only the converter function not the convert back which I have not implemented here.

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return value.ToString().Length;
        }

List 4

Note: I have add the ImageTexBox control in the User control folder and the converter in the converters folder.

You can download the source code from here 

All and any comments / bugs / suggestions are welcomed!