UWP Coverting Text into Vector Image Using Microsoft Expression Blend

Open your Expression Blend and Drag a Textblock onto designer. Write some text and Increase its font as shown in picture.

Right click on your text and click on “ Convert to Path “ inside of Path . see the picture below.

Your image has been converted to a vector image. In order to see your path image select pen tool from toolbox as show below.

you can change the layout of your text by selecting Direct selection tool from toolbox. See the word “D” in below picture , by selecting any of its node using direct selection tool you can change its layout.

UWP Layout Controls and Usefull features of Grid Control

In this lesson I'm going to talking about layout rather the process of positioning visual
controls in other elements in your application user interface.

Important thing about all controls in XAML is their "Content Property".

"Content property can only be set to an instance of another object". And it can be set only once but that’s not the case with layout controls.But Content Property of layout controls can be set more than once. In fact they don’t have a content property instead they have a "Children Property". Like Grid Control.

Children Property is a special data type (a collection data type) that can hold XAML
controls called UI element collection.
                In XAML as we add new instances of controls inside of the definition of our layout
control, we actually calling the add method of our layout controls. So here you can
understand that how XAML is simplifying stuff for us.

·        

Grid Control

·         Grid allows you to create rows and columns to make cells and then each of the
controls that are used by our application can request which row and which column
they wanna be placed inside of.

·         Whenever you create a new project , that project already contain a Grid with no rows
and columns defined . By default there is always 1 row and 1 column in Grid even if it is
not explicitly defined.

·         Grid.Row="0" how this works ? This is actually called attached properties.
so the point is why attached properties are exists ? This is an advance XAML topic to
discuss.

·         Attached Properties:

Look at this [Grid.Row="1"] , Grid.Row is attached property here.
attached property is just like a global property that can be accessed from anywhere in
given scope.

·         Attached Properties VS Dependency Properties :
attached properties keep your XAML simple.

·         Sizing rows and Columns

o    Height="Auto"
height="auto" mean the height for the row should be tall enough to accommodate all of the
contents inside it.

o    Height="*" ( Star Sizing )
Utilize the all available space.
when you write like Height= " 3 * " > its mean you're saying give me 3 shares from all the available space.

o    When you write height and width in numbers like Width ="100" it represents that number of pixels for the width and height.

o    In general its not a good idea to put sizing properties in numbers of pixels because there are
various screen sizes upon which your application will run.

o    When you do not specify a row or column for a control it will go to row=0 and column=0
by default.

·         VerticalAlignment and HorizontalAlignment
vertical and horizontal alignments pull controls towards their boundaries. 

·         Margin Attribute:
margin attributes push controls away from their boundaries.
margin works in a clock wise fashion. Like margin=" left , top , right , bottom "

Understanding XAML schemas and namespace declarations

XAML is actually a flavor of XML , so in order to work with XAML , we need to follow its schema. Schema is like a agreement between both producer and consumer of XML , so they can work together. In case if you want to read that schema.
Whenever you create a new UWP Application in visual studio. You find some namespaces in the designer code of XAML. UWP stands for Universal Windows Platform. Go to solution explorer and Open MainPage.xaml. You'll find following lines of code in the tag of <page----></page> of your application. These are different schema and namespaces that uses in UWP applications. Now we're going to explore these namespaces one by one.


In the very first line you can find your class name which is infect your application name with MainPage. Below it you'll find few name spaces like 

• :x
• :local
• :d
• :mc

These are the namespaces that uses for different purposes. let explain each one by one. and one more thing before starting that URL which you're watching here are not URLs infect. They are URI which stands for Uniform Resource Indicator. URI used to define namespace that we can use further in our document of app. 

1. xmlns = " http:/schemas.microsoft.com/winfx/2006/xaml/presentation "
   This schema defines all UI ( User Interface ) components like button , textblock etc.
   
2. xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
   All of the rules of XAML in general are defined at this schema. From rules you can assume that rules which have to be followed while writing UI in XAML.
   
