1. First, Let’s create a new folder inside the Assets folder of the project and add to the Fonts folder the fonts that we need to use. Through this sample I’ve used a Font Family named “Caecilia LT Std” and contains many fonts like “Bold, Light, BoldItalic”.
   
2. Make sure that the Build Action of the desired font is “Content”
   
3. Then, we set the  FontFamily of the text that we need to give the custom font in this way:

   
   FontFamily="/FontPath/FontFile.fontformat#FontName"
   
   

And here a Code Snippet of a Textblock that uses a custom font:

            <TextBlock HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="45"
                       Text="Testing adding custom font"
                       FontFamily="/Assets/Fonts/CaeciliaLTStd-Bold.otf#Caecilia LT Std" />

Hints:

1. In the file path, just type the name of the font file.
2. In the font name, only type the font family name without adding the weight property such as: bold, light, italic, ..etc.

I’ve uploaded a Sample project where I used different custom fonts, find it in this link: http://sdrv.ms/1kcVR5X

If there’s any question, mail me at: ab.alnady@hotmail.com

Laying out an App Page – Part 1

After knowing more about the controls, when to use them, and how to add them to the App UI, Now I’ll go deeper in how to arrange them inside the app page and build a consistent UI that is flexible for different screen resolutions. First thing to know is that there’re types of layout settings parameters for the UI controls:

1. General parameters for any containing control: Alignment and Margin.
2. Special parameters for some containing controls: such as: Row, RowSpan for the Grid control.
3. Parameters for the controls itself: such as: Padding, FlowDirection

Let’s start with the first one:

1.     General parameters for any containing control:

• Alignment: there’s ways for aligning a control inside its containing  control
  • Horizontal: whether you can align the control to the left, center, right, or stretching it horizontally over the containing control (Horizontal Stretching works when you give the control’s width and “Auto” value).

• Vertical: whether you can align the control to the top, center, bottom, or stretching it vertically over the containing control (Vertical Stretching works when you give the control’s height an “Auto” value).

• Margin: Setting the space that would be free around the control from the 4 directions.

So now, let’s try using those two parameters. Here’re two samples:

1. Centralizing a button inside a grid with no Margin setting

2. Stretch a button and giving it a 120px margin from the left, 40px from the top and the bottom, and 80px from the right:

Now let’s jump to the next type of parameters.

2.     Special parameters for some containing control:

• Grid: The Grid controls is considered as one of the most important UI controls here as it features dividing it into rows and columns which allows building a flexible layout that works on different screen resolutions. Let’s see how we can implement this:

We can give the row or the column a value out of 3 types:

1. Pixels: when we want the row or the column take an actual number of pixels in any screen resolution.
2. Star: when we want to distribute the available (non-taken) space of a grid by weighted proportions.
3. Auto: When we need the row or the column fit their content even if the content size is matter to change.Let’s practice now these types:I’ll create a layout where there’re:

• 120px free space from the left.
• 200×200 rectangle that is centralized vertically.
• Two rectangles, one of them is 2x bigger than the other and each one have 20px left margin and 200px top and bottom margin

Steps:

1. Let’s define the columns needed by clicking on the upper side of the grid when the orange line appears. Here, we will need 4 columns so, we’ll add 3 column definitions and give the 4 columns resulted the following values from the pop up that appears when we hover above any column and choose the value from the drop-down list that appears by clicking the small arrow:

• 1^st column: 120 and choose the value by pixels.
• 2^nd column: let’s choose the value by “Auto”. It’ll seem to be empty, that’s normal so don’t panic.
• 3^rd column: let’s give it 1 and the value is by Star.
• 4^th column: give it 2 and the value by Star to be 2x bigger than the 3^rd column.

2. Now, let’s add the controls and layout them:

• Let’s add a rectangle, give it 200×200 width and height. And set the column by 1 to lay it in the 2^nd column that we set before by Auto, then set its vertical alignment to center. Now we will mention that the hidden column appears and takes 200px size. Try to change the size of its content by changing the width of the rectangle or giving it left or right margins.

• Add a rectangle, set its width and height to Auto, lay it out in the 2^nd column, stretch it vertically and horizontally, then give it the following margins: 20px left, 200px top and bottom

• Finally, add the last rectangle, set its width and height to auto, lay it out in the 3^rd column, stretch it vertically and horizontally, and give it the same margins of the previous rectangle.

Now let’s run and see the output layout:

