CodeJS

Blog

  • Progress Ring Control – Universal Apps

    I was installing Windows 10 Technical Preview on my machine last month, and I was welcomed by this nice installer screen: The first thing I noticed in this screen is the nice progress ring in the middle. Unfortunately, non of the Winrt native controls we have support this behavior (progress bar is a linear bar, progress ring is just a simple animation). so I wanted to implement something similar. I did a very simple implementation, this how you can use it: Add the following namespace to your xaml page: xmlns:controls="using:ExtendedProgressRing" Add this xaml snippet to your grid: <controls:ExtendedProgressRing Width="250" Value="75"  Thickness="5" RingBackground="#ff292D30" … more

  • RadialMenu Control – Windows 8

    This control was inspired from OneNote Windows 8 modern app. It allows you to show a nice circular contextual menu. Let’s start by adding the control to the root grid: <radial:RadialMenu x:Name="menu" Icon="A" VerticalAlignment="Center" HorizontalAlignment="Center" /> To open the radial menu, IsOpen property should be changed to true <radial:RadialMenu x:Name="menu" Icon="A" VerticalAlignment="Center" HorizontalAlignment="Center" IsOpen="True" />   Now lets start adding couple of items to it, this is how the xaml looks like: <radial:RadialMenu x:Name="menu" Icon="A" VerticalAlignment="Center" HorizontalAlignment="Center" IsOpen="True">    & … more

  • SlideshowView Control for Universal Apps

    I was looking for a free slideshow control (carousel) to use in my Universal apps. Of course if all you need is a slider with couple of items, you can use the native FlipView control. If you want more features, then keep reading!

    This control can be used like any other ItemsControl (ListView,GridView,FlipView …etc). You have to provide the ItemTemplate and set the ItemsSource

    <sv:SlideshowView x:Name="ssv">            <sv:SlideshowView.ItemTemplate>                <DataTemplate>         & … more

  • ExtendedImage Control for Universal Apps

    This is another control I’ve created, which is very simple yet extremely useful. In this post I’ll walk you through the features and how to use them: Progress bar In case you’re showing the user a big image that’s being downlaoded from the internet, It’s very useful to show the progress of downlaoding the image. To do this you will need to enable it by setting the IsProgressBarShown to true. <controls:ExtendedImage Source="http://gallery.photo.net/photo/7203377-lg.jpg"                                IsProgressBarShown="True"/> & … more

  • ExtendedListView Control for Universal Apps (Pull to refresh & Load more data on demand)

    One of the features that is missing from the ListView control in WinRT is the “Pull to refresh”. This feature is supported natively on both Android and iOS controls, but unfortunately not on Windows. Some might argue that this doesn’t fit in Windows apps, and that we should use the App bar instead. For me I think its just intuitive for any smart phone user to swipe down a list and expect the app to refresh the content. Also the official facebook & twitter apps implement this feature, and I think they just made the apps better.

    So I created a simple control that add this feature (and the “more data on demand). The control works as expected, you swipe down and … more

  • Menu Control for Universal Apps

    Though having a menu bar in a Windows store app is something unusual (and maybe against the design guidelines), I thought it would be useful for some specific apps. Also it will come handy in Windows 10 as the apps can work now in separate windows (instead of full screen) like normal WPF application.

    How it looks?

    So this is how the control will render on a Windows Store,

     

    And as this control is a universal one, it will also work on a Windows Phone project (Though I would highly recommend you to NOT use this control on the phone, unless you have a really good reason to):

    The Xaml code for the above:

    <menu:Menu>    <menu:MenuItem Text="File">  … more

  • ClipToBounds – AttachedProperty

    This is a very useful Attached Property that I created to clip the content of a panel. If you understand the problem and all you want is the Attached Property code, go to the bottom of the post and copy the behavior class. If you want to understand more, keep reading.

    So here’s the problem, Let’s say I have a Grid. Inside this Grid I have an element, a rectangle.

    <Grid Width="500" Height="500" Background="DarkRed">    <Rectangle Fill="DarkBlue" Width="100" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" /></Grid>

    With that xaml code I will get this visual:

     

    Now lets say I want to move the blue rectangle around by … more

  • ColorPicker Control for Universal Apps

    In one of my projects at work I needed to use a Color Picker, so as usual, I was hoping to find something good through nuget. Much to my surprise I couldn’t find a decent ColorPicker that would work for Universal Apps, or at least nothing that’s good enough for my task (to be honest this is one of the few times nuget failed me, I get all I need, most of the times).

     

    So I decided to start Visual Studio and create a simple Color Picker, this what I ended up doing:

    It’s a very simple control to use, you need to to select the main color from the slider, and select the how dark/light the color should be. Also it will keep showing two colors, the current and previous … more

  • Custom Behaviors (Draggable Element)

    Before I start talking about behaviors and what they do, lets start by understanding a little bit about the problem we have.

    So lets say that you have some logic you want to write for a UI element, for example you want that element to be resizable using mouse/touch, or maybe you want to enable that element to be draggable (This post will explain how to do that).

    To do the draggable behavior, the straight forward solution is to write the logic in the code behind and hook up the needed events (pointer pressed, pointer moved and pointer released) for that UI element and apply the translate x and y.

    Doing this will work fine for a small project (a very tiny one). But this will lead to a … more

  • Windows 8 Modern Apps with Video Background (Xaml/C#)

    The ask here is to build an application with an infinite loop video background, It might not be very clear what I’m trying to achieve here, so I’ve recorded a video of a simple proof of concept I was working on:

    It might look like a straight forward solution by adding a MediaElement with a transparent Grid:

    <Page ......>

    <Grid>

    <MediaElement />

    <Grid Background"Transparent">

    <!—-- the content goes here -->

    </Grid>

    </Grid>

    </Page>

    Which would work just fine; IF the app is just one page app. The issue with this approach, if the user navigates to the next page, the … more

  • HTML Agility Pack–Windows 8

    So in the previous post, we’ve talked about parsing HTML in Windows Phone 8 projects. And I got couple of questions about doing the same on Windows 8. Now in Windows 8, it’s going to be a little bit different.

    If you want to read more about why we need this “HTML Agility Pack” library, please read the introduction on the previous post. In this post I will get right into the point of parsing the HTML.

    In this tutorial I’m going to try to get the content out of IMDB website. The reason I picked this website that they don’t have any APIs, and they have a rich content. (But again, the usage policy doesn’t allow us to use it for production, so we will … more

  • HTML Agility Pack–Windows Phone 8

    You might be asked to build an application that consumes some content from the internet. Now if you’re lucky, you would have some server that provides you the feeds ( as a JSON, XML or even plain text). But what if the server is not ready yet, and you want to start to build the app? What if the company won’t invest on a server side coding, and they want you to use the website they have?

    So the first thing you can think about is to download the html page, and start “extracting” the content out of it using Regular Expressions. The problem with this solution, its not easy, not clean. And it might take days to make it work for one website.

    HTML Agility Pack to the … more

  • Kinect For Windows SDK–Part I

    Image and Video processing applications have been always interesting and impressive. You can easily “wow” your audience with the magical stuff you can do with your machine.

    The issue we always have with this kind of applications; we need a specific set of skills in math and good understanding of the image processing science. It is easy to receive the image stream from the camera to the computer, but its really hard to make the machine understands these images. Other issue is the hardware. You need a good PC with high specs to handle all this kind of heavy processes.

    Kinect is a motion sensing device, created by Microsoft to be used in Xbox (and recently on Windows PCs). It& … more

  • HTTP Live Streaming (HLS) on Windows Phone (Not 3ivx, free solution)

    If you want to write an app that supports live streaming on Windows Phone, the streaming server should support one of the Microsoft encodings. Nothing wrong with the Microsoft smooth streaming. The issue that most of the TV stations support only Apple HLS.

    Looking around for an HLS adapter (3rd party library) for Windows Phone wasn’t . My first option was 3ivx library, which is actually brilliant! and it supports Windows 8 store apps too. But the pricing is a little bit expensive. The price I got was 7500 Australian dollars per app. That means if a TV station wants to build two different apps (say news tv app, and sport tv app) they have to pay $15000!

    So 3ivx wasn’t a good … more

  • Creating Company Hub App for Business

    Windows Phone has been always a great choice for consumers with its great set of features, and its level of customization, to simply make your Windows Phone unmistakably yours.

    But Microsoft didn’t just focus on delighting the consumers. Microsoft also focused on meeting the needs of business. Features like Office, BitLocker, Native support for IRM, supporting Exchange server; ActiveSync; Sharepoint; Lync server & Company Hub, makes Windows Phone “The right choice for Business”.

    In this post, we’ll talk about “Company Hub”, and how it enables enterprises to increase the productivity of their employees, by providing the right business apps and … more

  • Migrating from VPS to Windows Azure Virtual Machines

    “Virtual Machines deliver on-demand, scalable compute infrastructure when you need to quickly provision resources to meet your growing business needs.  With Virtual Machines, you get choice of Windows Server and Linux operating systems in multiple configurations on top of the trustworthy Windows Azure foundation. “Microsoft Cloud Solution, Windows Azure, is open to many languages, frameworks and tools which enables you to build applications using literally whatever you want!

    In this post we will use Windows Azure Virtual Machines to move your web application from your current Linux VPS to the Microsoft Cloud, Windows Azure!

    Hmm, sounds great, but why would I want to do … more

  • Build your own Web site using Azure for Free in 5 minutes

     Building a website has never been easier with the new CMS available today, but configuring it to be up and running was always a time consuming job; configuring the database, providing the connection string, configuring the domain, setting up ftp account to upload your website…etc.

    "Web Sites" is a new feature provided by Windows Azure. Using an easy wizard you can get your website up and running in minutes. Sounds great, but how much would it cost? It's free! With Windows Azure you can build up to 10 websites for free.

    In this step by step tutorial, we are going to create an Azure account and then build a website using Umbraco CMS (but you can pick your own CMS, e- … more

  • Pimp your Windows phone 8 emulator!

    Got bored of the default skin of Windows Phone 8 Emulator? Now you can change the look of your Windows Phone 8 emulator by using the WP8 Emulator Skin Switcher to make it look like a Nokia Lumia 920, HTC 8X or Samsung Ativ S.

    http://wp8emulatorskins.codeplex.com/

      more

  • Installing Windows Server 2012 (step by step)

     

    Windows Server 2012, codenamed "Windows Server 8", is the sixth release of Windows Server. It is the server version of Windows 8 and succeeds Windows Server 2008 R2. Two pre-release versions, a developer preview and a beta version, were released during development. The software was generally available to customers starting on September 4, 2012.

    In this easy step by step guide, we will learn how to install and activate Windows Server 2012.

    Before you start make sure you have the minimum requirements to install Windows Server (Windows Server Requirements):

    Processor: Minimum: 1.4 GHz 64-bit processorRam: Minimum: 512 MBDisk Space: Minimum: 32 GBOther requirements:

    DVD … more

  • Building Web Apps with ASP.NET Jump Start - 8 Hours of FREE Training Videos

    Three of Microsoft's most seasoned ASP.NET speakers, Scott Hanselman, Jon Galloway, and Damian Edwards provide an accelerated introduction to building modern web applications with ASP.NET 4.5 and ASP.NET MVC 4. In this course, they target key scenarios like building mobile-ready websites, social web applications as well as modern HTML5 browser features.

    Full course outline:

    Mod 01: What's New in ASP.NET 4.5

    Mod 02: Building and Deploying Websites with ASP.NET MVC 4

    Mod 03: Creating HTML5 Applications with jQuery

    Mod 04: Building a Service Layer with ASP.NET Web API

    Mod 05: Leveraging Your ASP.NET Development Skills to Build Office Apps

    Mod 06: Building … more