Basic of XAML in WPF : semantics of user interface in WPF
When you meet WPF firstly, you may be surprised, because of XAML, which is new in WPF. XAML is an acronym, Extensive Application Markup Language. With XAML, you can write user interfaces (UI) very easily.
For adding UI components into your program, you need to know three things.
First, every XAML components start with <component name>, and end with </component name>. For examples, if you want to add a button, just write <Button> </Button> then a button appears in your program.
Second, modifying UI components can be achieved by adding properties into it.
For examples, if you want to add text on the surface of the button, just add a few of words like this: <Button Content=”text you want to add”> </Button>.
Third, every UI components can have another UI component. If you make a button to have another button in it, you can do it.
<Button> <Button> </Button> </Button>
Well, size of the button 2 looks too small. J We need to make the button 2 larger. Let’s add width and height properties to the button 2, like this:
<Button> <Button Width=”50” Height=”50”> </Button> </Button>
Now, button 2 becomes larger. J Hmm.. These buttons looks very similar with each others. Its better to paint different colors in them. Let’s paint Red color to button 1 and Blue color to button 2.
<Button Background=”Red”> <Button Background=”Blue” Width=”50” Height=”50”> </Button> </Button>
Then the buttons are painted with different colors. OK. I will carve my name on it. You could carve your name or something.
<Button Background="Blue" Width="50" Height="50">
<TextBlock Text="Sean">
</TextBlock>
</Button>
</Button>
In this code, Button has another button, which has a textblock. You could many UI components inside another components. Now, Let's see whole code of this window.
xmlns="http://schemas.microsoft.com/winfx/2006 ··· entation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="118" Width="188">
<Grid>
<Button Background="Red">
<Button Background="Blue" Width="50" Height="50">
<TextBlock Text="Sean">
</TextBlock>
</Button>
</Button>
</Grid>
</Window>
Every window could has one UI component. and the window has a grid in the default setting. So in this code, Window has a grid, which has a button, which has another button, which has a textblock.
Then somebody question like this: "Is it impossible to add many components inside one component?" The answer is "Possible".
We could put many UI components inside one component with Container. Grid is one of container. There are several Container. : Grid, Canvas, StackPanel are used for general purpose, and DockPanel, UniformGrid, WrapPanel are used for specific purpose.
In the following code, we split the grid into two rows. and put a blue button into first row and a red button into second row.
xmlns="http://schemas.microsoft.com/winfx/2006 ··· entation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="118" Width="188">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Background="Blue"></Button>
<Button Grid.Row="1" Background="Red"></Button>
</Grid>
</Window>
Until now, we have learned about how to add UI components in WPF.
Adding UI components is not whole area of XAML. There are several areas in XAML like data binding, animation, and so on. These things are interestings and funny, make your program "looks good". :)
Have a good time.
