آموزش برنامه نویسی تحت ویندوز با WPF

[shahrabiamir]

هو الحق

آموزش برنامه نویسی تحت ویندوز با تکنولوژی WPF و زبان برنامه نویسی #C


توی این تاپیک میخوام تکنولوژی WPF را با توجه به چیزایی که خودم بلدم به اونایی که قصد یادگیری برنامه نویسی ویندوز را دارن یاد بدم .

فقط شاید اموزشها را با تاخیر بذارم که در این مورد ازتون عذرخواهی میکنم.

قبل از آموزش میتونید در این لینک توضیحی مختصر درباره WPF و ویژگی های اون را مطالعه بفرمایید .

[shahrabiamir]

خب بدون هیچ مقدمه ای شروع میکنیم!

حالا که با wpf اشنا شدید میریم سراغ اولین پروژه wpf! نرم افزار ویژوال استودیو را دانلود و نصب کنید. بعد از نصب نرم افزار را باز کرده و از منوی file اپشن new project و سپس از سربرگ #C اپشن Windows و سپس Wpf Application را انتخاب و نامی برای پروژه تون بزارید. بعد از ایجاد پروژه به منوی view>solution explorer برید تا پنجره مربوط به محتویات پروژه نمایان بشه. توی این پنجره چندتا فایل دیده میشه که مهمترینهاش اینا هستن:

• App.config : تنظیمات مربوط به پیکربندی پروژه. شما در این قسمت میتونید خودتون تنظیمات سفارشی تعریف کنید.
• App.xaml : وقتی پروژه تون را اجرا میکنید ابتدا این فایل اجرا میشه. این فایل اولین فایل در اجرای برنامه هست. ما میتونیم برای ثبت ارورهای Stop Working در این فایل اقدام کنیم.

روی آیکن MainWindow که کلیک کنید پنجره برنامه تون نمایش داده میشه. توی wpf به پنجره میگیم Window در حالیکه توی Windows Form میگیم Form!
هر پنجره wpf از دو بخش تشکیل شده است :

• Xaml : کد ظاهر برنامه رو تشکیل میده و xml-based هست. زبان xaml که تلفظ آن بصورت زمل "zamel" هست برای طراحی ظاهر برنامه در wpf استفاده میشه و خیلی جالب هستش.
• فایل .cs : کد سی شارپ پنجره را تشکیل میده.

ابتدا میایم سراغ فایل زمل. کد فایل زمل در ابتدای ایجاد برنامه بصورت زیر هستش :

<Window x:Class="WpfApplication1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        
    </Grid>
</Window>

توی زمل هر تگی را که باز میکنید باید در انتها اونو ببندید. در این کد یه سری آدرس در ابتداش تعریف شده بهتره کاری به اونا نداشته باشید. اما میایم سراغ یکی از قسمتهای کاربردی کدمون. اون قسمتی که پررنگ کردم در واقع خصوصیات مربوط به پنجره هستش که یه سری از این خصوصیات رو بهتون معرفی میکنم:

• Width , MinWidth , MaxWidth : مربوط به عرض پنجره و هر کامپونت ویندوزی هستش و میتونیم حداقل عرض یا حداکثر عرض را در هنگام تغییر ارتفاع پنجره تعیین کنیم.
• Height , MinHeight , MaxHeight : این موارد هم مربوط به ارتفاع کامپونت هست. دقت کنید که واحد عرض و ارتفاع بصورت پیکسل هست و مثلا باید بصورت Width="200" تنظیم کنید. تمامی خصوصیات کامپونتها بدین صورت تنظیم میشوند.
• Title : عنوان پنجره را روی نوار عنوان مشخص میکنه.
• WindowStartupLocation : نحوه قرارگیری پنجره را روی صفحه مشخص میکنه که مثلا در مرکز صفحه (CenterScreen) یا در مرکز تگ پدر (CenterOwner) و یا بصورت دستی (Manual) توسط کاربر مشخص بشه.
• WindowState : حالت پنجره را مشخص میکنه : نرمال - ماکسیمم و یا مینیمم.
• WindowStyle : استایل پنجره. حالت تک و سه بعدی (SingleBorderWindow و ThreeDBorderWindow) - حالت جعبه ابزاری (ToolWindow) - بدون حالت (None)
• AllowTransparency : مربوط به شفافیت پنجره است که همراه با خصوصیت WindowStyle="None" برای تغییره پنجره استفاده میشه.

بهتره خودتون با این موارد کار کنید و اونا رو امتحان کنید. برای اجرای پروژه هم گزینه Start در نوار ابزار ویژوال استودیو یا از طریق منوی Debug/Start Debugging کلیک کنید.

توی جلسه بعد میخوایم یه پنجره متفاوت با پنجره های معمولی ویندوز بسازیم.

[shahrabiamir]

سلام. ازتون عذرخواهی میکنم برای اینکه خیلی دیر دارم آموزش میزارم. خب قرار بود که یه فرم متفاوت با فرمهای عادی ویندوز بسازیم. یه پروژه wpf ایجاد کنید. به پنجره solution explorer رفته و روی عنوان پروژه راست کلیک و یه پوشه بنام Image درست کنید و یه فایل png داخلش اضافه کنید. بعد کد فایل xamlتون را به صورت زیر تغییر بدید:

<Window x:Class="WpfApplication1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d" Background="Transparent" WindowStartupLocation="CenterScreen"
        Title="MainWindow" Height="350" Width="525" WindowStyle="None" AllowsTransparency="True">
    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="/Image/cloud.png"/>
        </Grid.Background>
        <Label Content="Welcome to WPF!" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        <Button Name="btnClose" Content="close" Width="50" Height="30" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,100"
                Click="btnClose_Click"/>
    </Grid>
</Window>

فایل pngای که من اضافه کردم اسمش cloud هستش. در کد بالا چند نکته هستش که عرض میکنم:

• Background = "Transparent" : باعث میشه که پس زمینه پنجره تون یا کنترل دیگه ای بدون رنگ یا شفاف بشه. برای نوع فرمی که میخوایم بسازیم باید این مورد را برای پنجره تعیین کنیم.
• در مورد پس زمینه grid که اومدیم براش imagebrush تعریف کردیم در واقع اگر بخواهیم یه پس زمینه خاصی مثل عکس در پنجره مون داشته باشیم باید به اون صورتی که در بالا نوشته شده عمل کنیم. در مورد grid توضیح خواهم داد.
• فکر نکنم درباره margin , verticalalignment , horizontalalignment توضیحی نیاز باشه واضح هستن که دارن چیکار میکنن. اما در مورد Margin در wpf نکته ای درباره فاصله از اطراف هست که بدین صورته : Margin = "left , top , right , bottom" که به ترتیب فاصله از چپ - بالا - راست و پایین را مشخص میکند.
• هر کنترلی طبیعتا رویدادهای مربوط به خودش را دارد از قبیل : Click , MouseOver , MouseLeave , TextChanged و غیره. کافیست اسم رویداد را ذکر کرده که در این مثال رویداد Click برای Buttonمون هستش و EventHandler آن در Code Behind سی شارپ ایجاد میشود. بصورت زیر:

using System.Windows;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }


        private void btnClose_Click(object sender, RoutedEventArgs e)
        {
            App.Current.Shutdown();
        }
    }
}

کد App.Current.Shutdown() باعث خروج برنامه میشود.
اگر برنامه را اجرا کنید با فرم کاملا متفاوت روبرو میشید. حالا اگه تونستید چنین فرمی را توی WindowsForms بزنید!

TransparencyWindow.PNG

[shahrabiamir]

برنامه جلسه قبل یه دست گرمی بود برای آشنایی مختصری با wpf! از این جلسه به بعد میخوایم روی کنترلهای wpf مانور بدیم!

توی wpf یه سری کنترل داریم به اسم container یعنی حامل. شما میتونید داخل حاملها کنترلهای دیگه رو قرار بدید تا مثلا یه کنترل کاربری جدید "User Control" بسازید یا مثلا کنترلهایی که در ارتباط با موضوع خاصی هستن مانند فرم ثبت نام را بسازید. الان در مثال قبلی همه کنترلهای ما که کم هم بودن در حامل قدرتمندی بودن بنام grid. در wpf تعدادی کنترل حامل وجود داره که معروفترین ها و پرکاربردترینهاشون را بهتون میگم:

• Grid : قدرتمندترین کنترل حامل در wpf. شما میتونید کنترلهای دیگه در این حامل قرار بدید و بکمک خصوصیاتی از قبیل شماره سطر - شماره ستون - مقادیر Margin اونها را در بهترین مکان در Grid قرار بدید و زمانیکه پنجره تون را resize میکنید میبینید که اصلا بهم نریخته است. شما بکمک Grid میتونید پنجره تون را سطربندی و ستون بندی کنید.

