Adding Custom Fonts to Windows Store App

Through working on many Windows Store Apps (8/8.1), I faced some issues in adding/embedding and using custom fonts to the projects. So, I decided to write this blog post to tell the steps of using custom fonts inside the App.

  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”.
    Creating and adding fonts
  2. Make sure that the Build Action of the desired font is “Content”
    Build Action
  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

Design 8: 04. Laying out an App Page – Part 1

Post Header

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).

Horizontal Alignment 

    • 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).

 Vertical Alignment

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

 Margin

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

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

Centralizing

Centralizing output 

 

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:

 Stretching

Stretching output

 

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:

Adding column

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

Adding first rectangle 

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

 Adding second rectangle

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

 Adding third rectangle

Now let’s run and see the output layout:

Final 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

An amazing Windows Phone Development Book is out now!

Few days ago, I was contacted by the well-known publishing company “Packt Publishing” to review one of their books about Windows Phone 8 Development .Windows Phone 8 Application Development Essentials

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 :)

Design 8: 03 – Controls – Part 4

Post Header

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.).

Visual Studio Editor

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>

Continue reading

Design 8: 03 – Controls – Part 3

Part 3 Header

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 Continue reading

Design 8: 03 – Controls – Part 2

Part 2 Header

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.

 Controls Part 2

Action Controls

  • Button:

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

Design 8: 03 – Controls – Part 1

Part 1 Header

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:

Containers - Layout Panels

  • 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. Continue reading