প্রতিটি ব্লগে মন্তব্য লেখার ব্যাবস্থা থাকে। মন্তব্য দেয়ার জন্য, মন্তব্যকারীর নাম, ইমেইল এড্রেস এবং মন্তব্য লেখার যায়গা থাকে। সবশেষে একটা সেন্ড বাটন থাকে। নিচের চিত্রের মত একটা কাজ আমরা এ পর্বে করব
- এ কাজটা করার জন্য আমি গ্রিড লেয়াউট ব্যাবহার করেছি। অন্য যে কোন লেয়াউট দিয়েও করা যাবে
- Name, Email, Comment এই লেখা গুলো দেখানোর জন্য TextBlock ব্যাবহার করেছি, Label দিয়েও করা যায়
- Name, Email, Comment লেখার জন্য TextBox ব্যাবহার করেছি।
- Send একটা বাটন হিসাবে কাজ করব
যে ভাবে শুরু করতে হবেঃ
- প্রথমে লেয়াউট বা ছাচ তৈরি করতে হবে। তার জন্য চারটা রো দরকার এবং দু'টা কলাম দরকার। তাহলে কোডে দেখি কিভাবে রো এবং কলাম নেয়া যায়।
<!-- Create Row-->
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!--Create Column-->
<Grid.ColumnDefinitions>
<ColumnDefinition /> <ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
চিত্রে দেখি কেমন হয়েছে
- এখন রো এবং কলামকে আমাদের কাজের উপযোগি আকার দিতে হবে। কোডে দেখি কিভাবে আকার দেয়া যায়
<!-- Create Row-->
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="120" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<!--Create Column-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition Width="213" />
</Grid.ColumnDefinitions>
</Grid>
চিত্রে দেখি কেমন হয়েছে
- এখন তিনটা TextBlock নিয়ে তাদেরকে যথাক্রমে Grid.Row="0" Grid.Row="1" এবং Grid.Row="2" তে গেথে (রেখে) দেয়া হবে। নিচের কোড দেখুন
<!-- Create Row-->
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="90" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<!--Create Column-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition Width="213" />
</Grid.ColumnDefinitions>
<!--TextBlocks-->
<TextBlock Grid.Row="0" Name="tblName" Text="Name:" Margin="5" />
<TextBlock Grid.Row="1" Name="tblEmail" Text="Email:" Margin="5"/>
<TextBlock Grid.Row="2" Name="tblComment" Text="Comment:" />
</Grid>
চিত্রে দেখুন
- এখন তিনটা টেক্সট বক্স ও একটা বাটন নিয়ে উপরের মত বসিয়ে দিতে হবে।
<!-- Create Row-->
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="90" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<!--Create Column-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition Width="213" />
</Grid.ColumnDefinitions>
<!--TextBlocks-->
<TextBlock Grid.Row="0" Name="tblName" Text="Name:" Margin="5" />
<TextBlock Grid.Row="1" Name="tblEmail" Text="Email:" Margin="5"/>
<TextBlock Grid.Row="2" Name="tblComment" Text="Comment:" />
<!--TextBox-->
<TextBox Grid.Column="1" Grid.Row="0" Name="txtName" Margin="3"/>
<TextBox Grid.Column="1" Grid.Row="1" Name="txtEmail" Margin="3"/>
<TextBox Grid.Column="1" Grid.Row="2" Name="txtComment" Margin="3" />
<!--Send Button-->
<Button Content="Send" Grid.Column="1" Grid.Row="3" Height="23" HorizontalAlignment="Left" Margin="126,0,0,0" Name="b" VerticalAlignment="Top" Width="75" />
</Grid>
চিত্রে দেখুন
এইতো হয়ে গেলো সবচেয়ে ছোট্ট ও সহজ একটা WPF ডিজাইন। ;-) এটাকে F5 চেপে রান করে দেখুন কেমন দেখায়...
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন