Windows mobile apps හදමු - Part 5 ( Layouts )

Grid layout

මේ ලිපියෙන් කතා කරමු XAML Layouts ගැන.layout එක කියන්නේ interface එකේ components පිහිටන ආකෘතිය..මේ ලිපියෙන් කතා කෙරෙන්නේ grid layout එක ගැන

අලුත් app එකක් open කරගන්න.සාමාන්යෙන් interface එකක් layout එක විදියට default තියෙන්නෙත් grid layout එකක්.ඒ කියන්නේ කොටු දැලක විදියේ ආකෘතියක්.mainpage.xaml එක open කලාම ඉහලින්ම import ටිකත් ඊට පහලින් grid layout ටැග් දෙකත් දකින්න ලැබේවි.ටැග් දෙක ඇතුලට පහල තියෙන code එක දාගන්න

<Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Rectangle Height="200" Fill="Red" Grid.Row="0"/>
        <Rectangle Grid.Row="1" Fill="Green"/>

මෙතැනදී මුලින්ම grid එකේ row එකක් කොහොම වෙන්න ඕනෙද කියල කියල තියෙනවා

<Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

ඊට පස්සේ හැදෙන්න ඕනේ row දෙකක rectangle දෙකක් define කරලා තියෙනවා..

<Rectangle Height="200" Fill="Red" Grid.Row="0"/>
        <Rectangle Grid.Row="1" Fill="Green"/>

පලවෙනි rectangle එකේ row එක 0 විදියටත්,දෙවැනි row එක 1 විදයටත් define කරලා තියෙනවා

පලවෙනි rectangle එකේ උස 200ක් විදියටත් ,colour එක red විදියටත් දීල තියෙනවා

දෙවැනි rectangle එකට  උසක් දීල නැහැ ,colour එක green විදියට දීල තියෙනවා.මෙතැනදී මුලින් 200ක් උස rectangle එක හැදුනට පස්සේ තියෙන සම්පුර්න උසම අරගෙන තියෙනවා දෙවනි rectangle එකට.එහෙම වුනේ මේ grid layout එකට define කරලා තියෙන්නේ row දෙකයි.ඒ නිසා සම්පුර්ණ grid එක row දෙකකට බෙදිලා තියෙනවා..

දැන් <Rectangle Height="200" Grid.Row="1" Fill="Green"/> විදියට වෙනස් කරලා දෙවැනි  rectangle එකට 200ක උසක් දෙන්න...

මෙතැනිදී දෙවැනි rectangle එක 200ක උසට හැදිලා row එකේ මැදට align වෙලා තියෙනවා...අපි define කරන row ගානට අනුව layout එක හැදෙනවා.මේ දෙවැනි rectangle එක අපිට ඕනේ විදියට align කරගන්න පුළුවන්.

<Rectangle Height="200" Grid.Row="1" Fill="Green" VerticalAlignment="Top"/>

<Rectangle Height="200" Grid.Row="1" Fill="Green" VerticalAlignment="Bottom"/>

ඊලග ලිපියෙන් grid layout එක ගැන තව දුරටත් කතා කරමු...