Test post to try out Framer

How to Translate and Play/Speak using Microsoft Soap APIs

Some options that are provided by Microsoft to do translation in your application are

• AJAX Interface
• SOAP Interface
• HTTP Interface

In this post I am going to explain translation using SOAP related APIs. You can download a ready to run code, which I have used in this post, from here. Note that in order to run the sample code you will have to provide your AppID(discussed below) in AppID variable.

As I mentioned above, first must thing you have to do in order to do translation in your application is get your AppID from Microsoft. Only after getting this AppID you will be able to use translation APIs. This ID is free of charge and you can get it from here. Do read terms and conditions about using free AppID.

In your .Net 3.5 or above application first of all add a service reference of Microsoft's Web Service that provides the translation related services. Web Service address is http://api.microsofttranslator.com/V2/Soap.svc.  I have given it name 'TranslationService' in my code.

   1:  TranslationService.LanguageServiceClient client = new TranslationService.LanguageServiceClient ();

   2:  //translating from "en" english to "de" german.

   3:  string germanString = client.Translate(AppID, "Hello, how are you", "en", "de", "text/plain", "general");

   4:  //translating back from "german" to "english"

   5:  string englishString = client.Translate(AppID, germanString, "de", "en", "text/plain", "general");

In code snippet above, I am first of all creating an instance of LanguageServiceClient. After that I am translating a "Hello, How are you" from English to German and then I am translating result back in to English. AppID in above code is the free AppID I got from Microsoft. Notice that I am passing "text/plain" in content type parameter which tells the translation service that it is a simple plain text. You can also translate HTML pages by passing "text/html" in content type.

Microsoft's translation service's also provide speaking related features. For example if you want to listen/play a string in English language you can do something like this.

   1:  //this method call will return me url of media file that speaks/plays "Hello, How are you"

   2:  string speakEnglishURL = client.Speak(AppID, "Hello, How are you", "en", "audio/wav");

In code snippet above, I am specifying that provide string "Hello, How are you" is in "en" or English. You can use the returned URL to play or listen to the actual sound.

Microsoft has provided a very simple API for programmers and developers for translation and speaking related services. Now its job of developers to come up with creative ideas which can make maximum use of these APIs and change the world :). In my opinion Windows Phone 7 developers can build very powerful apps using these APIs. You can download complete ready to run code from here. Don't forget to get AppID can put it in 'AppID' variable in sample code, otherwise it won't run.

When not to use Count in C#

During my daily development I have to deal with IEnumerables quite often. Old habits takes time to go but now I try to use LINQ to Objects as much as possible in my code while dealing with IEnumerables. LINQ to Objects or LINQ in general is one of the best thing that have been added in C# in past couple of years in my personal opinion.

As I said, old habits take time to go, one habit which I am trying to get rid of these days is to avoid using Count property. At countless places in my code I have used this piece of code and I am sure many of you would have done same

   1:  if(SomeCollection.Count == 0)

   2:      DoSomething();

   3:  else

   4:      DoSomethingElse();

In above piece of code you just want to know whether the collection contains any item or not and based on that you will perform some operation. Problem is that to find this yes or no you are traversing the whole list when you use Count. Let's say your collection contain 1000 element. You are traversing whole list just to find out whether there is any item in the list or not. Which doesn't make any sense at all. Instead what we can use is a simple LINQ method 'Any'.

   1:  if(SomeCollection.Any())

   2:      DoSomething();

   3:  else

   4:      DoSomethingElse();

Use of 'Any' will make your code much faster because instead of traversing whole collection 'Any' will return as soon as it finds that there is an element in your collection or even in case there isn't any at all. This is just one example I am sure there will be many more examples in my daily development which can be simplified using LINQ to Objects.