That’s for now. In the next post I’ll continue talking starting from the StackPanel control parameters so, stay tuned and keep practicing and if you have any question or any feedback that will be more than welcomed. Don’t hesitate to drop me an e-mail: ab.alnady@hotmail.com

Then, after looking at the table of contents of the book, it seemed very promising as its name suggests “Windows Phone 8 Application Development Essentials“. So, I decided to start reading this book at once. It provides the most featured aspects that surrounds Windows Phone 8 Apps development starting from introducing the Interface Markup language “XAML” passing by some design practices, and how to build an app using the popular architecture pattern “MVVM“, till you can leverage the Windows Phone capabilities such as Launchers and Choosers, Toast Notifications, Background agents, and the many other capabilities.

And by the end of the book, The author made a great strength of show of how could the Windows Phone Platform integrate with other platforms like Twitter and Facebook building a strong Collaborative Developmental Echo system which is really great for the developers.

I highly recommend this book for those who want to kick-start developing on Windows Phone or whoever wants to take a look on the platform from a developer perspective as this book provides a good knowledge in a very simplified way guiding to the real ESSENTIALS of the WP Apps Development

Here’s a link for the book: http://www.packtpub.com/windows-phone-8-application-development-essentials/book

There’s also many useful books for developers in many technologies provided by Packt Publishing, Check them from this link: http://www.packtpub.com/books

That was my review about the book, if you have any feedback, comments, or questions for me don’t hesitate to drop me an e-mail: ab.alnady@hotmail.com

Happy Coding

3 Ways to add controls

After explaining and telling when to use the controls, now it’s the time to use them! Terrific! Some people say that there’s more than one way to add controls to the UI. Yeah! That’s true.

1. First way: Write the code of the controls in the XAML editor

In Visual Studio and Blend there’s a text editor for XAML to write, edit, and maintain the XAML code for your UI and its resources (Styles, DataTemplates, Animation Storyboards, …etc.).

So, If we want to add a Button control inside a Grid Container we just type the lines of codes of these controls in XAML in this editor by defining their tags and the properties we’d like for each control inside its tag such as Height, Weight, Alignment, …etc.

    <Grid Height="auto"
          Width="auto"
          HorizontalAlignment="Stretch"
          VerticalAlignment="Stretch">

        <Button Width="100"
                Height="50"
                Content="Hello"
                VerticalAlignment="Center"
                HorizontalAlignment="Center" />
    </Grid>

2. Second way: Drag the control right directly into the UI

Alongside with the XAML editor in Visual Studio and Blend there exist a real-time-synced Designer view where we can drag a control from the toolbox into it and consequently, manipulate the controls inside it.

So, If we wanted to add the same controls told previously, all what we need to do is to choose the control from the toolbox in the left side of Blend (Find a blog post of Blend here) and then drag or double-click it to this design view.

This way is considered as the easiest and most efficient way to add controls due to the flexibility in dealing with the controls in a more natural way and keeping an eye on the design step by step.

3. Third way: Add the controls

The third and the hardest way is to add the controls by writing their code but not in XAML (the UI Markup Language) but in C# (or in the backend language) file linked with the XAML file. Applying the Button inside the Grid example:

            Grid newGrid = new Grid();
            newGrid.HorizontalAlignment = HorizontalAlignment.Stretch;
            newGrid.VerticalAlignment = VerticalAlignment.Stretch;

            Button newButton = new Button();
            newButton.Width = 100;
            newButton.Height = 50;
            newButton.HorizontalAlignment = HorizontalAlignment.Center;
            newButton.VerticalAlignment = VerticalAlignment.Center;

            newGrid.Children.Add(newButton);

So, Here you’re 3 ways to add controls to your UI. Choose the best one that matches your style. And of course, If you have any question or any feedback that will be more than welcomed. Don’t hesitate to drop me an e-mail: ab.alnady@hotmail.com

Happy UXing

Controls that carry items/Text Controls/Progress Indicators/Display & Media Controls

               Let’s continue now and jump to the other types of Windows Store Controls. In the previous two parts of the Controls Section in Design 8 I’ve talked about many types of controls: Container/Layout panel, Action Controls, Date/Time Controls, Flyout/Menus Controls, and Progress Controls. Now I’m going to talk about the other types of controls. Let’s start with the first one:

Controls that carry items

• ComboBox:
  • Type: Selection Control
  • Usage: When you want to display a list of items inside a dropdown list
• FlipView:
  • Type: Items Display Control
  • Usage: When you want to display items to the user with a touch interaction for navigating to next and previous items.
  • Note: It works with the mouse and the keyboard too. This control had been enhanced with Windows 8.1 update.
• GridView:
  • Type: Items Display Control
  • Usage: When you need to present a collection of items in rows and columns with a horizontal scroll
• ListBox:
  • Type: Selection Control
  • Usage: Wjem you want to display a list of selectable items in an inline list.
  • Note: When radio buttons are grouped together they are mutually exclusive.
• ListView:
  • Type: Items Display Control
  • Usage: When you want to display a collection of items in a list with a vertical scroll.

Text Controls

• TextBlock:
  • Type: Text Display Control
  • Usage: When you need display a simple text.
• TextBox:
  • Type: Text Input Control
  • Usage: When you need the user to enter text input.
• PasswordBox:
  • Type: Text Input Control
  • Usage: When you need the user to enter a password with the ability to check it.

Progress Indicators

• ProressBar:
  • Type: Progress Incicator
  • Usage: Use when you want to display the progress using a bar or show the value on a bar.
• ProgressRing:
  • Type: Progress Incicator
  • Usage: When you want to display the progress in indeterminate looping ring.

Display & Media Controls

• Image:
  • Type: Display Control
  • Usage: Use when you want to display an image from a determined path.
• Media Element:
  • Type: Media Control
  • Usage: When you want to video or audio content in the app.

Now we’ve covered the Windows Store Apps controls provided with Visual Studio 2013 with the type of each one and when to use it.

Stay tuned for the next post and of course If there’re any question or any feedback that will be more than welcomed. Don’t hesitate to drop me an e-mail: ab.alnady@hotmail.com

Controls – Action/Date & Time/ Flyout & Menus Controls

                The talk about Windows 8.1 controls is still on. In the previous post I’ve talked about a category of controls that was made to contain other controls. I’ll continue in the post with other different types of controls: Action controls, Date/Time controls, and Flyouts and Menus controls.

Action Controls

• Button:

  • Type: Action Control
  • Usage: When you need to respond to user input and raise a Click event.

• HyperlinkButton:

  • Type: Action Control
  • Usage: You can use it to navigate the user to another place inside the app or outside such as a URI.

• CheckBox:

  • Type: Selection Control
  • Usage: When you need to get a decision from the user upon select option or clear option.
  • Note: It may contain two or more level of selection.

• RadioButton:

  • Type: Selection Control
  • Usage: When you need the user to select a single option from a group of options.
  • Note: When radio buttons are grouped together they are mutually exclusive.

• Slider:

  • Type: Action Control
  • Usage: When you need the user input a value based on a position on a scrollbar.

• ToggleButton/Switch:

  • Type: Action Control
  • Usage: When you need the user to make a decision out of two alternatives. E.g. true/false – yes/no.

Date & Time Controls

• DatePicker:

  • Type: Selection Control
  • Usage: When you need the user to input a specific date value.

• TimePicker:

  • Type: Selection Control
  • Usage: When you need the user to input a specific time value.

Flyout & Menus Controls

• Flyout:

  • Type: Flyout
  • Usage: Use when you want to display a message that requires a user interaction such as command confirmation.

• MenuFlyout:

  • Type: Flyout
  • Usage: When you want to temporarily display a list of commands or options related to what the user is currently doing.

• Tooltip:

  • Type: Flyout
  • Usage: Use when you want to display information about an element in a glance.

That’s for now, wait the next post where I’ll continue talking about Controls. If there’re any question or any feedback that will be more than welcomed. Don’t hesitate to drop me an e-mail: ab.alnady@hotmail.com

Controls – Containers/Layout panels

All what the users see is a UI control that you place and manage its layout in the App Design so, it’s really important to know more about the controls of the platform that you’re working on. In Windows 8.1, there’re many types of cool controls that you can use in the design. I’ll brief the most important about Windows 8.1 controls and how to add a control to the UI. To be more design oriented, I’ll categorize the Windows 8.1 controls upon its main functionality:

Container/Layout panel:

• Border

  • Type: Container
  • Usage: When you need to surround an object with a border with a determined Thickness, it also takes a background color.
  • Note that it can only carry on object.

• Canvas

  • Type: Layout Panel
  • Usage: When you need to position elements with absolute values relative to the top left corner of the panel.

• Grid

  • Type: Layout Panel
  • Usage: When you need to arrange elements in rows and columns.

• Hub

  • Type: Container
  • Usage: When you want to let the user view and navigate to different sections of content.

• ScrollViewer

  • Type: Container
  • Usage: When you want to let the user pan and zoom its content.
  • Note that it can only carry on object.

