Quest for a Range control

For nearly two weeks I was on a quest to find a Range control, ie a slider with two thumbs. After going several rounds through all the resources available online and offline I figured, there isn’t a ‘free’ range control.

And I really was in need of one. Found Jerry Nixon’s answer to someone’s post on StackOverFlow which served me as a base for the control. I have no clue how to make a custom control. So have uploaded the whole project to GitHub. Feel free to contribute or file issues.

Here’s your range control! 🙂

https://github.com/alfah-plackal/CustomSlider

May the code be with you! 😀

Quick Tip #4 – Creating Row and Column Definitions through code

Xaml is a piece of cake for Grid related adjustments. But a little work needs to be done if yyou are trying to achieve the same through the code-behind.

 
</pre>
<pre>Grid parentGrid = new Grid();
RowDefinition rd = new RowDefinition();
RowDefinition rd2 = new RowDefinition();</pre>
<pre>ColumnDefinition col1 = new ColumnDefinition();
ColumnDefinition col2 = new ColumnDefinition();
ColumnDefinition col3 = new ColumnDefinition();

col1.Width = new GridLength(1, GridUnitType.Auto);
col2.Width = new GridLength(1, GridUnitType.Star);
col3.Width = new GridLength(1, GridUnitType.Auto);

parentGrid.ColumnDefinitions.Add(col1);
parentGrid.ColumnDefinitions.Add(col2);
parentGrid.ColumnDefinitions.Add(col3);

parentGrid.RowDefinitions.Add(rd);
parentGrid.RowDefinitions.Add(rd2);

Grid.SetColumn(dotBorder, 0); // Setting a Border element to (0,0)
Grid.SetRow(dotBorder, 0);

Grid.SetColumn(dateText, 1); // Setting a textblock element to (0,1)
Grid.SetRow(dateText, 0);

Grid.SetColumn(delButton, 2); // Setting a button to (0,2)
Grid.SetRow(delButton, 0);

Grid.SetColumn(SympStack, 0);// Setting a Stack panel to row 0 and columnspan of 3
Grid.SetColumnSpan(SympStack, 3);
Grid.SetRow(SympStack, 1);

parentGrid.Children.Add(dotBorder); // Adding all the elements to the grid
parentGrid.Children.Add(dateText);
parentGrid.Children.Add(delButton);

parentGrid.Children.Add(SympStack);

May the code be with you! 😀
logosmall

Quick Tip #1

Content wrap is by default not available for Buttons and Hyperlink button for both Windows Phone and Windows RT. But modifying the Content Template allows you to add Text Wrap 🙂


 <HyperlinkButton>
          <HyperlinkButton.ContentTemplate>
                <DataTemplate>
                       <TextBlock Text="{Binding}" TextWrapping="Wrap"/>
                </DataTemplate>
           </HyperlinkButton.ContentTemplate>
 </HyperlinkButton>

 

May the code be with you! 😀

chops-logo2 small

 

Integrating Google Analytics in WP/WinRT

How we had wished there was a Google Analytics SDK for windows phone and windows 8! The ease of a Google dashboard, the amount of info that it gives, the integration,  is way superior as compared to the other analytics tools available in the market.

and here is a GoogleAnalyticsSDK available in Codeplex. Works perfect and well documented! (An unusual combination :P)

Integration is a piece of cake!

Google Analytics SDK

May the code be with you! 😀

How to add multiple versions of the assembly without causing conflicts! -WP

An unusual sticky situation it is!

You have a external class, say Class Saviour , in your project. Class Saviour  uses another class, Class MostSoughtAfter from codeplex. Class Saviour has implemented Class MostSoughtAfter to suit its needs. So where ever you create an instance of Class MostSoughtAfter,  it will refer the Class MostSoughtAfter defined by Class Saviour . Suppose you need to use a function in the original Class MostSoughtAfter, and you add the dll . Visual Studio will throw a warning saying there is an ambiguity and that Class MostSoughtAfter implemented in Class Saviour is used to instantiate.

Bingo! You have multiple versions of the same class in your project and you need to reference them separately. I found a similar question in StackOverflow

Now in C# we have an “extern alias” keyword which will allow us to do the same. MSDN says

By using an external assembly alias, the namespaces from each assembly can be wrapped inside root-level namespaces named by the alias, which enables them to be used in the same file.

  1. In the solution explorer of your project, click the properties of the dll you want to reference,
  2. The Aliases field is set to ‘global’ by default. Change the global to name of your choice, say MyDLL.
  3. In the class you want to use the dll, first declare the alias right above the using statements
    extern alias MyDLL;
    
  4. To use a method in the assembly we make use of :: qualifier
    MyDLL:: System.Windows.Media.Imaging.MyClass.Resize();
    
  5. Thus a simple creation of an instance of MyClass will use the class implemented in the project. And if you want to use the original dll reference using the alias .