Note that "if you are starting with something that has a .Length or .Count (such as ICollection<T>, IList<T>, List<T>, etc) - then this will be the fastest option, since it doesn't need to go through the GetEnumerator()/MoveNext()/Dispose() sequence required by Any() to check for a non-empty IEnumerable<T> sequence. For just IEnumerable<T>, then Any() will generally be quicker, as it only has to look at one iteration. However, note that the LINQ-to-Objects implementation of Count() does check for ICollection<T> (using .Count as an optimisation) - so if your underlying data-source is directly a list/collection, there won't be a huge difference. In general with IEnumerable<T> : stick with Any()." Taken this paragraph from here

How to find is DataGrid have Scroll Bars in WPF?

One of my WPF application was using a DataGrid and I needed to find out at a certain point of time whether the Scroll Bar (vertical or horizontal) is visible or not. If you ever run into scenario like this you can find this out using code given below.

   1:  ScrollViewer scrollViewer = FindVisualChild<ScrollViewer>(dataGrid);

   2:  Visibility verticalBarVisibility = scrollViewer.ComputedVerticalScrollBarVisibility;

   3:  Visibility horizontalBarVisibility = scrollViewer.ComputedHorizontalScrollBarVisibility;

In code snippet above 'dataGrid' is my DataGrid.

   1:  private childItem FindVisualChild<childItem>(DependencyObject obj) where childItem : DependencyObject

   2:  {

   3:       for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)

   4:       {

   5:            DependencyObject child = VisualTreeHelper.GetChild(obj, i);

   6:            if (child != null && child is childItem)

   7:                 return (childItem)child;

   8:            else

   9:            {

  10:                childItem childOfChild = FindVisualChild<childItem>(child);

  11:                if (childOfChild != null)

  12:                     return childOfChild;

  13:            }

  14:       }

  15:  return null;

  16:  }

After running this piece of code in 'verticalBarVisibility' and 'horizontalBarVisibility' you will have the exact state of DataGrid's vertical and horizontal scroll bars.

Hide Extra Blank Column from WPF DataGrid

If you have worked with WPF DataGrid you will be familiar with the problem of extra blank column which appears after last column inside DataGrid. It looks ugly and definitely you would like to get rid of that column. In this post I am going to talk about two ways to hide that extra column. First approach will be based on popular MVVM pattern and second will use a simple event in code behind file to hide that column. You can download a ready to run  code from here which demonstrate both scenarios.

In both scenarios I am setting code behind file as DataContext for my MainWindow and I am binding my DataGrid with a property 'MyView', declared in code behind file, which returns a DataTable as DataView.

   1:  public DataView MyView

   2:  {

   3:       get

   4:       {

   5:            DataTable table = new DataTable();

   6:            DataColumn column1 = new DataColumn("Column1");

   7:            DataColumn column2 = new DataColumn("Column2");

   8:            table.Columns.Add(column1);

   9:            table.Columns.Add(column2);

  10:            //create ten rows

  11:            for (int i = 0; i < 10; i++)

  12:            {

  13:                 DataRow newRow = table.NewRow();

  14:                 newRow["Column1"] = i.ToString();

  15:                 newRow["Column2"] = (i + 100).ToString();

  16:                 table.Rows.Add(newRow);

  17:            }

  18:       return table.AsDataView();

  19:       }

  20:  }

In MVVM based scenario I am encapsulating my DataGrid inside a Grid. Inside Grid you have to declare same number of columns as in your DataView. I am declaring two columns in my Grid because I have two columns in my DataView. I am setting width of my Grid's columns equal to the actual width of columns inside DataGrid.

   1:  <Grid>

   2:       <Grid>

   3:            <Grid.ColumnDefinitions>

   4:                 <ColumnDefinition Width="{Binding ElementName=Col1, Path=ActualWidth}"/>

   5:                 <ColumnDefinition Width="{Binding ElementName=Col2, Path=ActualWidth}"/>

   6:            </Grid.ColumnDefinitions>

   7:   

   8:            <DataGrid Grid.Column="0" Grid.ColumnSpan="2" ItemsSource="{Binding Path=MyView}" AutoGenerateColumns="False">

   9:                  <DataGrid.Columns>

  10:                      <DataGridTextColumn MinWidth="100" x:Name="Col1" Header="Column1" Binding="{Binding Path=Column1}"/>

  11:                      <DataGridTextColumn MinWidth="100" x:Name="Col2" Header="Column 2" Binding="{Binding Path=Column2}"/>

  12:                 </DataGrid.Columns>

  13:            </DataGrid>

  14:       </Grid>

  15:  </Grid>

