The sample in this article shows how to use some of the controls in .NET 3.0.
The sample in this article can easily be implemented through coding. However, here the main emphasis of this article is how to design a page using the controls in .Net 3.0.
<Window x:Class="WindowsApplication2.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Indian Flag" Height="335" Width="600" ResizeMode="CanResize" WindowState="Maximized">
<Canvas Height="200" Width="600" Canvas.Top="0" Canvas.Left="0" Margin="0,0,600,600">
<Canvas Height="100" Width="590" Canvas.Top="0" Canvas.Left="0" Background="Orange"/>
<Canvas Height="100" Width="590" Canvas.Top="100" Canvas.Left="0" Background="White">
<Ellipse Width="100" StrokeThickness="2" Stroke="Blue" Height="100" Canvas.Left="240">
</Ellipse>
<Line Stroke="Blue" StrokeThickness="2" X1="290" X2="290" Y1="0" Y2="100" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="240" X2="340" Y1="50" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="243" X2="290" Y1="42" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="246" X2="290" Y1="32" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="253" X2="290" Y1="21" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="262" X2="290" Y1="10" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="277" X2="290" Y1="3" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="307" X2="290" Y1="3" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="321" X2="290" Y1="10" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="331" X2="290" Y1="21" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="337" X2="290" Y1="32" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="339" X2="290" Y1="42" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="339" X2="290" Y1="60" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="336" X2="290" Y1="70" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="328" X2="290" Y1="80" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="318" X2="290" Y1="90" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="306" X2="290" Y1="98" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="244" X2="290" Y1="60" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="248" X2="290" Y1="74" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="255" X2="290" Y1="86" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="266" X2="290" Y1="94" Y2="50" ></Line>
<Line Stroke="Blue" StrokeThickness="2" X1="277" X2="290" Y1="98" Y2="50" ></Line>
</Canvas>
<Canvas Height="100" Width="590" Canvas.Top="200" Canvas.Left="0" Background="Green"/>
</Canvas>
</Window>
Output of the above code:
Similarly the below code implements the US flag:
<Window x:Class="WindowsApplication3.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="US Flag" Height="412" Width="600" ResizeMode="NoResize">
<Canvas Height="240" Width="600" Canvas.Top="0" Canvas.Left="0" Margin="0,0,600,600">
<Canvas Height="360" Width="590" Canvas.Top="0" Canvas.Left="0" Background="White"/>
<Canvas Height="200" Width="250" Canvas.Top="0" Canvas.Left="0" Background="#002b5e">
<Canvas Height="25" Width="250" Canvas.Top="0" Canvas.Left="0" Background="#002b5e" >
<Image Source="star.jpg" Height="22" Canvas.Left="12"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="52"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="92"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="134"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="178"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="220"></Image>
</Canvas>
<Canvas Height="25" Width="250" Canvas.Top="0" Canvas.Left="0" Background="#002b5e" Margin="0,22,0,0">
<Image Source="star.jpg" Height="22" Canvas.Left="32"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="72"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="114"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="158"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="200"></Image>
</Canvas>
<Canvas Height="25" Width="250" Canvas.Top="0" Canvas.Left="0" Background="#002b5e" Margin="0,44,0,0">
<Image Source="star.jpg" Height="22" Canvas.Left="12"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="52"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="92"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="134"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="178"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="220"></Image>
</Canvas>
<Canvas Height="25" Width="250" Canvas.Top="0" Canvas.Left="0" Background="#002b5e" Margin="0,66,0,0">
<Image Source="star.jpg" Height="22" Canvas.Left="32"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="72"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="114"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="158"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="200"></Image>
</Canvas>
<Canvas Height="25" Width="250" Canvas.Top="0" Canvas.Left="0" Background="#002b5e" Margin="0,88,0,0">
<Image Source="star.jpg" Height="22" Canvas.Left="12"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="52"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="92"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="134"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="178"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="220"></Image>
</Canvas>
<Canvas Height="25" Width="250" Canvas.Top="0" Canvas.Left="0" Background="#002b5e" Margin="0,110,0,0">
<Image Source="star.jpg" Height="22" Canvas.Left="32"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="72"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="114"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="158"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="200"></Image>
</Canvas>
<Canvas Height="25" Width="250" Canvas.Top="0" Canvas.Left="0" Background="#002b5e" Margin="0,132,0,0">
<Image Source="star.jpg" Height="22" Canvas.Left="12"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="52"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="92"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="134"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="178"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="220"></Image>
</Canvas>
<Canvas Height="25" Width="250" Canvas.Top="0" Canvas.Left="0" Background="#002b5e" Margin="0,154,0,0">
<Image Source="star.jpg" Height="22" Canvas.Left="32"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="72"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="114"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="158"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="200"></Image>
</Canvas>
<Canvas Height="25" Width="250" Canvas.Top="0" Canvas.Left="0" Background="#002b5e" Margin="0,176,0,0">
<Image Source="star.jpg" Height="22" Canvas.Left="12"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="52"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="92"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="134"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="178"></Image>
<Image Source="star.jpg" Height="22" Canvas.Left="220"></Image>
</Canvas>
</Canvas>
<Rectangle Width="340" Height="30" Fill="#cc0000" Margin="250,0,590,0"></Rectangle>
<Rectangle Width="340" Height="27" Fill="White" Margin="250,30,590,0"></Rectangle>
<Rectangle Width="340" Height="30" Fill="#cc0000" Margin="250,57,590,40"></Rectangle>
<Rectangle Width="340" Height="27" Fill="White" Margin="250,84,590,0"></Rectangle>
<Rectangle Width="340" Height="30" Fill="#cc0000" Margin="250,114,590,80"></Rectangle>
<Rectangle Width="340" Height="26" Fill="White" Margin="250,141,590,0"></Rectangle>
<Rectangle Width="340" Height="30" Fill="#cc0000" Margin="250,171,590,120"></Rectangle>
<Rectangle Width="590" Height="30" Fill="#cc0000" Margin="0,240,590,120"></Rectangle>
<Rectangle Width="590" Height="30" Fill="#cc0000" Margin="0,300,590,120"></Rectangle>
<Rectangle Width="590" Height="30" Fill="#cc0000" Margin="0,360,590,120"></Rectangle>
</Canvas>
</Window>
Output is as below:
