محتویات سایت
        برچسب های محبوب 








 
   ساخت یک دکمه به کمک XAML و #C
  نحوه ساخت یک دکمه در یک پروژه WPF از طریق کد XAML و اعمال یک رویداد ساده به آن از طریق #C
   WPF
   ۵۳۲۴۳
    سورس کد
   محمد (برنا) پورحسین
   ۱۳۸۸/۳/۳
نسخه قابل چاپ نسخه قابل چاپ

مقدمه

همونطور که می دونید، 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>

قطعه کد فوق، دکمه ای رو به همراه یک TextBox داخلش، نشان خواهد داد...

افزودن رویداد به دکمه

یک دکمه بدون event handler مخصوص به خود، هیچ استفاده ای نداره. افزودن یک رویداد به یک کنترل در پروژه های تحت xaml بسیار بسیار سادست. در کدهای xaml رویداد ها دقیقا مانند یک property به تگ کنترل مورد نظر اضافه میشن.


<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"
               Click="myBtnClicked" />
      </Grid>
</Window>

همونطور که مشاهده میکنید، خاصیت click دکمه رو myBtnClicked نامیدیم. در حال حاضر، با اجرای برنامه و کلیک بر روی دکمه هیچ اتفاق خاصی نخواهد افتاد، تا زمانی که تابع myBtnClicked در جای مشخصی از پروژه تعریف نشه. کاری که لازمه الان انجام بدیم اینه که قطعه کد زیر را در code-behind پروژه (formName.xaml.cs) بنویسیم تا رویداد مربوط به کلیک دکمه رو مدیریت کنه.


private void myBtnClicked(object sender, EventArgs e)
{
      MessageBox.Show("! دکمه، کلیک شد");
}

از این به بعد، بعد از اجرای پروژه، هر زمان که دکمه کلیک بشه، message box ای همراه با متن "دکمه، کلیک شد !" نمایش داده خواهد شد.


دسترسی به دکمه، از طریق کد #C

هر زمانی که یک کنترل از طریق کد xaml ایجاد شود، از همان لحظه از طریق خاصیت name خودش، در code-behind پروژه قابل دسترس خواهد بود. کد زیر رو نگاه کنید:


this.myBtn.Background = Brushes.Green;
this.myBtn.Content = "OK";

قطعه کد بالا رو در constructor فرم مورد نظر قرار دادم. در این حالت، به محض اجرای برنامه، دکمه ای سبز رنگ که در آن عبارت OK نوشته شده، نشان داده خواهد شد.


نتیجه

:: در این مقاله تنها به بررسی چند مورد جزئی و معمول پرداختیم. بررسی یک کنترل ساده و تنظیم چند خصیصه ساده و اعمال یک رویداد آسان، تنها برای شناخت اولیه از این نوع پروژه ها و آغاز راه است. بررسی دقیق تر و بیشتر کنترل ها و خصایص مربوط به آنها در پروژه های WPF رو به خودتون واگذار میکنیم...
:: همونطور که حتما شما هم متوجه این مسئله شدید، مقاله فوق و مثال اون بسیار ساده و مبتدیانه بود. لازم به ذکره که ارائه این مقاله با این سطح در سایت، تنها به علت اولین مقاله بودن از این دسته (مقالات WPF) و به عبارت دیگه آغاز راه بودن، بوده و از این به بعد با توجه به خط مشی کلی و همیشگی سایت سی شارپ برای ارائه مقالاتی از حد متوسط به بالا و با فرض قرار دادن این مطلب که شما دوستان عزیز آشنایی هر چند مقدماتی با WPF ،XAML و ... رو دارا هستید، مقالات بعدی نیز از سطح علمی و آموزشی گسترده تر و بالاتری برخوردار خواهند بود...
:: به زودی زود، از طریق مقاله ای کاملاً جامع، تحت عنوان WPF چی، چرا و چگونه؟ به مقدماتی از این تکنولوژی، تاریخچه اون، نحوه اعمال و اجرا، پروژه های بزرگ موجود و ... به نکات ریز و درشت WPF خواهیم پرداخت و با اون بیش از پیش آشنا خواهیم شد...
:: پروژه مثال فوق رو میتونید از لینک دانلود، در بالای صفحه دانلود کنید... البته اگه تا الان ثبت نام نکردید، قبلش حتما این کار رو بکنید

موفق و موید باشید