Tuesday, 28 August 2012

LinearGradientBrush - Creating MouseEnter effects

I came across an interesting thing that can be done using Silverlight 4/5. Now, the experienced developers project will make use of Styles, and customize mouseover effects for buttons. Well, being someone whose still mastering the ropes of Styling Resources, I've found a simpler alternative for managing mouse over effects for buttons with gradient design:

Note: This idea, or solution is suitable for simple, single interface applications that don't require a lot of buttons. If you are working on a Dashboard or LOB application, there are probably many buttons on many pages, and you want to keep the source codes to a minimum, then you should use the Styling Resources technique.

I have replaced my usual <Button /> element with a <Border /> element:

The above screen shot shows the border element, together with a TextBlock element inside. The code behind will look like the following:

If you enlarge the image by clicking on it, you will see what the Border and StackPanel, TextBlock elements will look like. The StackPanel has been included there so that I can use it for my next tutorial about creating buttons with both text and images. I want to bring your attention to 2 important sections of the XAML coding here that provides the Gradient effects, as well as the events that trigger the MouseEnter and MouseLeave effects:

  • MouseLeftButtonDown - This is to simulate the Mouse Click event when the mouse is over the Border element.
  • MouseEnter - This is to simulate the MouseOver effect.
  • MouseLeave - When the mouse cursor is out of the Border, the default gradient design will be restored.
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF082CD1" Offset="0"/>
        <GradientStop Color="#FF0AB6DC" Offset="1"/>

If you can see above, the LinearGradientBrush has 2 attributes: StartPoint and EndPoint. This are crucial to the LinearGradientBrush, to know where the gradient starting point and ending point is. "0.5, 0" - 0.5 means the center, and 0 means top.

Next, we will take a look at how to render the MouseEnter effect via the codes:

If you see the coding screen shot above. 

1. This is where we declare a new LinearGradientBrush object, and we define the same StartPoint and EndPoint as the default design. 

2a) Then we continue to define the first GradientStop object and give the color green to it.
2b) We define the next color and and add the gradient stop to the LinearGradientBrush object.

3) The final step is to set the Background of the button to the LinearGradientBrush. 

If you enlarge the coding screenshot above, it is exactly the same as the MouseEnter event. The only difference is the Argb values, setting the colors back to the default state. 

And that covers how easy it is to create a custom gradient mouse over effect for Silverlight 4/5.

Monday, 27 August 2012

Portfolios Update

Wow! It's been pretty long since I have updated this blog site, I do apologise to all my loyal readers and followers for the lack of updates lately.

Well, I've been away, busy working on expanding my portfolio in Silverlight and WPF projects. I've been working on a new page for this site, and gathering as many completed projects as I can, so it will perhaps provide more assurance for people like you, who may be interested in engaging my services, but not sure if you are making the right choice.

One of the things I'm currently working on, is to work on Silverlight-enabled games, which I strongly believe will help to widen my portfolio, and expand the reach to more corporations, or even the education industry. Creating interactive self-learning silverlight games!

I shall not spill too much beans at this point, I shall share more when the time comes for it! So, everyone, hand on to your seats, it's going to be a hell of a fun soon!

Friday, 17 August 2012

WPF GridPanel Tutorial

Okay!! Finally, our very first WPF Grid Panel Tutorial is ready! It's the very first time we are doing this, so do pardon us if it is not as great as what you normally see in CodeProject or CSharpCorner. We wanted to come out with our own version of tutorials, because we want to approach the tutorial and our readers from a different approach, or angle, whichever way you put it.

In our future tutorials, we will also be using the same approach, and what approach will that be? We want to use the Designer Drag-and-Drop approach, followed by looking at the underlying codes, to have a better understanding of why, and how the layout looks the way it is.

Let's get started!! So what do you need to get started?

  1. Visual Studio 2012 RC / Visual Studio 2010. We wanted to make use of Visual Studio 2012 RC because in the next 6 months or so, this is going to be stable flagship product release, and many people will already have downloaded it and tried it out by now. Nonetheless, if you do not have VS2012, not worries, the example discussed in the posts will be able to run in Visual Studio 2010 as well.
Step One: Creating a new WPF project in Visual Studio 2012 RC/2010

Start by creating a new Project from either the toolbar at the top of the Visual Studio IDE, or under the File menu.

In the New Project window, select "Windows" under the Visual C# project tree. In the list of available templates, choose WPF Application. Name the application "GridPanelExample", or you can name it anything you want. Once that is done, just click on "OK" button. The next thing you can see is the default layout view, as depicted below:

From the above screen capture, you can see that I have identified the 2 sides of the split view. This split view can be switched between viewing vertically, or horizontally. I'm someone whose accustomed to reading left to right, so I prefer to place the (1) XAML view on the left, and the (2) design view on the right. If the images in this tutorial seems small, you can click on the image and it will enlarge so you can see more clearly.

Step 2: Setting up the Grid using the Design View

Creating Grid rows and columns are so easy, you won't even believe how easy it is. I think even my grandma is able to do this without any hiccups! Haha! Just kidding, to create a column or row, all you need to do is to mouse over the edge of the application's design edge. You can see from the screen capture below:

I have labeled the column guide in yellow (1). When you place your cursor just outside the edge, you will see the yellow guide. all you need to do is to move your cursor along the edge until you find the dimension that you want. Once you have found the sweet spot, just click on that. What will happen in like the row guide (2). It becomes blue color! It's that simple.

But what does it like in the code behind?

If you look over at your XAML view, you will notice 2 sections of coding that was not there before. There are the <Grid.ColumnDefinitions></Grid.ColumnDefinitions> section, as well as the <Grid.RowDefinitions></Grid.RowDefinitions>. Now, as we know, real like applications usually won't be fixed in size. Especially if you are building an application like Word, or Excel, or any desktop application for that matter. You do not want your layout to stay fixed in a dimension, rather you will want it to be able to stretch and expand proportionally together with the size of the window. As you see the codes in the XAML, here is what it looks like:

<ColumnDefinition Width="368*" />

The * is there for the sole purpose for telling the application that the minimum width of that column will be 368, and it will expand proportionally larger dependent on the stretching of the window. See the screen shot below:

As I drag the window larger, the proportion of the Rows and Columns also expand, yet maintaining the size that is most ideal. The reason for doing all this is so that if you have content in the bottom left area, it will shrink, and wrap depending on the size of the content area. This is what we ultimately achieve. However, if you want the sidebar to be fixed, all you have to do is to remove the "*" from the ColumnDefinition element.

Step 3: Let's Add Some Controls to the Grid

To add a control is very very easy! Just open the Toolbox if it is not already opened. And click the TextBlock control, and drag it to the first Grid Row and Column. You can see from the bottom screen capture:

I have done something a little extra to this example, that I hope you will be able to bring away with you. Once you have dropped the TextBlock control in the grid, next thing you can do is to drag the edges of the TextBlock, until it snaps into place at the margin area of the Grid cell's content area. When you do this, the size of the TextBlock will also automatically stretch according to the size of the window. How amazing is that!

Now, let's add another StackPanel to the right sidebar at the bottom. Once again, open up your ToolBox, and select the StackPanel controls and drop it onto the grid as so:

Once you have done so, keep it selected, as we are going to take a look at the properties panel in a quick moment. Same like the what we did with the TextBlock earlier, drag the left edge of the StackPanel until it snaps to the margin on the right. Now your StackPanel looks right in the center of the right sidebar. Easy!

Next, properties:

As you notice from the screen capture above, I have mouseover the Orientation property under the Layout Properties Panel. The little tooltip is extremely helpful especially when you are new to WPF, and you are not sure which property does what. And this tooltip even displays the namespace that the property derives from.

Moving on, StackPanels have a Vertical orientation by default everything you create them. Next thing, just to make the layout look a little more interesting, let's add some controls to the side panel. 

1. Drag a TextBlock into the StackPanel, it will automatically be placed as the first item at the top.
2. Drag a TextBox into the StackPanel.
3. Repeat 1. and 2. again.
4. Add a Login button at the bottom of the StackPanel. If the button is not displaying, its likely that your StackPanel's height is too small, so just enlarge the StackPanel downwards by clicking and dragging the edge.

If you see the screen capture above, you noticed that you have just created a simple login panel! Now, this blog post will not be covering anything on Data Binding, or using WCF RIA Services yet, but for now, just leave it as it is. Next thing you want to do is to enhance the layout of the contents. Remember, never leave the controls in a fix dimension, unless you deliberately want it to be in a fixed dimension. For the purpose of this tutorial, we will make the following modifications:

If you enlarge the screen capture above, you will noticed that I have highlighted some of the attributes of the TextBlock and TextBox properties. I have now set the HorizontalAlignment to "Stretch". This is a new property in WPF. And in the TextBlock, I have modified the Margin to be "5". By doing this, the controls will now stretch when the window is enlarged, and when the StackPanel also widens up.

