بانک اطلاعاتی نرم افزار،سخت افزار،شبکه و برنامه نویسی

ساخت یک دکمه به کمک XAML و #C

مقدمه

همونطور که می دونید، XAML یک زبان مبتنی بر xml هستش که توسط کمپانی مایکروسافت، برای کمک به طراحان و برنامه نویسان جهت ساخت هر چه آسان تر و سریعتر واسط گرافیکی (user interface) پروژه های WPF و ... ارائه شده. در این مقاله به نحوه ساخت یک دکمه ساده، تحت این زبان میپردازیم. برای انجام این پروژه از نسخه نهم Visual Studio یا همان VS 2008 استفاده میکنیم...



ایجاد پروژه

Visual Studio رو باز کرده، پروژه جدیدی از نوع WPF Application ایجاد کنید. دقت داشته باشید که نوع پروژه #Vicual C باشه. قصد ندارم که تو این مقاله به جزئیات یک پروژه WPF و پنجره های مربوط به اون و شرح اونها بپردازم، برای همین با هم مستقیم میریم سر اصل مطلب: بعد از ایجاد پروژه، پنجره ای با نام Window1.xaml رو مشاهده میکنید که مخصوص نوشتن کد های xaml شماست. یک سری تگ های از پیش تعیین شده، از قبیل سایز طول و عرض پروژه، name space ها، عنوان و ... در این صفحه وجود دارن که به شکل زیر خواهد بود:

 

<Window x:Class="ButtonsSample.Window1"
      
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
      xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
      Title="Window1" Height="300" Width="300">
      <Grid>
      </Grid>
</
Window>

اگر پروژه رو run کنیم، طبیعتا یک فرم خالی، به رنگ سفید و سایز 300x300 مشاهده میکنیم.


ایجاد دکمه

برای ایجاد دکمه، کافیه به آسانی هر چه تمام تر تگ </ Button> رو بین تگ <Grid> قرار بدیم. تگ <Grid> که به هنگام ایجاد پروژه به صورت خودکار در فرم xaml ما وجود دارد، نوعی hoder برای قرار گیری بقیه المان های پروژه در اون در نظر گرفته میشه... کد ایجاد دکمه به صورت زیر خواهد بود:

 

<Window x:Class="ButtonsSample.Window1"
      
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
      xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
      Title="Window1" Height="300" Width="300">
      <Grid>
            
<Button Name="myBtn" Content="کلیک کن" Width="70" Height="25" />
      
</Grid>
</
Window>

از طریق قطعه کد بالا، ما دکمه ای به اندازه 70x25 و با متن "کلیک کن" ایجاد کردیم. از اونجائی که ما هیچ خصیصه ای مبنی بر تنظیم مکان قرار گیری دکمه در پروژه ایجاد و مقدار دهی نکردیم، دکمه به صورت پیش فرض در وسط فرم ظاهر خواهد شد. خصیصه Name برای دسترسی به دکمه در code behind و اعمال رفتار مورد نظر با استفاده از #C بر روی اون به کار میرود، که در اینجا من اون رو myBtn نامیدم...


تنظیم مکان قرار گیری دکمه

حالا اجازه بدید، محل قرارگیری دکمه رو ببریم هر جایی که دلمون میخواد. به عنوان مثال من ترجیح دادم، دکمه پروژه من در گوشه پائین، سمت راست، با فاصله 20 پیکسل از گوشه ها قرار بگیره. قطعه کد مورد نظر، به این صورت خواهد بود:

 

<Window x:Class="ButtonsSample.Window1"
      
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
      xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
      Title="Window1" Height="300" Width="300">
      <Grid>
            
<Button Name="myBtn" Content="کلیک کن" Width="70" Height="25"
               
VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="20,20" />
      
</Grid>
</
Window>

