Friday, 27 September 2013
xaml stands for extensible markup language and it is a structured xml used to design rich user interface of windows store apps.
Here i pasted the code of mainpage.xaml which is inside C# XAML windows store app created using blank app template.
I used visual studio 2013 preview to create this app.
XAML Code
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
</Grid>
</Page>
Page and Grid are the classes that are under the xaml namespaces.
xmlns stands for xml namespaces.
http://schemas.microsoft.com/winfx/2006/xaml/presentation is the default namespace in which grid and page are present.
Grid and page will also work without internet because this namespace is located locally.
xmlns:local="using:App1" - This is how we use classes under the same project by using local namespace.
Every class will have properties:
Here is the modified code in which value of background property is changed to blue which changes the background color of grid to blue.
Blue is the value which is converted into solidcolorbrush type automatically to apply the color to grid.
solidcolorbrush is the type of colors in xaml.
<Grid Background="Blue" >
</Grid>
I can do the same thing like changing background color of grid to blue with the below complex code in which i mentioned the type of the color. Here there is no need of converting value to that color type which is happened before.
<Grid >
<Grid.Background>
<SolidColorBrush Color="Blue"></SolidColorBrush>
</Grid.Background>
</Grid>
To use linear gradient colors you can use the below xaml code but you can also do it simply by modifying the properties of grid control.
For better and easy designing blend should be used
<Grid>
<Grid.Background>
<LinearGradientBrush >
<GradientStop Color="Blue" Offset="0.625"/>
<GradientStop Color="Red" Offset="0.628"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
Now i will show you how to add some content in the grid. I am adding button control inside the grid. Content on the button is click me. This can be done using below code.
<Grid Background="Black">
<Button>Click me</Button>
</Grid>
Dependency property
Now execute the application once and check for the user control in toolbox under the tab named with your project name.
and the code i got for using my usercontrol is as below.
<local:MyUserControl1 />
You can use this user control like other controls which are available in your toolbox.
Document outline window in visual studio is used to know about the hierarchy of controls in xaml page.
Here i pasted the code of mainpage.xaml which is inside C# XAML windows store app created using blank app template.
I used visual studio 2013 preview to create this app.
XAML Code
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
</Grid>
</Page>
xmlns stands for xml namespaces.
http://schemas.microsoft.com/winfx/2006/xaml/presentation is the default namespace in which grid and page are present.
Grid and page will also work without internet because this namespace is located locally.
xmlns:local="using:App1" - This is how we use classes under the same project by using local namespace.
Every class will have properties:
Here is the modified code in which value of background property is changed to blue which changes the background color of grid to blue.
Blue is the value which is converted into solidcolorbrush type automatically to apply the color to grid.
solidcolorbrush is the type of colors in xaml.
<Grid Background="Blue" >
</Grid>
I can do the same thing like changing background color of grid to blue with the below complex code in which i mentioned the type of the color. Here there is no need of converting value to that color type which is happened before.
<Grid >
<Grid.Background>
<SolidColorBrush Color="Blue"></SolidColorBrush>
</Grid.Background>
</Grid>
To use linear gradient colors you can use the below xaml code but you can also do it simply by modifying the properties of grid control.
For better and easy designing blend should be used
<Grid>
<Grid.Background>
<LinearGradientBrush >
<GradientStop Color="Blue" Offset="0.625"/>
<GradientStop Color="Red" Offset="0.628"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
Now i will show you how to add some content in the grid. I am adding button control inside the grid. Content on the button is click me. This can be done using below code.
<Grid Background="Black">
<Button>Click me</Button>
</Grid>
You can also add button inside a button using below code
<Grid Background="Black">
<Button>
<Button>Click me</Button>
</Button>
</Grid>
Simple syntax for adding content inside button is as follows
<Button Content="Click me" />
Below code creates a red color rectangle inside a button
Simple syntax for adding content inside button is as follows
<Button Content="Click me" />
Below code creates a red color rectangle inside a button
<Grid Background="Black">
<Button>
<Rectangle Width="100" Height="100" Fill="Red" ></Rectangle>
</Button>
</Grid>
But you cannot add two control inside a button ie., most of the controls will allow only one content inside it.
In this case you have to use stackpanel.
stackpanel is a control that can hold more than one child control inside it.
Using the below code i added three rectangles with different colors inside a button using stackpanel.
In this case you have to use stackpanel.
stackpanel is a control that can hold more than one child control inside it.
Using the below code i added three rectangles with different colors inside a button using stackpanel.
<Grid Background="Black">
<Button>
<StackPanel>
<Rectangle Width="100" Height="100" Fill="Red" ></Rectangle>
<Rectangle Width="100" Height="100" Fill="blue" ></Rectangle>
<Rectangle Width="100" Height="100" Fill="Green" ></Rectangle>
</StackPanel>
</Button>
</Grid>
Dependency property
property that is not existed till we mention a property for an item or a control is known as dependency property.
For example we have a listview for which we have binded 100 items. now every listview item will not have all default properties because it requires very huge memory to store those properties. In this case all the items will have dependency properties. The properties which we mentioned in the code are existing.
User control
User control is a reusable control which contain XAML UI that can used anywhere any no. of times.
To create xaml user control in xaml c# windows store app
Right click on the project name in the solution explorer and click on add new item to select user control from the list of available items.
I have created the usercontrol with the below code
For example we have a listview for which we have binded 100 items. now every listview item will not have all default properties because it requires very huge memory to store those properties. In this case all the items will have dependency properties. The properties which we mentioned in the code are existing.
User control
User control is a reusable control which contain XAML UI that can used anywhere any no. of times.
To create xaml user control in xaml c# windows store app
Right click on the project name in the solution explorer and click on add new item to select user control from the list of available items.
I have created the usercontrol with the below code
<UserControl
x:Class="App1.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<StackPanel>
<Rectangle Fill="Red" Height="100"></Rectangle>
<Rectangle Fill="blue" Height="100"></Rectangle>
<Rectangle Fill="Green" Height="100"></Rectangle>
</StackPanel>
</Grid>
</UserControl>
Now execute the application once and check for the user control in toolbox under the tab named with your project name.
and the code i got for using my usercontrol is as below.
<local:MyUserControl1 />
You can use this user control like other controls which are available in your toolbox.
Document outline window in visual studio is used to know about the hierarchy of controls in xaml page.
