Share this:

Making a Carousel Number Picker for Windows 8 Store Application

Alright, content will be basically the same with a previous blog, but with screenshots this time J

So you want to create a nifty and rockin control for a Windows 8 Store application to choose a number. There are a few reasons to do this and not a textbox. First you want to limit the entries to only numbers. Second, you want it to give your app’s user a nice experience. Something like this:

So here goes:

Fire up Visual Studio and create a new Windows 8 Store application

Then in mainpage.xaml, drop in a combobox and add a carouselpanel control inside it, you should have xaml that might look like this:

<Grid Background=”{StaticResource ApplicationPageBackgroundThemeBrush}”>

<ComboBox x:Name=”myCarousel” Height=”100″ Width=”100″>

<ItemsPanelTemplate>

<CarouselPanel/>

</ItemsPanelTemplate>

</ComboBox>

</Grid>

In case you are the drag and drop type of guy, you won’t be able to see the CarouselPanel control in the toolbox. So you should type it in

Then what you will need to do is to populate the list. You can choose whatever way you want but for this sample I will populate it in code.

Nothing fancy. Then run this and see what it looks like. Weird right? So let’s add a little formatting J

So you should have something like this in your xaml

<Grid Background=”{StaticResource ApplicationPageBackgroundThemeBrush}”>

<ComboBox x:Name=”myCarousel”
Background=”Transparent” Height=”50″ Width=”50″>

<ItemsControl.ItemsPanel>

<ItemsPanelTemplate>

<CarouselPanel />

</ItemsPanelTemplate>

</ItemsControl.ItemsPanel>

</ComboBox>

</Grid>

If you run and use this you will see that it does open up a control that displays the numbers

But what will mess you up is the fact that if you choose a number, it will be behind the Combobox’s button!

Here I have encircled what remains (or what is visible) of the number 8 when I chose it.

So what do you do now?

Solution is to remove the Combobox’s dropdown button. The search term “How to remove or hide combobox dropdown button” might work fine at this point, or just read on.

What we want to do now, is to take the combobox control apart and remove that button. Wait, before you fire up blend, please allow me to stop you, I will use Visual Studio for this.

A nice addition to Visual Studio is the ability to edit the template of a xaml control, much like the way you can do it in blend.

You right-click the control you want to edit the template of and chose edit

I chose to Edit a Copy

And I also chose to place the definition in the Resource dictionary, and to apply the style only to this textbox.

Why?

1. Place it in a common place like StandardStyles.xaml, away from your current page’s xaml file. As template styles tend to be in the form of huge xaml codeblocks.
2. I didn’t apply it to all, as it would have made ALL comboboxes devoid of a button.

And now to edit the style, but read it first!

Here we see that a combobox has items inside a grid with 2 columns. One is explicitly sized at 32 units, and the other is sized to adjust (*)

Solution to the problem, I change the size of the column where the button is to zero.

Save and run it again and you will no longer see the button, and be able to see the number you choose.

Kinda looks weird so we set the alignments to center the displayed number by changing the property of the ContentPresenter, still in the combobox style

 

<ContentPresenter x:Name=”ContentPresenter” HorizontalAlignment=”Center” Margin=”{TemplateBinding Padding}” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”/>

 

And you will have:

I would say that is centered quite nicely.

And with all that done, you now have a control that shows a set of numbers in a very nice UX. J

Enjoy!

 

 

 

 

 

TFSPreview Connection Problem

If you fall into the situation where TFSPreview tells you you don’t have the proper credentials to connect, but you can connect using IE, the quick solution is to clear the browsing history of IE including saved passwords.

How to make a Carousel control for Windows 8 using C#

The first time I saw this control I was amazed. Really slick UX, I told myself.

So I set out to use it. But.. can’t find it in the toolbox of VS2012.. such sadness and grief. So I go and research some more, and found that it was called a CarouselPanel. Nice!

Had some trouble getting it to work, specially on the UI. So to save you the trouble, here is how it goes:

So, open up visual studio and create a new store app..

Then add a combobox to it and modify the xaml to look like this:

<ComboBox x:Name=”CarouselContainer” Background=”Transparent” Height=”50″ Width=”50″
ScrollViewer.IsVerticalScrollChainingEnabled=”True”
ScrollViewer.VerticalScrollBarVisibility=”Hidden”>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<CarouselPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ComboBox>

Aight, that, you can populate any way you want. Either through C# or xaml, whatever floats your boat.

Then using Visual Studio, while in design view.. do the following:

1. Rightclick the combobox

2. In the appearing popup, highlight Edit Template. this will trigger another panel where

3. you click Edit a Copy. This will open up a dialog. It will ask you for a name, remember it. You can also choose to apply whatever styling you will be creating to All comboboxes or just the one you are creating.

This “template” thingie can be viewed as the styling of the control. So in essence, what you will be doing is taking the combobox apart and modifying it to look like what you want.

4. So, what you just did results in VS adding a huge chunk of code showing you how the combobox is drawn. (in a nutshell) and you will need to observe some stuff. If you can’t find it, it will be here

<Page.Resources>
<Style x:Key=”ComboBoxStyle1″ TargetType=”ComboBox”>

Looks logical right? It is a stlye called ComboBoxStyle1 that applies to a control of type ComboBox.

So sniff around a bit, click on the combobox and see how the Xaml shows that it is actually composed of a Grid with two columns. The column on the left holds the stuff that you will bind to your combobox, and the column on the right holds that button with a dropdown arrow (which is actually a glyph).

<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate TargetType=”ComboBox”>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”32″/>
</Grid.ColumnDefinitions>

Next task is to determine how to remove the dropdown arrow from the combobox. Hey, it will be a store application UI so I want to remove that, and like I said in the first sentence, I want to copy a control that I saw on my phone.

5. Set the column that holds the button to Width=0. This will hide the button. Don’t worry about re sizing the column on the left, it’s width is defined as a star, so it will automatically widen to take all available space.

your resulting xaml will be

<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”0″/>
</Grid.ColumnDefinitions>

And with that, all you need to do next is to set the vertical and horizontal alignment of the ContentPresenter to Center.

You can bind or populate this any way is most comfortable to you. And you can still hook the selected*.* events to their respective triggers.

 

Enjoy!

 

 

 

How to use Windows Azure Profiling Tools in Visual Studio

Just recently, I have been looking for a tool to profile my Windows Azure application when it runs on Azure. Yeah most browsers have that F12 dev tools, but they just won’t cut it for what I want. What I didn’t know, is that I didn’t look very far. As it so happens, the Windows Azure SDK includes a profiler that will profile your app (including code) when it runs on Windows Azure.

Was a bit hesitant so I decided to test it myself.

Steps would be:

1. Create an azure worker role with two functions, one is okay, and the other is really bad (performance hog)
2. Deploy it and have it profiled
3. Hopefully the profiler will be able to identify which function is better, or which one needs improvement

Sounds sensible enough J

So I fire up Visual Studio and create a worker role.

So, what to put.. friend of mine Jon Limjap pointed me here and here is what I have now:

///
<summary>

/// Function I got from Stackoverflow

///
</summary>

///
<param name=”stringLength”></param>

///
<returns></returns>

private
string RandomStringGood(int size)

{

System.Text.StringBuilder builder = new
StringBuilder();

Random random = new
Random();

char ch;

for (int i = 0; i < size; i++)

{

ch = Convert.ToChar(Convert.ToInt32(Math.Floor(26 * random.NextDouble() + 65)));

builder.Append(ch);

}

 

return builder.ToString();

}

///
<summary>

/// modified it to be a bad function (my specialty hahaha)

///
</summary>

///
<param name=”size”></param>

///
<returns></returns>

private
string RandomStringBad(int size)

{

String builder = string.Empty;

Random random = new
Random();

char ch;

for (int i = 0; i < size; i++)

{

ch = Convert.ToChar(Convert.ToInt32(Math.Floor(26 * random.NextDouble() + 65)));

builder += ch;

}

 

return builder.ToString();

}

 

Then I call them

public
override
void Run()

{

// This is a sample worker implementation. Replace with your logic.

Trace.WriteLine(“$projectname$ entry point called”, “Information”);

 

while (true)

{

RandomStringBad(1);

RandomStringGood(1);

Thread.Sleep(10000);

Trace.WriteLine(“Working”, “Information”);

}

}

 

Short, simple and should do the job (fingers crossed)

So, then I use the profiling tool.. I deploy this to my Azure Subscription using Visual Studio

With these settings

I checked Enable Profiling then published it.

Some waiting involved..

Took while but when it is ready..

You can start profiling the workerrole

Again some waiting

Then I saw something that caught my attention

So I guess there is something that will need to be done with the symbols. But my test app is just a barebones app so I guess there is no need to worry about that just now.

I tried visiting the browser version of the Azure management portal.. and it showed activity

Annndddddd… here are the results!

The profiler indicates that RandomStringBad uses more resources than RandomStringGood!

And clicking on that item on the list takes me to the code

So I guess it works!

Creating and Opening a Windows Azure Website

Microsoft announced the addition of the capability to create new websites straight off the Windows Azure portal. This is a great development but was not able to try it out immediately.

So, late as it is, here goes my attempt.

Logging on to the new portal, you will notice the “New” link..

Just hit that, and

I go the way of creating a new website based on a template.

There are several templates on line, I choose Orchard as it is close to my heart J

 

It asks me for a name, fair enough

 

Then I finish it.

It takes several minutes to deploy. But once you have it started, you have an Orchard CMS up and running on the cloud!

 

Now all is well and good, I try it out by clicking the url (or clicking the “Browse” button at the lower part of the page).. so that brings me to my brand spanking new Orchard powered CMS.

Configuring, editing and using the CMS will be the same is if it was hosted somewhere else. Nothing fancy to learn

Then you will have your 100% running Orchard CMS Website in minutes!

Of course complete with the dashboard

This blog will not include HOW to maintain an Orchard Website, that can be found in Orchard’s own website.

I was asked, what to do if one wants to download an offline copy of the website from windows azure to edit in his/her machine. Well the new Azure supports FTP and GIT, but an easy way is to find the “WebMatrix” button at the bottom of the page and clicking it. That will either download a fresh install of webmatrix (if not yet done) or fire up an instance of WebMatrix, already connected to your existing Orchard app on Azure.

It might take a few minutes depending on your connection speed.

But after that, it will start downloading all the needed files to your machine.

And afterwards, you have a working local copy of your Orchard powered CMS site!

So there it is! Creating an Orchard CMS through the Windows Azure Portal.

Migrating a Data Centric Application to Windows Azure

My last blog entry was to illustrate some concerns that I have encountered when one is to develop an application to Windows Azure. So that comes as a bit of an oversight. I was looking at a world where there are no existing applications. So I backtracked a bit and will need to deliver a separate blog for Migrating or converting an existing web application to Windows Azure. Because 99% of the web applications out there are of course already existing.

But before we dive into that, I believe it will only be prudent to first give a definition of what an application built or migrated to Windows Azure should look like; and to define the scope of what a migration is.

First, the scope. Migration, as defined is the movement from one place to another. Not coexistence. As simple as that, we define what migration is. The existing web application will be MOVED from one location to another, with no turning back.

Then we define what is an application built for Windows Azure. It is very often that we hear people refer to an application on Windows Azure as a “Cloud Application”. Which is fair enough, as Windows Azure is, Microsoft’s cloud platform service. But I must state clearly, that not all applications running on Windows Azure were built for Windows Azure, hence, I would not consider them as cloud applications.

A cloud application, is one that was engineered and built in such a way that it will not run on any other platform other than the cloud. It will also take advantage of, and leverage everything that the cloud has to offer, such as Scaling, Multi-tenancy, CDNs, blob storage etc. If the application is not built as such, I will not call that said application as a Cloud Application or an application built for Windows Azure.

Simply put, an application must be deployed to Windows Azure, use the services offered (like Web Roles, Worker Roles, Cloud Storage etc) in the proper way, to be considered as a cloud application.

As I was writing this blog entry, I stumbled upon a webpage that illustrates everything I want to illustrate and more. J

So here it is.