Blend

Working with Sample Data in Blend

Standard

When you are using external data sources in your app, such as a database on a remote server, one of the most common issues you encounter during development is that you may not have access to the data you’re going to use in the app. The database may not be created or populated yet, you might not have access to the database at this point or you may just want to prepare a mock-up for prototyping or presentation purposes and don’t want to spend time and effort for a database. This situation causes some minor inconveniences for developers and (especially) designers in two areas: When you are designing the app, and when you are running it.

During design time, you see the values of binded objects empty. So if you bind the text of a TextBlock object, it will be blank. To cope with this, designers would usually create the design with some placeholder values and apply the bindings after that. However, this has the following three downsides: You still can’t see how the app will look in design time; you can see what parts of the design needs to be fixed only when the app is running; and to fix the design you have to break the bindings, give placeholder values again, modify the design and then apply the bindings again, which gets annoying quite fast and makes designing process harder. For example, look at the following image from the example WinRT app we’ll create in this article:

The user information (including the picture) is binded to a data source. This is how it looks in runtime.

The user information (including the picture) is binded to a data source. This is how it looks in runtime, in a GridView.

And this is how that GridView's item template looks like in design time. The GridView itself doesn't even show anything in the XAML designer.

And this is how that GridView’s item template looks like in design time. The GridView itself doesn’t even show anything in the XAML designer.

During runtime, you need to create the sample data and set your object’s ItemsSource in the codebehind file. This has the following issues: If you are purely a designer, this requires you to mess with the code so it may be an issue for both you and your project team; you need to enter sample values yourself; and you need to remove the code you’ve added when you are able to connect to the live database.

Fortunately, to overcome these issues, Blend provides us a handy feature called Sample Data which allows us to create a sample data source that generates values based on our specifications and then bind our objects to that sample data source. Considering the benefit of using sample data without writing a single line of code and being able to see the sample values both within runtime and design time, this feature helps us solve the aforementioned problems and simplifies the designing process. And of course, in this article, we’ll create a Windows Store app in Blend that uses a sample data source.

➤ Sample data can be used in WPF, Silverlight, WinRT and Windows Phone…

Advertisement

Template-Binding in WinRT

Standard

In XAML, styles are resources which define the appearance of a control. By creating new styles (or modifying existing ones), you can customize how a control looks to have a more creative and beautiful interface. Since styles are resources, you can just create one that suits your needs and apply it to any suitable control you want.

However, when you create (or modify) a style, if you define everything in it explicity, you will be left with a very inflexible control which you can not further customize. For example, assume we have a bubbly button which has many small circles around it that represents the bubbles, like this:

1

I’ve added these bubbles explicitly with white color, so they will stay white no matter what. But what if I decide to use the button with a different background color in different parts of the app?

The circles are barely visible now.

The circles are barely visible now.

A solution to that would be creating a different style for each different color you would use, but that would be tedious and ineffective to say the least. Instead, why don’t we tell the bubbles to have the same color with the Button object’s Foreground property? This way, the style would just add the bubbles without specifying their color and we could set the color of each individual Button object the way we want. Sounds good, right?

Well, what I just described is called template-binding. Within a style or template, you can tell a property to get its value from the object that the template or style is applied to. You can template-bind any compatible properties together to achieve your desired effect.

And in this article, we’ll create a sample project which uses template-binding in order to create… EVIL BUTTONS!!1 *insert evil laugh here*

This is an evil button with horns. Notice that the horns get their fill and border colors from the Button object.

This is an evil button with horns. Notice that the horns get their fill and border colors from the Button object.

➤ If you look at the default style of a control, you’ll see that everything you set on the control is actually template-binded in the style…

Creating a “Page Turning” Effect in Blend – Boredom Challenge Day 29

Standard

Animations, when done properly, are a guaranteed way of increasing the visual appeal of an app. In my previous blog posts, we’ve seen how we can make simple animations in Blend, and later we’ve seen how we can combine these simple animations to make a card flip effect. So, contiuning on in this trend, I’ve set my eyes on the another such frequently used and nice-looking effect: Turning a page.

If you look at the card flip effect example, you can see that we can actually use it for turning a page by changing the center of rotation of the objects. However, this will result in stiff looking rectangle pages which lack the curvy edges of a real page. So, how can we turn that page more realistically?

Unfortunately, we can't make it look as good as this. At least, not easily.

Unfortunately, we can’t make it look as good as this. At least, not easily.

It is not possible to create an effect in Blend like shown in the screenshot. You can, however, create such an effect in code, using bezier curves and whatnot. But it looks quite complicated, and I’ve seen people suggesting to use Direct2D instead of creating such animations in code. Also, while searching, I’ve come across some code examples or custom user controls but they were generally for WPF (I’ve only found one custom control for WinRT, and it wasn’t free).

So our best bet would be animating curves in codebehind, or learning Direct2D. Unfortunately, ain’t nobody got time for that.

If you are muttering to yourself “But.. but, I just wanted to turn a simple page, nothing fancy!”, then you are at the right place. We can play around in Blend a little to make it “sort of” curvy and look just like shown in the video below:

In this article, we’ll create an example app which will have a book where the user can turn the pages with the animation shown above.

➤ Here I am, on the road again.. There I am, up on the stage..

Creating a “Card Flip” Effect with Blend – Boredom Challenge Day 27

Standard

In one of my previous blog posts I’ve talked about how we can make simple animations in Blend and shown how we can move stuff around in our interface. However, our animations would need to be a lot better than moving several elements around or spinning them in order to be visually appealing.

And one of the most widely used effects is, of course, flipping something onscreen like a card. This effect not only looks good, but also can be used as a nice transition animation between several elements in your page. And it is really easy to implement by using Blend. Here are the videos of the example app we will make (source code is at the bottom of the page :)):

My computer is a bit old, so it caused some stuttering when saving the videos. The animations are quite smooth in the app. 🙂

So, if this has grabbed your attention, read on and we will create the example app shown in the videos above.

➤ Bonus points for shouting “I activate my trap card!”

Making Simple Animations with Blend in Windows Store Apps

Standard

When making an application, using animations is a good way to impress the user and make your application look better. Either for making a more lively menu with sliding buttons or adding some visual effects to the background, animations come as a very simple yet powerful tool for good looking applications. In this article we will be developing a Windows Store application that contains several different animations which show several different features.

I will explain how animations work as we build our application, so we will start with opening up Visual Studio and creating a new Windows Store app.

1

In the MainPage.xaml, add a button which will be used to start the animation.

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="startAnimationButton" Content="Let the show begin" HorizontalAlignment="Left" Margin="100,100,0,0" VerticalAlignment="Top"/>
    </Grid>

Then, right-click MainPage.xaml and select “Open in Blend”.

2

➤ Let’s see what we can make with animations…