• SemanticZoom

  • Type: Container
  • Usage: When you need to give a collection of items two views to zoom between.        

• StackPanel

  • Type: Layout Panel
  • Usage: When you need to arrange elements into single line that can be oriented horizontally or vertically.

• VariableSizedWrapGrid

  • Type: Layout Panel
  • Usage: When you need to arrange elements in rows and columns. Each child element can span multiple rows and columns.

• ViewBox

  • Type: Container
  • Usage: when you need to scale the content to a specified size.
  • Note that it can only carry on object.

• WebView

  • Type: Container
  • Usage: when you need to host a web content
  • Note that it can only carry on object.

That’s for now, wait the next post where I’ll continue talking about Controls. If there’re any question or any feedback that will be more than welcomed. Don’t hesitate to drop me an e-mail: ab.alnady@hotmail.com

Blend:

After discovering the templates that we should work on, including the blank template where we create our design from scratch, We should now get started with the tool that we will work on. THE DESIGN GIANT: BLEND 

At first, Blend was a part of the Microsoft Expression Studio Package under the name of Expression Blend. For some reason, Microsoft didn’t release any update of this package after the 4^th edition. But it was a must to update Blend for its high need in designing Apps for Windows Phone and Windows 8. So, Microsoft solved this by integrating the Blend software with the Microsoft Visual Studio installation so that, developer can get all the needed tools once a time. 

Let’s open now Blend and get started with it, I’ll divide it into many points:

1. Workspace:

In Blend there’re two workspaces to work on:

1. Design (Default).
2. Animation. And I think that their names explains their functionality.

2. Components:

The default workspace is divided into 4 corners and the “Design view” is in the center of the room.

1.      On the top left corner there’re a compound of four tabs:

1. Projects: that stands for the Visual Studio’s Solution Explorer.
2. Assets: contains the controls, and resources that can be used inside your app.
3. States: the different states of a control e.g. for a button there’re: Pressed, PointerOver, Disabled …etc.
4. Device: contains the different configurations of the device that runs your app such as resolution, and the orientation.

2.      On the bottom left corner there’s only one tab and splits in case of animation storyboarding:

1. Objects: stands for the Document Outline in the Visual Studio.
2. Storyboard Timeline: The timeline of the animation that you’re creating.

3.      On the right side there are 3 tabs:

1. Properties: If you selected a control in the Objects tab, you’ll find all its properties in this panel (Brush, Appearance, Common, Layout, Transform, Interactions, and Miscellaneous)
2. Resources: If the page you’re working on contains any resource such as a DataTemplate, Style, ControlTemplate, You can navigate to edit them from this panel.
3. Data: Where you can set the configurations of Data Manipulation over the file you’re working on and over the whole project too.

3. Tools:

On the extreme left of the Windows, there’re the tools that you can use inside the app:

1. Selection, and Direct Selection.
2. Hand, and Zoom.
3. Eyedropper, Paint Bucket, and Gradient Tool.
4. Pen, and Rectangle.
5. Containers: Grid, StackPanel, Canvas …etc.
6. Text Controls: TextBlock, TextBox, and PasswordBox.
7. Other Controls.

That’s for now, wait the next post that will be about Storyboarding and how to make the User Scenario. If there’re any question or any feedback that will be more than welcomed. Don’t hesitate to drop me an e-mail: ab.alnady@hotmail.com

Back!

Here we go with the first post of “Design 8” series. In the previous post I’ve introduced you to the series, now we’re about to start talking technically. During this series, I’ll work on Visual Studio + Blend and taking the track of C# + XAML for Windows Store Apps.

In this post, I’ll start from the File>New>Project point. So let’s start now and talk see appears when we clicked New Project.

First thing we see in the Windows Store tab is the templates that Microsoft provides for the developers. For Windows 8.1 + Visual Studio 2013, Microsoft provided the developers with 4 templates to work with. These templates are a very good raw material for the developer to work on, customize, and learn from as it gives you the opportunity to have a look of an App that is written by the hands of the technology maker itself.

Let’s that look on those 4 templates:

1. Blank App: An app that contains only one page that is … Blank
2. Grid App: An App for displaying grouped items with their dedicated data in 3 pages. The main page is for the grouped items view, another page for the group data, and the third for the item data.
3. Split App: An App for displaying grouped items too but contains only 2 pages. The main page is to choose a group from a grid of items, and the other one is divided equally into two parts, a part to choose the item from and the other is to display the details of the selected item from.
4. Hub App: This App template leverages the Hub control that beautifully came with Windows 8.1. There’re many apps that depend on that control to display its main view such as: News, Travel, Food & Drink, and Health & Fitness.