3. xmlns : local = " using: --- name of application --- "
   This is a local namespace . You can reference your own local classes here by using this namespace in application.
   
4. xmlns : d = "http://schemas.microsoft.com/expression/blend/2008 "
5. xmlns : mc = " http://schemas.openxmlformats.org/markup-compatibility/2006 "
   xmlns : d and xmlns : mc are the schemas that used to represent the design view of application. Design view is the designer area of application.
   
6. mc : Ignorable = " d "
   if you want to ignore some namespace on runtime , can put that namespace in double quotes as here " d " will be ignored on runtime that has been defined already on 4th line. This option exists here because of xmlns : mc namespace.  

This is all . It is my first ever attempt to write an article . Sorry for poor English . English is not being my mother tongue. Please provide feedback so that I'll improve my writing and be able to share further better stuff.

Publishing a Visual Studio Project on GitHub

   GitHub is a version control system that used to work across the shared projects. You can also use it to put your project on cloud , so you'll never worried about its sequential backups. GitHub will save your all project versions before and after changing.
   Microsoft is providing GitHub Extension for visual studio. You can download and install it from here . I'm going to show you in this blog post that how to make a project in visual studio and publish it to GitHub .
I'm writing this with Snapshots so that you can easily understand what I'm going. I'm writing it with Steps. please put your comments as feedback because I'm very new to writing blog.

1. Open Visual Studio and Select the option " Open from Source Control " .this option used to create a project on Some Version Control System. Like GitHub or TFS etc. TFS stands for Team Foundation Server.
   
   
2.   After selecting "Open from Source Control"  a small window named " Team Explorer - Connect " will open. List of projects under the tab of GitHub will be showing in that window.
   
   
3. After Selecting your project type and name you've to focus on a small check box on bottom right corner "Add to Source Control". by default this is check box is not checked. you've to check it to Put your project on GitHub. After that click OK.
   
   
4. You'll be shown another small window like below . you've to choose your version control system from Provided options. Select Git and click OK.
   

         a) Team Foundation Version Control is Microsoft's Version Control system that is               also very famous. 

   
   
   
   5. After this you'll be shown two types of repositories
              a) Online repositories
             b) Local repositories
       Under local repositories , the project you just created will be visible.
   
   
    6.  To sync your local project with online GitHub click on Clone. VS will ask for the URL of online repository. It is that repository which you've already created on GitHub website. If you did't create it yet. Simply open GitHub and create your account.
   
   
   
   
   7. Open your GitHub account. you'll find few option over there.
   
   
   
   8.  Click to Create New Repository.
       your already created repositories will be shown here also.
   
   
   
   9. Once your click new repository . You'll be provided a form to fill with some information.
           a) Repository name > set a name for your repository to access it from web using URL like
              " Owner / Repository name "
           b) Write a description for your repository.
   
   
   
   
   
   
   
   10 .  You'll find two buttons Public and Private
                  a) Public:
                          Anyone can see and access your project.
                  b) Private:
                          You've option to set the access level of your project.
                  c) Initialize this repository with a README:
                           If you check it . a copy of online repository will be sync to your desktop                                     immediately. So leave it UnCheck and click Create Repository.
   
   
    11. Your repository has been created . Copy the URL of your repository as shown in picture             below.
   
   
   
   
   
    12. Now come back to your visual studio and paste the URL of your repository and click "Clone". Your local project will be sync to your online repository.
   
   
   
   
   13. In case to publish your repository . Just paste the URL of online repository and click Publish.
   
   
   
   
   14. You can see your synced repository online by clicking "View" as given in below picture.
   
   
   

Static Resources in XAML ( Universal Windows Platform , Windows 10 Applications )

Static resources are defined inside the application cdoe and they are available to the controls as "static source of design" which means they defined on compile time by the programmer and cannot be changed on run time. On the other hand "Dynamic Resources" can be change on runt time.
   To elaborate a static resource lets make a simple application in UWP. UWP stands for Universal Windows Platform which has been introduced in Windows 10 application development.

 

    Open visual studio and make a windows 10 Universal app as shown in figure.

 

 

 

Open your MainPage.xaml from Solution Explorer and go to the XAML code behind XAML Designer.

 

  Now we're going to add a button in side the Default Grid view. In order to add two buttons use following code.

1. <Button Content="Click Me 1" Margin="119,191,0,417" ></Button>  
2. <Button Content="Click Me 2" Margin="119,267,0,341" ></Button>  

   Its time to add a static resource for these buttons. use following see the following code and snapshot.

1. <Page.Resources>  
2.     <Style TargetType="Button" >  
3.         <Setter Property="Background" Value="Red"></Setter>  
4.         <Setter Property="Foreground" Value="White"></Setter>  
5.     </Style>  
6. </Page.Resources>  

After inserting the code for resource your buttons will look like ..

 
There are few properties and XAML objects ( tags ) that needs explanation.

• Property TargetType asks us the Control type that we're going to design using this resource.
  In this case we're applying our resource on button. you can also apply it any control that accept
  resources.
• In the tag of Setter we are using two properties
  1. Property = "Background"
      This feature asks us to write the the property that we're going to apply on controls. In our case we're going to apply
      background color on buttons , so we write background.
  2. Value = "Red"     once you write the property that will be applied to controls you've to mention its value as well. In this case I just mentioned it with "Red" color.
• You might noticed that the styles that we've set for the buttons is applying to all the button that we're using on current scope of project. If you want to apply resources on specific controls you can use Controls with their names.
• If you have any problem just put your comments below the post. I'll respond you their.

Type Converter in XAML

In this , I'm going to show you how XAML Works in background and makes UI designing very easy for us .

we're going to discuss about Automatic Type converters in XAML.

whenever you make some control in XAML you set its properties. For example in following screen shot we are making a button in XAML and setting its properties like

• Name 

• Horizontal Alignment

• Margin

• Background

• Vertical Alignment                 

• Horizontal Alignment

• and

• Background Color
  etc , you are shown a list of given option through Intellisense like below.
    

• So you have limited options as shown in above screenshot. you've to select 1 position from 4 given options . These options are infect enums.

have you ever noticed that when you type in for setting the properties like ,

Now I'm going to show you the alternate way to set properties using C# syntax. To make a button from C# write following code in Page Load Event in program.

when you make a control from C# code. You've to set all of its properties in code. In this case we've set its

• HorizontalAlignment
  and
• Background

 properties. You selected the background color and Horizontal Alignment from a strongly typed enumeration for the button. So the question is ! How these properties are mapped to strongly typed enumeration, when you type a string which is "left" in the case of alignment property and "Red" in case of color selection.

Answer is ! XAML parser does this job.
   XAML parser convert string value into a strongly typed version of that value.
so when you set the properties like < horizontalAllignment = "Left" >  , the string "Left" will be mapped to the strongly typed enum by the XAML parser.

Adding a Page Load event in XAML ( Window Store Apps )

We've worked a lot on windows forms applications in C#.net .
Page load event automatically added into the form.cs file when you double click anywhere on your form in windows form application. But this is not the case in UWP Applications. UWP stands for Universal Windows platform. XAML apps does't provide you the event handler for the page when you double clicks anywhere on your page in XAML apps.
    So in order to add a page load event in XAML Apps. Make a UWP Project from Visual Studio. To make a project , open visual studio and select new project as given below,

• Select "Universal" from left side.
• choose "Blank App ( Universal Windows )". and press enter.

Open MainPage.xaml from Solution explorer. Main page with visual design will be displayed.
type an event in opening tag of "Page" named " Loaded " just like below screenshot. An event handler for the page loading will be added to .cs file behind the UI page.


Take your cursor on the name of event which is "Page_Loaded" here and press F12 , you'll be redirected to the event handler in code page.
see the screen shot of event below.


This is page load event. Do whatever you want. Have fun coding..post in comments if your got some query.