• StackPanel : زمانی اتفاق میفته که شما میخواهید تعداد بسیار زیادی از کنترلها زیر هم یا پشت سرهم بر روی پنجره قرار بدید. اگه تعداد زیاد باشه یا ندونید چندتا باشه Grid بدردتون نمیخوره. چون از Grid زمانی استفاده میکنیم که میخوایم پنجره را شبکه بندی کنیم. در اینجور موارد از حامل StackPanel استفاده میکنیم. این حامل یه خصوصیت مفید داره به اسم Orientation که تعیین میکنه آیا کنترلها را میخواید بصورت Horizontal یا Vertical قرار بدید.

• WrapPanel : عملکرد این حامل هم مثل StackPanel هست با این تفاوت که اگر سطر یا ستون جاری پر شود یه سطر یا ستون بعدی میرود. زمانی استفاده میشود که شما میخواید کنترلها را بصورت سطری یا ستونی پر کنید.

ان شاءالله در جلسه بعد مثالهای مربوط به کنترلهای بالا را خواهم گفت.

[shahrabiamir]

یه پروژه wpf ایجاد کنید و کد زیر را در فایل xaml کپی کنید:

<Window x:Class="WpfApplication1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d" ResizeMode="NoResize"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="0" Margin="10" Background="Red">
            <Button Content="button1" Width="100" Margin="0,20,0,0"/>
            <Button Content="button2" Width="100" Margin="0,20,0,0"/>
            <Button Content="button3" Width="100" Margin="0,20,0,0"/>
        </StackPanel>
        <WrapPanel Grid.Row="0" Grid.Column="1"  Margin="10" Background="Blue">
            <Button Content="button1" Width="100" Margin="0,20,0,0"/>
            <Button Content="button2" Width="100" Margin="0,20,0,0"/>
            <Button Content="button3" Width="100" Margin="0,20,0,0"/>
        </WrapPanel>
        <Label Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Content="area 3"/>
        <Label Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" Content="area 4"/>
    </Grid>
</Window>

توضیح:



- در کد بالا خصوصیت ResizeMode پنجره روی مقدار NoResize تنظیم شده که باعث میشه نتونید پنجره را تغییر سایز بدید!

- حامل Grid را به دو سطر و دو ستون تقسیم کردیم. تعریف سطرها باید در داخل تگ Grid.RowDefinitions و تعریف ستونها در داخل تگ Grid.ColumnDefinitions صورت بگیرد. برای اضافه کردن سطر و ستون هم از تگهای RowDefinition , ColumnDefinition استفاده کنید و میتونید برای سطر ارتفاع و برای ستون عرض تعریف کنید:

<RowDefinition Height="150"/>

<ColumnDefinition Width="200"/>

اگر مقدار ارتفاع برای سطر یا مقدار عرض برای ستون تعریف نگردد حامل به سطرهای با ارتفاع مساوی و ستونهای با عرض یکسان تقسیم میگردد.

- اگه میخواید کنترل خود را در سطر و ستون مشخصی قرار بدید از خصوصیات Grid.Row , Grid.Column استفاده کنید. مقدار پیشفرض برای هر دو صفر است.

اگر برنامه را اجرا کنید با پنجره زیر مواجه میشید:

img1.PNG

[shahrabiamir]

سلام. امروز میخوایم سراغ متداولترین کنترلهای ویندوزی بریم.

- Label : این کنترل برای نمایش متن استفاده میشه.

- Button : این کنترل برای انجام عمل خاصی استفاده میشه مثل نمایش پیغام یا باز کردن پنجره جدید

- TextBox : این کنترل برای دریافت ورودیها استفاده میشه. یکی از خصوصیات این کنترل TextAlignment هست که نحوه قرارگیری متن داخلش را مشخص میکنه که

شامل مقادیر Center , Left , Right , Justify هستش. خصوصیت دیگر آن TextWrapping هست که رفتار تکست باکس را زمانیکه متن به انتهای تکست باکس میرسه بررسی میکنه: اگه روی مقدار wrap تنظیم شده باشه که میره به خط بعدی. اگه روی nowrap تنظیم باشه که همون خط رو ادامه میده.

ضمن اینکه برای تغییر رنگ پس زمینه و تغییر رنگ متن کنترلهای ویندوزی به ترتیب از خصوصیات Foreground , Background استفاده کنید.

یه پروژه wpf ایجاد کرده و کد xaml , cs آنرا بصورت زیر تغییر بدید:

<Window x:Class="WpfApplication1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Label VerticalAlignment="Center" HorizontalAlignment="Left" Content="Enter your name : " Margin="100,0,0,0"/>
        <TextBox Name="txtName" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="210,0,0,0" Width="150" TextAlignment="Right"/>
        <Button VerticalAlignment="Top" HorizontalAlignment="Left" Margin="220,200,0,0" Width="100" Content="click me"
                Click="Button_Click"/>
    </Grid>
</Window>

behind code

using System.Windows;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            string name = txtName.Text.Trim();
            if (name.Length == 0)
            {
                MessageBox.Show("Please type your name!", "Error", MessageBoxButton.OK, MessageBoxImage.Error);
            }
            else
            {
                MessageBox.Show("Thanks for name!", "Error", MessageBoxButton.OK, MessageBoxImage.Information);
            }
        }
    }
}

کد xaml همه چیزش واضحه. میایم سراغ کد سی شارپ پنجره:

داخل رویداد کلیک دکمه اومدیم متن داخل تکست باکس را بکمک متد trim از هر دو طرف فضاهای خالیشو پاک کردیم چون ممکنه یوزر هم از ابتدا و هم از انتها در داخل تکست باکس کاراکتر space وارد کند و ما اینجوری فضاهای خالی را پاک میکنیم. یه کنترل ویندوزی دیگه ای که در کد هم ازش استفاده کردیم پنجره MessageBox هستش و یه متد به اسم Show داره که پیغام را نشون میده. متد Show حداقل یه پارامتر اونم برای نمایش پیغام میگیره. بقیه پارامترها بصورت زیر هستن:

- پارامتر دوم مربوط به عنوان پنجره پیغام هست.
- پارامتر سوم مربوط به نمایش دکمه یا دکمه های بر روی پنجره پیغام هست که بصورت پیشفرض مقدار MessageBoxButton.OK براش تنظیم شده.
- پارامتر چهارم مربوط به نمایش آیکن پیغام هست که دارای مقادیر مختلفی مانند هشدار (MessageBoxImage.Warning) - خطا (MessageBoxImage.Error) - اطلاعات (MessageBoxImage.Information) و سوال (MessageBoxImage.Question) هست.

[shahrabiamir]

سلام. امروز میایم سراغ کنترلهای TextBlock , RichTextBox.

- TextBlock : عملکردش همانند کنترل Label هست اما زمانی از اون استفاده میکنیم که متن طولانی باشه.

- RichTextBox : عملکرد این کنترل نیز همانند TextBox هست فقط برای متون چندخطی ازش استفاده میشه. البته خصوصیتی بنام Content یا Text نداره که شما بخواید خیلی راحت متن داخلش را بازیابی یا تغییر بدید. نحوه قرار دادن متن و خوندن اون از طریق کد سی شارپ توی مثال زیر اومده.

code xaml

<Window x:Class="WpfApplication1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="700">
    <Grid>
        <TextBlock Name="textBlock1" Text="Enter your text : " VerticalAlignment="Top" HorizontalAlignment="Left" Margin="100"/>
        <RichTextBox Name="richTextBox1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="200,100" Height="100" Width="200">
            <FlowDocument>
                <Paragraph>
                    This is a RichTextBox
                </Paragraph>
            </FlowDocument>
        </RichTextBox>
        <TextBlock Name="textBlock2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="430,100" Height="100" Width="200"/>
        <Button Name="button1" Width="100" Height="30" Content="click me!" VerticalAlignment="Top" Margin="0,220,0,0" Click="button1_Click"/>
    </Grid>
</Window>

- اگه بخواید در RichTextBox متنی را بکمک xaml قرار بدید ابتدا داخل اون یه تگ از نوع flowdocument و سپس داخل flowdocument یه تگ از نوع پاراگراف قرار میدید. هر چند میتونید چندین تگ پاراگراف قرار بدید. اما قرار دادن چندین تگ FlowDocument مجاز نیست.

code cs

using System.Windows;

using System.Windows.Documents;


namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }


        private void button1_Click(object sender, RoutedEventArgs e)
        {
            FlowDocument doc = richTextBox1.Document;
            TextRange tr = new TextRange(doc.ContentStart, doc.ContentEnd);
            textBlock2.Text = tr.Text;
        }
    }
}

نکته کد سی شارپ در داخل رویداد کلیک هست. برای خواندن متن داخل richtextbox wpf ابتدا باید به document داخل آن مراجعه کرده و سپس از ابتدای document تا انتهای آن را در داخل ابجکت TextRange قرار بدید. TextRange برای خواندن محدوده ای از متن استفاده میشه. بعد از اون هم متن داخل richtextbox را در textblock کپی کردیم.

[shahrabiamir]

سلام. امروز با کنترلهای لیستی ListBox , ComboBox آشنا میشیم.