That's all, it will do the trick. You won't see any ugly extra column inside your DataGrid.

The second scenario, a non-MVVM based scenario, is sample. I am just handling DataGrid_AutoGeneratingColumn' event in code behind file.

   1:  <DataGrid ItemsSource="{Binding Path=MyView}" AutoGenerateColumns="True" AutoGeneratingColumn="DataGrid_AutoGeneratingColumn"/>

In the actual event handler I am setting width of last column of MyView equal to 'Star'. Star in terms of WPF Grid Length means take all available space. So the last column of DataGrid will take all available space including space of extra blank column and as a result you won't see any extra blank column in DataGrid.

   1:  private void DataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)

   2:  {

   3:       if(e.Column.Header == "Column2")

   4:            e.Column.Width = new DataGridLength(1,  DataGridLengthUnitType.Star);

   5:  }

These are the two simple ways to get rid of the extra blank column which appear inside WPF DataGrid. You can download ready to run code I showed above from here.

IsMouseOver Trigger not working in WPF

In this post I will explain the problem I faced when I tried to handle IsMouseOver property of a Button in WPF and the solution or right way to do. I was working on a Window which had a Button and I wanted to override the default color schemes related to Button. For example, if you put your mouse over a Button in WPF, by default Button's background color will change light blue. I wanted to override this light blue color with some color of my own choice and similarly I wanted to change background color of Button when button goes in to pressed state.

First piece of XAML I wrote to achieve the change in background color on mouse over was this.

   1:   <Button Width="100" Height="50" Content="Click Me!">

   2:        <Button.Style>

   3:             <Style TargetType="{x:Type Button}">

   4:                 <Style.Triggers>

   5:                      <Trigger Property="IsMouseOver" Value="True">

   6:                           <Setter Property="Background" Value="LightGreen"/>

   7:                      </Trigger>

   8:                 </Style.Triggers>

   9:            </Style>

  10:       </Button.Style>

  11:  </Button>

I ran my application and on putting mouse over the Button I saw same old light blue color in Button's background instead of light green which I specified in XAML. When I looked closely I found out that on putting mouse over Button, for just a moment, Button's background color was changing to green and then immediately it changed to light blue. So what was I missing or doing wrong?

On digging deeper in to this issue I found out that Button in WPF has a default control template. Button was changing it's background color to light blue according to that default control template. When I applied my own trigger on Button, saying that change background color to light green when mouse comes over, as a result two triggers existed for the Button at same time. First one was the WPF's default(which changes background color to light blue) and second was the one which I defined in XAML. As WPF supports multiple triggers on same property, both triggers were working perfectly fine with one another. I think my custom trigger had precedence over the default one thats why WPF was applying my custom trigger first, because of which I was able to see light green background for a moment. After that WPF applied the second trigger, the WPF's default one, which changed the background color of Button to light blue.

The correct way to override the Button's default behavior is by overriding default control template. This can be done by following XAML below.

   1:  <Button Width="100" Height="50" Content="Click Me!">

   2:       <Button.Template>

   3:            <ControlTemplate TargetType="{x:Type Button}">

   4:                 <Border x:Name="bdr_main" CornerRadius="20" Margin="4" BorderThickness="1" BorderBrush="Black" Background="LightGray">

   5:                      <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="8,6,8,6" ContentSource="Content" />

   6:                 </Border>

   7:                 <ControlTemplate.Triggers>

   8:                      <Trigger Property="IsMouseOver" Value="True">

   9:                           <Setter TargetName="bdr_main" Property="Background" Value="LightGreen"/>

  10:                      </Trigger>

  11:                      <Trigger Property="IsPressed" Value="True">

  12:                           <Setter TargetName="bdr_main" Property="Background" Value="Red"/>

  13:                      </Trigger>

  14:                 </ControlTemplate.Triggers>

  15:            </ControlTemplate>

  16:       </Button.Template>

  17:  </Button>

As you can see in above XAML, instead of creating triggers on top of default control template, I am now defining the triggers inside overridden control template. Once you define your own control template, you gain full control of a control's default behavior and layout. In XAML above I have changed the default rectangular shape of WPF's Button to a Button which is more round or circular from the corners.

You can download a ready to run sample based on this post from here.

ScrollViewer causing Slow Performance in WPF

In this post I am going to talk about the performance hit you might get in your WPF application if you are using ScrollViewer. ScrollViewer is used in WPF to display content in a smaller area as compared to content's actual size. In other words, if your content is large and you want to display it in a smaller area, you can put your content inside a ScrollViewer. ScrollViewer will then use scroll bars to display your complete content in smaller area.

If you are planning to use ScrollViewer or you are already using it in your application you might face some performance hit. This performance hit will only be visible if the content you are placing inside ScrollViewer is too large. You can download a ready to run application from here to see the performance hit with and without ScrollViewer. In my case, I am using ScrollViewer around a DataGrid whose ItemsSource is a DataTable. My DataTable contains 1000 rows. 1000 rows are more than enough to make sure that the content is large and it can't be displayed completely without scroll bars.

In my sample application's main view I have a Grid which contain two rows. First row has a Button while second row has a DataGrid enclosed inside a ScrollViewer.

   1:  <Grid>

   2:       <Grid.RowDefinitions>

   3:            <RowDefinition Height="30"/>

   4:            <RowDefinition/>

   5:       </Grid.RowDefinitions>

   6:       <Button Grid.Row="0" Click="Button_Click">Populate Grid</Button>

   7:       <ScrollViewer Grid.Row="1">

   8:            <DataGrid Grid.Row="1" Name="dataGrid" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch"/>

   9:       </ScrollViewer>

  10:  </Grid>

As you can see in XAML above, I am handling click event of button. In this event I am creating a DataTable with 1000 rows and setting this DataTable as ItemsSource of my DataGrid.

If you run the application I specified earlier, you will see a "Populate Grid" button on top. Click this button to populate the DataGrid. By default, as you can see in XAML, DataGrid is inside ScrollViewer. When you will click "PopulateGrid" button, WPF will take around 5 seconds(at least on my system) to display the content of DataGrid. Now let's do a slight change in XAML and get rid of ScrollViewer.

   1:  <Grid>

   2:       <Grid.RowDefinitions>

   3:            <RowDefinition Height="30"/>

   4:            <RowDefinition/>

   5:       </Grid.RowDefinitions>

   6:       <Button Grid.Row="0" Click="Button_Click">Populate Grid</Button>

   7:       <!--<ScrollViewer Grid.Row="1">-->

   8:            <DataGrid Grid.Row="1" Name="dataGrid" MinRowHeight="25" AlternatingRowBackground="LightGray" MinColumnWidth="100" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ColumnHeaderHeight="35"/>

   9:       <!--</ScrollViewer>-->

  10:  </Grid>

As you can see I just have commented out the ScrollViewer. Now DataGrid is directly inside second row of Grid. After making these changes run the application again and click the populate button. This time WPF will display content of DataGrid without any delay or taking anytime.

So what could be the reason behind this performance hit? I think when we are placing the DataGrid inside ScrollViewer, all default UI Virtualizations of DataGrid are getting void as it is now inside ScrollViewer and as a result UI is taking so much time to load the contents of DataGrid.
You can download the ready to run application from here and play with both scenarios.