‘extern’  and an MSDN blog saves my day!!

References

Happy coding !! 😀

Saving a Canvas into a PNG file – WP8

This is a familiar situation that most developers run into. The need to save a canvas element to a png file.

Scenario

  • You have few strokes drawn on a canvas and you want to save it as a png .
  • You want to save the just the strokes on a transparent background.
  • You want to save the strokes along with the canvas background.
  • You want to save it with your specified sizes

I too ran into this ditch lately. And had a tough time finding a solution. A random google search will give you numerous methods, most of which is applicable only to traditional C#/.NET application.

Then I found this MSDN link. I still have’nt figured out how to use a PNGEncoder and DeCoder. If anyone finds a good blog about it, feel free to post it here. Many of the solutions I found never worked. The searches how ever led me to the WriteableBitmapEx hosted at codeplex. It had several useful functions but none to save a canvas to an image.

A week’s search, frustration, irritation,  trial & error of several broken classes finally led me to ToolStack. It is mentioned that it works for Windows Phone 7.1 but I have implemented in WP8 project. There 3 classes which will do the job neatly, although compression is not yet implemented.

  1. ToolStackPNGWriterWBext.cs – Implementation of WriteableBitmapExtensions
  2. ToolStackPNGWriterLib.cs – Core Class and implementation of saving to PNG
  3. ToolStackCRCLib.cs – Additional classes needed for ToolStackPNGWriterLib.

Getting it working on your project.

  1.  Download all necessary files from ToolStack. Download the example too and run it first so that you can understand how it works.
  2.  Add the Classes mentioned to your project.
  3. Create a Writeablebitmap of your canvas and then use the WritePNG function to save
    </pre>
    WriteableBitmap wb = new WriteableBitmap(MyCanvas, null);
    wb.WritePNG(MyStreamforWriteAsync);
    <pre>

And there your image lies in the specified location, in the size of your canvas! 🙂  Remember to add the necessary using statements in your file. Any canvas element can be captured into a WritableBitmap, even an InkPresenter can be captured.

NOTE TO WIN8 DEVELOPERS

If you try to implement the same functionality in a metro app, you’re in for trouble mate. Because the very simple function which allows to capture a canvas onto a WriteableBitmap does not exist! There is a method to save the inkstrokes though, but only the portion containing the stroke will be saved. You cannot save it along with its transparent/colored background. I consulted few developers and they seem to have no answer too. It seems this is possible in JavaScript.

Lets see if Windows 8.1 contains something for us developers in this direction.

Happy Coding!! 😀

Inking in WindowsPhone 8 – Part 1

Those who are familiar with Windows 8 will know that the platform gives us an elaborate, clean and easy to use InkManager class which allows you all the stroke manipulation you want.

As a part of my new project I was trying out the Inking features in WP8 only to find that there is no InkManager class at all!!. 😦
MSDN gives a meager list of classes to manipulate and interact with ink in windows phone. A quick search in the vast MSDN territory will give you an InkPresenter element which enables you to display the strokes. This does not fit my needs hence, I started the traditional way, to capture the touch inputs and then display them.

Create a canvas in my MainPage and give a white background image for the it.

</pre>
<Canvas x:Name="InkCanvas2" Height="150" HorizontalAlignment="Left" Width="471" Margin="0" >
<Canvas.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/theme_img_note.png"/>
</Canvas.Background>
 </Canvas>
<pre>

Declare MouseMove and MouseLeftButtonDown Event handlers for the canvas in the constructor and define them as follows.

</pre>
void InkCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 {
 currentPoint = e.GetPosition(InkCanvas); // captures the first point
 oldPoint = currentPoint;
 }

void InkCanvas_MouseMove(object sender, MouseEventArgs e)
 {
 currentPoint = e.GetPosition(this.InkCanvas);

Line line = new Line() { X1 = currentPoint.X, Y1 = currentPoint.Y, X2 = oldPoint.X, Y2 = oldPoint.Y };
 line.Stroke = StrokeColorBrush;
 line.StrokeThickness = StrokeWidth;//I have predefined the color and width for the stroke

line.StrokeStartLineCap = PenLineCap.Round; // This gives a round tip to the line
 line.StrokeEndLineCap = PenLineCap.Round;
 line.StrokeLineJoin = PenLineJoin.Round;

this.InkCanvas2.Children.Add(line);
 oldPoint = currentPoint;
 }
<pre>

😀 . The lines need to be optimized, I’m working on that. Hope this helps somebody!

test

Here are few references which I found useful.

  1. .MSDN sample
  2. .Net Speaks
  3. Codeguru

In the next post I’l be explaining how to save these images as PNG in folders.

Happy coding!!! 😀