Now, I’ll take the Hub App template as a sample to work with and see how to use and get the best of the templates provided with Visual Studio 2013.

Create a new Hub App Project

Let’s Run the App and have a look from outside. (Ctrl+F5). And here’s what you see:

Let’s take a have a look now from inside.

Like the other templates it is consists of Hierarchy of a Main Page that refers to whether an Item Page or a Group Detail Page (on the right of the screen in the Solution Explorer). In this Template we’ll work with the 3 pages named:

1. HubPage.xaml: Which is the Main Page of the app.
2. SectionPage.xaml: Which is the Group Detail Page. And finally,
3. ItemPage.xaml: which is the Item Detail Page.

Let’s open the HubPage.xaml and see how did they markup it. Let’s open the Document Outline windows to see the components of this page (View >Other Windows >Document Outline).

Here’s the anatomy of this page in terms of the XAML Controls:

It’s pretty clear that this Main Page mainly depend on the Hub Control in displaying the content. This control is a kind of a container that carries Sections and displays them Vertically or Horizontally.

As shown above, the Hub Control consists of a header (which is a Grid that carries the pageTitle and the backButton) and the sections. And every section contains a header and a Content Template which is a Data Template that carries the components of the section. Now, I’m going to change few things in this template to see how I can edit, customize, or learn from it.

From the Document outline, let’s go to the first section and edit its content:

Right Click >View Source

<HubSection Width=”780″ Margin=”0,0,80,0″>

<HubSection.Background>

<ImageBrush ImageSource=”Assets/MediumGray.png” Stretch=”UniformToFill” />

</HubSection.Background>

</HubSection>

This is the source code of the first section that doesn’t contain anything but a background. So, this section doesn’t contain a Content Template. We can modify this background and add any other image to act as the entrance of the App that appears on the first section. Let’s add the Image, from the Solution Explorer:

Assets >Right Click >Add >Existing Item >Locate the Image

Now, Assign this image to be the background of the first section:

Select the first section >View Source

Change the Image Source of the Image Brush Control in the HubSection.Background tag and replace it with the image you’ve just added to the solution as follows:

                <HubSection.Background>

<ImageBrush ImageSource=”Assets/FirstSection.png” Stretch=”UniformToFill” />

</HubSection.Background>

Let’s edit one more section to get deeper on how to work with them. Let’s take the second section:

Right Click the second section >Edit Additional Templates >Edit ContentTemplate >Edit Current

The document outline will show the components of the Content Template of this section.

Let’s change the textblocks in this section and the Image

After editing them, let’s go back to the main page document outline through the arrow in the top left of the document outline.

Let’s go to the source of the section and change its properties like background and header text:

Select the second section >View Source

That’s for now, wait the next post that will be discovering that magical design software called Blend.

If there’re any question or any feedback that will be more than welcomed. Don’t hesitate to drop me an e-mail: ab.alnady@hotmail.com

Hello!

Welcome to the first post of the “Design 8” series that will help you create a better UI for your Windows Store App and leverage the User Experience of the App by applying the Microsoft Modern Design Style. In “Design 8” I prefer not only to provide practical practices, but also, I’ll demonstrate and discuss the main theoretical points of the UX design that will help us diving deep in the UX field to get the best of the theories to the surface of the UI Implementation. Design 8 will not only be published as blog posts but don’t worry about this now, I prefer to surprise you. Anyway, stay tuned! Microsoft made it more than easy to produce a good quality App simply by separating the design progress and the development progress. In Windows 8.1 and Windows Phone, those who design work with the markup files that shows the UI of the App and those who develop work with the code-behind files that contain the logic of the App. And this separation is achieved perfectly in the tools used to produce the App. It’s known that the developer mainly work on that giant Visual Studio but Microsoft also presents powerful tool to the designer to work with.

Tools:

Blend for Visual Studio: Blend is a very powerful design software that enables designers to create Hi-Quality UI with many design features. There’re also many tools that add an extension features and works perfectly with Blend such as Microsoft Expression Design and the XAML Project. I’ll introduce both of them to you and explain how to get the best of them.

That’s for now, wait the next post that will be about starting designing your Windows Store App from Scratch. If there’re any question or any feedback that will be more than welcomed. Don’t hesitate to drop me an e-mail: ab.alnady@hotmail.com