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!

What is My IP

I have created a simple application which will tell the user what is IP address of the user and also the country name and country is also displayed. For this I have used the free web service which you can find here they have other free services as well.

For this application I have used the Image and the TextBlock control in my application and the web service I have used from the here. The code is simple one I have used one class which is used as the view model for the main user control ( with the name MainPageViewModel and which has one property of MyIPAddress of type GeoIP type. which is available when you add the service reference) and the one converter class which is listed in the List 1.The code in the List 1 is simple one here I have passed the country code to the converter and then by concatenating path with the country code and the png extension I return the image path of the country flag. if the country code is empty the default image will be return which you can see in the Image 1.  And if the country code and the other information is successful then you can see the output as shown in the Image 2.

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{

string strReturnValue = "Images/Default.png";

string strCountryCode = value as string;

if (strCountryCode.Trim() != string.Empty)
strReturnValue = "Images/" + strCountryCode.ToUpper() + ".png";

return strReturnValue;
}

List 1

Image 1

Image 2

Note: If your country flag is not displayed please let me know with the country code so that I can update it on my example as well. 

I have only uploaded the web side not the Silverlight application.  You can download the source code from here and you can open the What Is MyIPTestPage page in IE or in your web browser to check the application.

All and any comments / bugs / suggestions are welcomed!