همونطور که حتما خودتون هم میدونید در نسخه های قدیمی تر NET. امکان تنظیم عادی محل قرار گیری دکمه ها، از سمت بالا و چپ فرم بود و این به این معنی بود که اگر دوست داشتیم دکمه ما مثلا سمت راست فرم و پائین آن باشد و با تغییر اندازه فرم، جای اون هم وابسته به اندازه فرم تغییر کنه، نیاز به چند خط کدنویسی داشتیم. در حالی که همونطور که دیدید، در xaml تنها با نوشتن دو خصیصه VerticalAlignment و HorizontalAlignment و دادن مقدار مورد نظر به این دو تونستیم به راحتی این کار رو انجام بدیم. در مورد خصیصه margin هم میشه گفت که این خصیصه برای ایجاد فاصله 20 پیکسلی از گوشه سمت راست و پائین فرم به کار رفته، که حتما اگر با css کار کرده باشید با این خصیصه به خوبی ِ خوب آشنائید.

 

تغییر قیافه ظاهری دکمه

به قطعه کد زیر دقت کنید:

 

<Window x:Class="ButtonsSample.Window1"
      
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
      xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
      Title="Window1" Height="300" Width="300">
      <Grid>
            
<Button Name="myBtn" Content="کلیک کن" Width="70" Height="25"
               
VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="20,20"
               
Background="LightBlue" BorderBrush="DarkBlue" Foreground="DarkBlue" />
      
</Grid>
</
Window>

همونطور که مشاهده میکنید ما با تنظیم خصایصی از قبیل Background ،BorderBrush ،Foreground و ... شکل ظاهری دکمه رو دستخوش تغییرات دلخواهمون کردیم. درست مانند نسخه های قدیمی تر NET. در اینجا هم با تنظیم خصایص بیشمار موجود، میتونیم هر چه بیشتر ظاهر دکمه و حتی دیگر المان های موجود در پروژه رو تغییر بدیم، که جزئیات این مسئله و پرداختن به اونها از حوصله مقاله ما خارج ِ و میتونه به زمانهای دیگه و یا حتی به عهده خود شما جهت بررسی و جستجوی بیشتر سپرده شه.
با توجه به تنظیم مقادیر جدید، ظاهر دکمه ما باید الان به این شکل باشه:

 

افزودن عکس به دکمه

تمام چیزی که برای افزودن عکس به یک دکمه نیازه، اضافه کردن تگ <Image> داخل تگ </ Button> است:

 

<Window x:Class="ButtonsSample.Window1"
      
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
      xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
      Title="Window1" Height="300" Width="300">
      <Grid>
            
<Button Name="myBtn" Width="70" Height="25"
               
VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="20,20"
               
Background="LightBlue" BorderBrush="DarkBlue" Foreground="DarkBlue">                     
                  
<Image Source="amor.png" Width="20" Height="20" />
            
</Button>
      </Grid>
</
Window>

همونطور که میبینید، خصیصه Content رو از تگ <Button> حذف کردیم. به علت اینکه تگ <Image> هم به نوعی Content دکمه حساب میاد و در یک دکمه تنها یک بار میتونیم این خصیصه رو تنظیم کنیم. اگر Content رو پاک نکنیم و تگ  <Image> رو هم به دکمه مورد نظر اضافه کنیم، با پیغام خطای .System.Windows.Controls.Button.Content' property has already been set and can be set only once' مواجه خواهیم شد.

مسئله جالب در مورد xaml اینه که در اکثر قریب به اتفاق موارد، امکان قرار دادن هر کنترلی، داخل کنترل دیگه وجود داره. برای تست این موضوع، شما میتونید هر تگ دیگه ای رو داخل دکمه، به جای تگ <Image> قرار بدید و ببینید که اون کنترل داخل دکمه قرار خواهد گرفت. به قطعه کد زیر دقت کنید:

 

<Window x:Class="ButtonsSample.Window1"
      
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
      xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
      Title="Window1" Height="300" Width="300">
      <Grid>
            
<Button Name="myBtn" Width="70" Height="25"
               
VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="20,20"
               
Background="LightBlue" BorderBrush="DarkBlue" Foreground="DarkBlue">
                  
<TextBox Text="متن مورد نظر" FontSize="8" />
            
</Button>
      
</Grid>
</
Window>
+ داود محمدی علی آبادی ; ۱٠:٥٩ ‎ق.ظ ; یکشنبه ۱٥ شهریور ۱۳۸۸
comment نظرات ()