This is a normal view.

Stretched View.

Well, that is how simple it is to create a Grid Panel in WPF, and not only that, you have witness the power of laying out contents within the Rows and Columns within the Grid Panel. Grid is probably the most commonly used layout control you will find in every single application. We will definitely will cover more on the other Panels available in WPF in the coming weeks, so do stay tuned.

As this is our first time producing our own tutorial, please do help us to improve by posting your feedback and comments, and we will gladly listen to your suggestions if they are good. And if you like the post, go ahead and share it!

Thanks a lot everyone!

Wednesday, 15 August 2012

New Official Logo & Tagline

Hey everyone, after a month of setting up this site, plus with the amazing response from the readers, we have finally hit over 300 hits in less than a month! That means, we have been receiving about 10-15 new visitors, or returned visitors every single day! First and foremost, we really have to thank our readers for the continuing support, as well as those that make this site a regular visit every single day! Be it to learn about something new, or to check out what's happening! We're really happy to be able to share what we know with the world! Hopefully by doing so, it will make this world a better place, and make businesses a better place to work in!

Anyway, there's no better way to celebrate the success so far, than to create our very own first logo:
As you can see above, we wanna stick to the classic, 2 - 3 color scheme. We do not want to give the design too much complexity, but rather, we want to maintain a professional, classy look-and-feel! We have broken down our title into the initials "D" and "(fx)". "D" stands for Dashboards, and well, "(fx)" stands for functionalities, or an infinity of numbers.

The reason we wanted to use the tagline "Bringing Data to Life", is because we believe that data and information alone is not enough in our current technology age. People, and organizations are getting smarter. This inspired us to have a mission of helping you, our clients, target consumers to bring your data to life! We strongly believed that data, when given the right context, placed in proper perspective, can come to live! And without you have to do much, the data will all come together in perfect synchrony, and give you the necessary push to make certain decisions you need to make for your company. Be it whether to push out a new Credit Card into the market, or to launch that new model of car into a country. We hope that the tools that we create for you, will help you to make smarter, more effective, and faster decisions!

We love you, our readers! And we certainly hope to get to know you better in the days, months and years to come! 

Tuesday, 14 August 2012

Silverlight Re-Use

In the course of working on Silverlight-driven applicatons, as well as WPF development, I have come to know other silverlight-eager developers and learners. And I am quite surprised at the number of people that do not know about the templates that comes from Silverlight. I like some of the ready-made templates from Silverlight,

If you enlarge the image, you can see that the silverlight team at microsoft has created 4 templates that will help people like me to get started with an application. Now, if you are from a designer background, I'm sure you'll be able to do a much better job than these templates. As for myself, I'm not exactly a graphic designer kind of person, but I appreciate the art of designing, and I strive to learn as much as I can about whatever design tools there are out there. Unfortunately, all of us only have 24 hours, so when it comes down to prioritizing, I prefer to re-use templates that have already been created for me.

In the current age of technology development, re-inventing the wheel is no longer appreciated. Nowadays, people are looking for more efficient, time effective solutions. Nobody wants to create something from scratch. The time and effort to do so just doesn't justify the means.

Here's a sample of the template when executed:

If you are like me, and being productive your on the top of your priorities, then you seriously need to learn how to use these templates. What I love to do, is to create a new silverlight application using VS, then switch it over to Blend 4, where I can easily manage the Resources using the Properties Panel. This is a much faster method I felt, to create your desired design and layout.

Hope you will enjoy developing silverlight applications the way I do! Have fun guys! 

Monday, 13 August 2012

Get to Know Microsoft Expression Blend 4

Hey everyone! After a really busy day, glad to be able to come back and post again! I thought of finally sharing about Microsoft Expression Blend 4! Now, if you are new, and or an experienced Silverlight/WPF developer, you probably might have heard of Microsoft Expression Blend 4 before. Microsoft Expression Blend 4 is an whole IDE by itself, and frankly, for a developer like myself, I had my reservations about using Expression Blend initially.

The honest truth is that I'm someone born without the flair for design. Although I do enjoy the benefits of using Photoshop when it comes to producing simple web graphics. But if you are to come to me and ask me to churn out brand new, graphically engaging effects, well, I'll probably turn you down 9 out of 10 times. Lolx!

Anyway, one thing I've learnt as a developer/consultant is that you can never totally ignore the design aspect of development. Regardless of whether you are doing ASP.NET, or you are doing Silverlight/WPF. At the end of the day, it pays off to know abit about what Photoshop, or even Expression Blend can do for you.

I've definitely come to appreciate Expression Blend a lot more now. So, since we are on the topic of Expression Blend 4, perhaps I can share a little more about it's amazing UI:
Main View

Click on the image to see the larger detail version. Here is a simplified description of what you can do with this amazing UI:
  1. The Quick Utility Belt!!

    This is the simple term I like to call it. Despite of what the books name it. Yes, there is a proper term for it, Blend Toolbar. Here, you can actually achieve so many things, but its too much for me to go into detail here on each and every single functionality. But I particularly find the Gradient Tool, Layout Controls, Text Input Controls and the Input controls most useful! I used to think Photoshop has a easy way to control the appearance of Gradients, but after using Expression Blend 4, I hate to admit it, that its much more easy using Expression Blend.
  2. The Assets Library

    If you are new to Silverlight, or WPF, or development in general, then you must know that it's very easy for you to create controls, layouts, buttons, other silverlight related controls using the Assets Library. All you need to do is to drag and drop the controls you need to the workspace (the white area that appears in the center of the screen when you create a new project). Once you have dropped the controls you need to the workspace, next thing you need to do is to set the relevant properties in the Properties Panel.
  3. Objects and Timeline Panel

    One more thing I've come to love about Expression Blend is it's simplicity in managing and creation of Animation, and managing the behaviors for user controls and objects on the workspace. I have worked on Adobe Flash for many years (eventhough I'm not an expert at it), and I must admit, I picked up on the timeline panel much faster than Flash. Flash...I think I took 6 months to actually figure it out.

    The simplicity of the Timeline Panel really made it such a ease and joy to work with necessary animations in my applications. Generally, I do only about 10-20% of animations on most projects, unless the client requires a silverlight-driven game or WPF-driven game.
  4. Workspace (The Blank Canvas where anything is POSSIBLE!)

    Yes, that is what I believe in strongly. The blank workspace is where you can create anything imaginable. It's just like the blank canvas of our minds. If you can envision what you want to create, start to envision it on the workspace. Where do you want the menu to be, where will the member sign in panel be? Where will be the products listing section? There is just endless possibilities to what you want to create. 
  5. The Properties Panel

    Every object and control on the workspace has a personality and life of it's own. When you envision your layout, think of it like a breathing living human being. Or a character that you want to create for your blockbuster movie. What sort of personality do you want your button to have? What sort of characteristic will your application have? Fanciful? Eye Candy? Or corporate, yet fluid layout? What you have envisioned, trust me, with some tweaks and combinations from the properties panel, and you will be able to achieve what you want! 
Okay, so maybe you are wondering, is this Expression Blend really as good as what he says?? Disclaimer, when I first came to this UI, I was confused by what it does. The layout doesn't look anything like what I have used before, and definitely different from Visual Studio! I was immediately turned off.

But it was only 1 day, that I finally decided to give Expression Blend a try, and then I realized that its so easy to do so many things, and trust me, it's much faster than trying to code everything using VS. Sure, you can also code it using Visual Studio, but take my advice, Expression Blend will save you many precious hours, and perhaps buy you more sleeping time! If this experience sounds familiar, you are right, I shared a similar experience with one of the authors from the Silverlight 4 books.

4th on Google Rankings

This is absolutely exciting for us, as we just discovered today, that we are ranked 4th in the area of "wpf silverlight dashboards singapore".
4th on Google Ranking

We are really happy and will continue to strive to be among the top few in Google Rankings when it comes to providing quality WPF, silverlight solutions to businesses within Singapore. But more important than the rankings, we are also very happy to have finally received our testimonies from 2 Final Year students from 2 very esteemed tertiary institutions within Singapore.

Since WPF and Silverlight applications are still on the pick up within Singapore at the moment, we want to start creating more awareness about the use of Silverlight and WPF in the real world projects, as well as what it can do. Many people know what ASP.NET and Windows Forms can do. They provide you with the websites and desktop applications.

However, its clear that there is still a smaller majority that isn't aware of the power of using WPF and Silverlight.

In our opinion, Silverlight is much more powerful than using normal ASP.NET webpages. Reason being that Silverlight can provide the animation, behaviors portion that websites don't have. And WPF is able to create interactive Line of Business (LOB) and Point of Sales (POS) applications that can be used with touched interfaces.

In the next 6 months to a year from now, you will start to see many many places, retail outlets, using Silverlight or WPF powered applications. This is an inevitable trend now.