- ListBox : این کنترل برای نمایش مجموعه ای از ایتمها در قالب یک لیست استفاده میشه.

- ComboBox : از این کنترل برای نمایش یک ایتم از مجموعه ایتمها استفاده میشه. این کنترل در asp.net بنام DropDownList هست.

code xaml

<Window x:Class="WpfApplication1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ComboBox Name="comboBox1" Width="100" Height="25" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="50,100,0,0">
            <ComboBoxItem>Windows 10</ComboBoxItem>
            <ComboBoxItem>Windows 8.1</ComboBoxItem>
            <ComboBoxItem>Windows 7</ComboBoxItem>
            <ComboBoxItem>Windows Vista</ComboBoxItem>
            <ComboBoxItem>Windows XP</ComboBoxItem>
        </ComboBox>
        <Button Name="button1" Content=">>>" Width="70" Height="25" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="190,100,0,0" Click="button1_Click"/>
        <ListBox Name="listBox1" Width="120" Height="100" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="300,100,0,0"/>
    </Grid>
</Window>

در کد بالا برای اضافه کردن ایتم در comboBox باید از comboBoxItem استفاده کنید. البته برای listBox هم میتونید از listBoxItem استفاده کنید.

code cs

using System.Windows;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            if (comboBox1.SelectedIndex != -1)
            {
                listBox1.Items.Add(comboBox1.SelectionBoxItem.ToString());
            }         
        }
    }
}

در کد سی شارپ برای کپی کردن از comboBox به listBox ابتدا بررسی کردیم که ایتمی از comboBox انتخاب شده یا نه که اگه انتخاب شده باشه اندیسش مخالف 1- هست در غیر اینصورت برابر 1- است. برای اضافه کردن به لیست باکس از متد Add استفاده شده یک پارامتر از هر نوعی میگیرد.

[shahrabiamir]

سلام خدمت دوستان. امروز میایم سراغ کنترلهای Border , Image.

- Border : یا حاشیه کنترلی برای ایجاد حاشیه در اطراف میباشد. این کنترل دارای دو خصوصیت مهم است : BorderThickness میزان ضخامت حاشیه را بر اساس پیکسل تعیین میکند و BorderBrush رنگ حاشیه را مشخص میکند. در داخل این کنترل فقط میتونید از یه کنترل استفاده کنید.

- Image : برای نمایش تصاویر استفاده میشود. طبیعتا هم باید بهش یه مسیر بدیم تا تصویر را نشون بده و اینکار رو از طریق خصوصیت Source انجام میدیم. تصویری که

ما توی این مثال بهش میدیم تو یه فولدری به اسم Image در روت پروژه مون هست.

code xaml

<Window x:Class="WpfApplication1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="700">
    <Grid>
        <Grid.Background>
            <LinearGradientBrush>
                <GradientStop Color="Yellow" Offset="0.4"/>
                <GradientStop Color="Green" Offset="0.6"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Border BorderBrush="Red" BorderThickness="10">
            <Image Source="/Image/18933_en_1.jpg" Width="200" Height="200"/>
        </Border>
    </Grid>
</Window>

خصوصیت BorderThickness میتونه به روشهای زیر مقدار بگیره که البته این موارد برای Margin , Padding برقرار هست:

- یه مقدار بگیره که در اینصورت به حاشیه های اطراف به یک اندازه اعمال میشه.
- دو مقدار میگیره که در اینصورت مقدار حاشیه چپ و راست برابر و مقدار حاشیه بالا و پایین با هم برابر میشن.
- چهار مقدار میگیره که به ترتیب به چپ - بالا - راست و پایین اعمال میشه.

در مثال بالا همونطور که گفتم پوشه تصاویر در روت پروژه قرار گرفته و برای مسیر دادن کافیست اسم پوشه و بعدش اسم عکس را بیارید.

وقتی پروژه را اجرا میکنید با یک پس زمینه دو رنگ روبرو میشید که صدردصد برای شما جذاب هستش. برای دو رنگ کردن یا حتی چندرنگ کردن پس زمینه بایستی از LinearGradientBrush استفاده کنید. این قلم مو رنگها را بصورت خطی و با استفاده از GradientBrush نشون میده. GradientBrush دو خصوصیت مهم داره:

- Color : رنگ را مشخص میکنه.

- Offset : میزان اختلاف رنگ را معلوم میکنه.

یه قلم موی رنگی دیگه توی WPf داریم که بصورت دایره ای عمل میکنه و اسمش RadialGradientBrush هست. استفاده از این نوع قلم مو همانند LinearGradientBrush میباشد.