# برنامه نویسی با محصولات مایکروسافت > برنامه نویسی مبتنی بر Microsoft .Net Framework > WPF >  دریافت Template برای کنترل های WPF

## SajjadKhati

*بسم الله الرحمن الرحیم*


سلام
این تاپیک را زدم تا هر کس Template و Style ای را برای کنترل های WPF خواست ارائه بده ، بتونه در این تاپیک ارائه بده .

Template و استایلِ کنترل ComboBox ساخته شد که در این پست ضمیمه میکنم تا هر کس خواست دانلود و استفاده کنه .
برای استفاده ، کدها را در بخش Resource (مثلا Resouce مربوط به App.Xaml یا Windows) قرار بدید .
ظاهر کمبوباکس ، از کمبوباکسِ نرم افزار PowerDVD و نرم افزار After Effects (بخش Preference شون) ، الهام گرفته شد .

تصاویر :

Combobox 1.PNG Combobox 2.PNG

تنظیمات پروپرتی (هایی که نسبت به کمبوباکس پیش فرض wpf ، تغییر ماهیت دادند) :

1) پروپرتیِ Background ، بِراشِ پشت زمینه ی (پیش فرضِ) بخش بالای (هدر یا در واقع بخش ToggleButton) مربوط به کمبوباکس را مشخص میکنه .
2) پروپرتیِ BorderBrush ، بِراشِ (پیش فرضِ) بخش حاشیه ی کمبوباکس (شامل حاشیه ی بخش ToggleButton یا همون بخش بالا و همچنین حاشیه ی بخش Popup یا همون بخش پایین کمبوباکس) و همچنین فِلِش (موجود در بخش ToggleButton) را مشخص میکنه .
3) پروپرتیِ Forground ، بِراشِ محتوای کمبوباکس را مشخص میکنه .
4) پروپرتیِ MaxDropDownHeight ، ارتفاع بخشِ Popup مربوط به کمبوباکس (بخش زیرین) را مشخص میکنه .


نمونه مثال :


<ComboBox x:Name="comb_2" Width="170" Height="22" SelectedIndex="0" HorizontalAlignment="Left" Margin="20,20,0,0" VerticalAlignment="Top" FlowDirection="RightToLeft">
            <System:String>گزینه ی شماره 1</System:String>
            <System:String>گزینه ی شماره 2</System:String>
            <System:String>گزینه ی شماره 3</System:String>
            <System:String>گزینه ی شماره 4</System:String>
            <System:String>گزینه ی شماره 5</System:String>
            <System:String>گزینه ی شماره 6</System:String>
            <System:String>گزینه ی شماره 7</System:String>
        </ComboBox>



نکته : با استفاده از این تمپلیت ، ScrollBar هایی هم که در نرم افزارهاتون استفاده میکنین ، به همین شکل ای که در کد تعریف شد ، تغییر شکل میدن . مگر اینکه برای Style ای که برای ScrollBar تعریف شد ، کلید مشخصی را تعیین کنید (و در اون صورت ، اگه این تمپلیتِ ScrollBar را برای کمبوباکس میخواین استفاده کنین ، باید در تمپلیت ای که برای ScrollViewer مربوط به popup ، تعریف میکنید ، ازش استفاده کنید) .

*** تمپلیت کنترل ComboBox ، در تاریخ 99.10.3 ، به روزرسانی شد .
چند تا از مشکلات کوچیکی که قبلا داشت (قابلیت تنظیم Padding و BorderThickness و ...) ، رفع شد . با تنظیم پروپرتیِ Left (نه هر پروپرتیِ دیگه) از پروپرتیِ BorderThickness مربوط به ComboBox ، ضخامت کل حاشیه ی کمبوباکس را میشه تعیین کرد .



**** به نیت حضرت ولی عصر (عج) و برای اموات خودمون و خودتون ، یه فاتحه بگیرین ، ممنون میشم .*

**** با تشکر ویژه از استادم (The King) که کمک بسیار زیادی بهم کردن* .

----------


## MMRavari

با سپاس از لطف شما
اگر محبت کنی و اطلاعاتی در مورد دستوراتی که در برنامه مینویسی بصورت ضمیمه باشه ممنون خواهم بود
تا آموزشی باشه برای یا گیری

----------


## SajjadKhati

> با سپاس از لطف شما
> اگر محبت کنی و اطلاعاتی در مورد دستوراتی که در برنامه مینویسی بصورت ضمیمه باشه ممنون خواهم بود
> تا آموزشی باشه برای یا گیری


سلام
کدهای اصلی تمپلیت ، در سایت مایکروسافت با آموزش هست .
آموزش فارسی wpf هم در اینترنت هست (البته برای ساخت از این جور کنترل های شخصی ، باید دنبال آموزش template در wpf بگردید) .
البته ساخت تمپلیت ، کار چندانی هم نداره .
ان شاء ا... قراره در آینده آموزش wpf (همراه با آموزش template و ...) اش را داده بشه (البته آموزشش فروشی هست) . ان شاء ا... تو هفته های اخیر ، قسمت اولش درست میشه اما تا به قضیه ی ساخت template رسیده بشه ، خیلی طول میکشه.

----------


## MMRavari

ممنون
کتاب زیاد هست اما در رابطه با ساخت Template
همه بصورت سطحی آموزش دادن
و در خصوص نحوه تعیین خصوصیت خاص یا اجرای دستورات چیز زیادی نگفتن
باز هم ممنون

----------


## SajjadKhati

> ممنون
> کتاب زیاد هست اما در رابطه با ساخت Template
> همه بصورت سطحی آموزش دادن
> و در خصوص نحوه تعیین خصوصیت خاص یا اجرای دستورات چیز زیادی نگفتن
> باز هم ممنون


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

----------


## SajjadKhati

*بسم الله الرحمن الرحیم*


Template و استایل TabControl هم ساخته شد که در این پست ضمیمه میکنم تا هر کس خواست دانلود و استفاده کنه .برای استفاده ، کدها را در بخش Resource (مثلا Resouce مربوط به App.Xaml یا Windows) قرار بدید .
ظاهر کنترل ، از TabControl نرم افزار After Effects 2019 (صفحه ی Preference) ، الهام گرفته شد .

تصاویر :

TabControl 1.PNG

TabControl 2.PNG

تنظیمات پروپرتی های TabControl (که نسبت به TabControl پیش فرض wpf ، تغییر ماهیت دادند) :

1) پروپرتی Background ، بِراشِ پشت زمینه ی قسمت TabPanel را مشخص میکنه (تاریک ترین رنگِ سیاه که در تصویر بالا ، در سمت راست ، قابل مشاهده هست) .

2) پروپرتی BorderBrush ، بِراشِ Border ای که TabPanel را احاطه میکنه را مشخص میکنه .

3) پروپرتی Foreground ، بِراشِ Border ای که TabPanel را احاطه میکنه ، در زمانی که کیبرد فوکوس روی TabPanel باشه را مشخص میکنه .

4) پروپرتی BorderThickness ، ضخامتِ Border ای که TabPanel را احاطه میکنه را مشخص میکنه .


تنظیمات پروپرتی های TabItem (که نسبت به TabItem پیش فرض wpf ، تغییر ماهیت دادند) :

1) پروپرتی Background ، بِراشِ پشت زمینه ی اون Header مربوط به TabItem را مشخص میکنه .

2) پروپرتی BorderBrush ، بِراشِ Border ای که اون Header مربوط به TabItem را احاطه میکنه و فقط زمانی که اون TabItem در حالت انتخاب بوده باشه را مشخص میکنه (Border با رنگ آبی در تصویر بالا که دور Header مربوط به TabItem ها را احاطه کرده) .

3) پروپرتیِ Foreground ، بِراشِ Header مربوط به TabItem را مشخص میکنه .

4) پروپرتیِ BorderThickness ، ضخامتِ بِراشِ Border ای که اون Header مربوط به TabItem را احاطه میکنه و فقط زمانی که اون TabItem در حالت انتخاب بوده باشه را مشخص میکنه (ضخامتِ Border با رنگ آبی در تصویر بالا که دور Header مربوط به TabItem ها را احاطه کرده) .
نمونه مثال :


        <TabControl HorizontalAlignment="Left" Height="300" Margin="408,400,0,0" VerticalAlignment="Top" Width="500">
            <TabItem Header="سربرگ 1">
                <Grid Background="Transparent">
                    <Button Content="دکمه 1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75"/>
                    <Button Content="دکمه 2" HorizontalAlignment="Left" Margin="10,50,0,0" VerticalAlignment="Top" Width="75"/>
                    <ComboBox SelectedIndex="0" HorizontalAlignment="Left" Margin="150,100,0,0" VerticalAlignment="Top" Width="145" FlowDirection="RightToLeft">
                        <System:String>آیتم 1</System:String>
                        <System:String>آیتم 2</System:String>
                        <System:String>آیتم 3</System:String>
                    </ComboBox>
                    <ListBox HorizontalAlignment="Left" Height="125" Margin="97,140,0,0" VerticalAlignment="Top" Width="245" FlowDirection="RightToLeft">
                        <System:String>آیتم 1</System:String>
                        <System:String>آیتم 2</System:String>
                        <System:String>آیتم 3</System:String>
                    </ListBox>
                    <CheckBox Content="چک باکس" HorizontalAlignment="Left" Margin="350,10,0,0" VerticalAlignment="Top" Foreground="White" FlowDirection="RightToLeft"/>
                </Grid>
            </TabItem>
            <TabItem Header="سربرگ 2">
                <Border BorderThickness="1" BorderBrush="#FFB0B0B0" Background="Transparent">
                    <Grid Background="Transparent">
                        <ListBox HorizontalAlignment="Center" Height="125"  VerticalAlignment="Center" Width="245" FlowDirection="RightToLeft">
                            <System:String>آیتم 1</System:String>
                            <System:String>آیتم 2</System:String>
                            <System:String>آیتم 3</System:String>
                        </ListBox>
                    </Grid>
                </Border>
            </TabItem>
        </TabControl>



- بخش محتوای TabItem ، کاملا Transparent هست (و هیچ Border یا پشت زمینه ای در اون بخش قرار نداره) تا کاربر هر جور مایل بود این بخش را با میل خودش طراحی کنه .
- نکته ای که درباره ی ScrollBar در پست اول گفته شد ، برای این کنترل هم صدق میکنه .
- این تمپلیت ها ، بیشتر برای نرم افزارهایی که از پوسته های تاریک استفاده میکنن ، طراحی شد . بنابراین موقع استفاده ، سعی کنید بقیه ی کنترل هاتون ، پوسته ی تاریک داشته باشن .




*** به نیت حضرت ولی عصر (عج) و برای اموات خودمون و خودتون ، یه فاتحه بگیرین ، ممنون میشم .

*** با تشکر ویژه از استادم (The King) که کمک بسیار زیادی بهم کردن .

----------


## SajjadKhati

*بسم الله الرحمن الرحیم*


همونطور که میدونید ، WPF ، کنترل NumericUpDown نداره .روش های مختلفی برای استفاده از این کنترل در WPF از جمله استفاده از کنترل NumericUpDown مربوط به WinForm (که مشکلش اینه که نمیشه براش تمپلیت درست کرد و ظاهری ساده داره) و همچنین استفاده از کمپوننت های شرکت های بزرگ مثل Telerik و ... که مشکل اغلب اینها اینه که فایل های کتابخونه ی حجیمی دارند (حدود 10 مگابایت یا بیشتر) که باعث میشه حجم خروجی نرم افزارتون ، زیاد بشه .

راه سومی که پیدا کردم ، استفاده از کمپوننت های Extended.Wpf.Toolkit هست (که شامل بیش از 40 کنترل هست و میتونید برای کنترل UpDown ، از کنترلی بنام DoubleUpDown که در این کمپوننت هست ، استفاده کنید) که در نسخه ی 4.0.1 اش ، حجم حدود 2 مگابایت داره (که بسیار کمتر از کمپوننت های شرکت های بزرگ هستن) . برای دانلود این کمپوننت (نسخه ی 4.0.1) ، میتونید در nuget از دستور :


Install-Package Extended.Wpf.Toolkit -Version 4.0.1


که در لینک زیر در دسترس هست :

https://www.nuget.org/packages/Extended.Wpf.Toolkit/

و همچنین اسناد مربوطه اش از لینک زیر در دسترس هست :

https://github.com/xceedsoftware/wpftoolkit

اقدام کنید .


---------------------------------------------------------------


حالا برای این کنترل DoubleUpDown (در کمپوننت Extended.Wpf.Toolkit) ، یه Template و استایل ای آماده شد که در این پست ضمیمه میکنم اما قبل از استفاده از این تمپلیت ، در هر فایل xaml و Resource ای که این کد را در اونجا قرار میدید ، فضای نام های زیر را هم در اون xaml ، قرار بدید (علاوه بر این ، لازمه فضای نام اول را که نامش ToolKit هست را در فایل xaml ویندوز اصلی تون هم قرار بدید) :


        xmlns:ToolKit ="http://schemas.xceed.com/wpf/xaml/toolkit"
        xmlns:ToolKitThemes="clr-namespace:Xceed.Wpf.Toolkit.Themes;assembly=Xceed.  Wpf.Toolkit" 



تصاویر :


DoubleUpDown.PNG


تنظیمات پروپرتی (هایی که نسبت به DoubleUpDown پیش فرض wpf ، تغییر ماهیت دادند) :

1) پروپرتی Background ، بِراشِ کل پشت زمینه (شامل پشت فِلِش ها) را مشخص میکنه (رنگ سیاه در تصویر بالا . البته نه رنگِ سیاهی که بیرون از محوطه ی کنترل هست) .

2) پروپرتی Foreground ، بِراشِ بخش متن TextBox (متن "10" در تصویر بالا) و همچنین بِراشِ فِلِش ها را مشخص میکنه .

نکته : برای تنظیم دقیق تر شکل فِلِش ها در این کنترل ، اکیدا پیشنهاد میکنم که هم Width و هم Height مربوط به این کنترل (DoubleUpDown) را عدد فرد انتخاب کنید .


مثال (قبل از استفاده از این مثال ، در هر فایل xaml ای که از کد مثال زیر استفاده میکنید ، فضای نام ToolKit که در بالا داده شد را در همون صفحه ، کپی کنید) :


        <ToolKit:DoubleUpDown VerticalAlignment="Top" Value="10" Margin="20,20,0,0" Width="81" Height="31" HorizontalAlignment="Left"/>
        




**** به نیت حضرت ولی عصر (عج) و برای اموات خودمون و خودتون ، یه فاتحه بگیرین ، ممنون میشم .

*** با تشکر ویژه از استادم (The King) که کمک بسیار زیادی بهم کردن .*

----------


## SajjadKhati

*بسم الله الرحمن الرحیم*


Template مربوط به ListBoxItem را میتونید از فایلی که در این پست پیوست میشه را دانلود کنید (دقت کنید که تمپلیتِ ListBox نیست و فقط تمپلیتِ ListBoxItem به همراه تمپلیتِ اسکرول بار هست . چون ListBox پیش فرض WPF، ظاهر خوبی داره و به نظرم نیاز به تغییر چندانی نداره) .


تصاویر :


Dark ListBox.PNG


نکته ی خاصی نداره (مگر درباره ی اسکرول بار که در پست اول هم گفته شد) .
مثال :


        <ListBox x:Name="listBox1" FlowDirection="RightToLeft" VerticalAlignment="Top" Margin="10,10,0,0"  Height="250" Width="250" Background="#FF464646" BorderBrush="White" Foreground="White" HorizontalAlignment="Left" BorderThickness="1">
            <System:String>گزینه شماره 1</System:String>
            <System:String>گزینه شماره 2</System:String>
            <System:String>گزینه شماره 3</System:String>
            <System:String>گزینه شماره 4</System:String>
            <System:String>گزینه شماره 5</System:String>
            <System:String>گزینه شماره 6</System:String>
            <System:String>گزینه شماره 7</System:String>
            <System:String>گزینه شماره 8</System:String>
            <System:String>گزینه شماره 9</System:String>
            <System:String>گزینه شماره 10</System:String>
            <System:String>گزینه شماره 11</System:String>
            <System:String>گزینه شماره 12</System:String>
            <System:String>گزینه شماره 13</System:String>
            <System:String>گزینه شماره 14</System:String>
            <System:String>گزینه شماره 15</System:String>
            <System:String>گزینه شماره 16</System:String>
            <System:String>گزینه شماره 17</System:String>
            <System:String>گزینه شماره 18</System:String>
            <System:String>گزینه شماره 19</System:String>
            <System:String>گزینه شماره 20</System:String>
        </ListBox>


**** به نیت حضرت ولی عصر (عج) و برای اموات خودمون و خودتون ، یه فاتحه بگیرین ، ممنون میشم .

*** با تشکر ویژه از استادم (The King) که کمک بسیار زیادی بهم کردن .*

----------


## MMRavari

ممنون دوست خوب
میتونم خواهش کنم در رابطه با پنجره ها هم 
Templateقرار بدین ممنون

----------


## SajjadKhati

> ممنون دوست خوب
> میتونم خواهش کنم در رابطه با پنجره ها هم 
> Templateقرار بدین ممنون


سلام
پنجره ی اصلی منظورتونه؟
اگه آره ، تمپلیت خاصی بصورت عمومی نیاز نداره . 
مثلا انحنای دور Windows منظورتونه؟
یه عکسی از Windows ای که مد نظرتونه را بذارید تا متوجه ی منظورتون بشم .


تمپلیت ویندوز در لینک زیر هست که میتونین ویرایشش کنید :
https://docs.microsoft.com/en-us/dot...orkdesktop-4.8

----------


## SajjadKhati

*بسم الله الرحمن الرحیم*


Template و استایل مربوط به CheckBox را میتونید از فایلی که در این پست پیوست میشه ، دانلود کنید .
برای استفاده ، کدها را در بخش Resource (مثلا Resouce مربوط به App.Xaml یا Windows) قرار بدید .این استایل ، از کنترل چک باکسِ نرم افزار PowerDVD الهام گرفته شد .


تصاویر :


PowerDVD CheckBox.PNG


تنظیمات پروپرتی (هایی که نسبت به استایل کنترل پیش فرض wpf ، تغییر ماهیت دادند) :

1) پروپرتی Background ، بِراش پشت زمینه ی کل چک باکس را مشخص میکنه (رنگ سیاه در تصویر بالا)

2) پروپرتی BorderBrush ، بِراش شکل مربع و شکل هایی که داخلش رسم میشن (شکل تیک در تصویر بالا) را مشخص میکنه .

3) پروپرتی Foreground ، بِراش متن نوشته شده در چک باکس را تعیین میکنه .


مثال :


<CheckBox Content="چک باکس" HorizontalAlignment="Left" Margin="40,40,0,0" VerticalAlignment="Top" FlowDirection="RightToLeft" IsChecked="True"/>



**** به نیت حضرت ولی عصر (عج) و برای اموات خودمون و خودتون ، یه فاتحه بگیرین ، ممنون میشم .

*** با تشکر ویژه از استادم (The King) که کمک بسیار زیادی بهم کردن .*

----------


## SajjadKhati

*بسم الله الرحمن الرحیم*

Template و استایل مربوط به RadioButton را میتونید از فایلی که در این پست پیوست میشه ، دانلود کنید .
برای استفاده ، کدها را در بخش Resource (مثلا Resouce مربوط به App.Xaml یا Windows) قرار بدید .
این استایل ، از کنترل چک باکسِ نرم افزار PowerDVD الهام گرفته شد .


تصاویر :

PowerDVD RadioButton.PNG


تنظیمات پروپرتی ها (یی از RadioButton که نسبت به استایل کنترل پیش فرض wpf ، تغییر ماهیت دادند) ، دقیقا مثل کنترل CheckBox (که در پست قبلی توضیح داده شد) ، هست .


مثال :



<RadioButton Content="دکمه ریدیو" HorizontalAlignment="Left" Margin="40,40,0,0" VerticalAlignment="Top" FlowDirection="RightToLeft" IsChecked="True"/>



**** به نیت حضرت ولی عصر (عج) و برای اموات خودمون و خودتون ، یه فاتحه بگیرین ، ممنون میشم .

*** با تشکر ویژه از استادم (The King) که کمک بسیار زیادی بهم کردن .*

----------


## SajjadKhati

*بسم الله الرحمن الرحیم*

تمپلیت هایی که در این پست طراحی  شدن را در 2 استایل (Theme) تاریک و روشن در این پست قرار داده میشه که با نام فایل Dark & Light Style With 6 Control Template که در این پست پیوست میشه ، میتونین دریافت کنین .
علاوه بر این 6 کنترل ، استایل ها شامل 2 کنترل TextBox و Progress Bar هم هستن اما این دو کنترل ، بدون تمپلیت هستن و فقط استایلِ خالی براشون در نظر گرفته شد.

** نکته :* دقت کنید که در این استایل ، از کنترل DoubleUpDown در کمپوننت Extended.Wpf.Toolkit استفاده شده . بنابراین با پیوست کردن این فایل های xaml در پروژه ای که این کمپوننت را نداره ، ارور میده . یا از این کمپوننت استفاده کنید یا برای استفاده نکردن از این کمپوننت ، فضای نام ها و استایل و تمپلیت های مربوط بهش را در این فایل های xaml ، حذف کنید .


تصاویر :


Dark Style.PNG


Light Style.PNG


-------------------------------------------------------------


*روش استفاده :*

برای استفاده از این استایل ها ، ابتدا اون دو فایل xaml که در فایل نام برده شده در پیوست این پست هست (فایل های TemplateResource.xaml و StyleResource.xaml) را به پروژه تون (با راست کلیک در پروژه تون و انتخاب گزینه ی Add>Existing Item) اضافه کنید .

بعد کد زیر را در قسمت Application.Resources در App.Xaml قرار بدید (برای الحاق فایل StyleResource.xaml) :


<ResourceDictionary>
            
            <ResourceDictionary.MergedDictionaries>


                <ResourceDictionary Source="StyleResource.xaml"/>


            </ResourceDictionary.MergedDictionaries>


        </ResourceDictionary>


این فایل (فایل استایل پیوست شده) ، شامل 2 استایل با نام DarkStyle و LightStyle هست .
هر کدوم از این استایل ها را بصورت پیش فرض ترجیح دادید ، نام اش را برای پروپرتیِ Style ویندوز اصلی ، ست کنید :


Style="{StaticResource DarkStyle}"


پروپرتیِ Style در کد بالا ، مربوط به پروپرتیِ Window (پنجره ی اصلی wpf) هست .
برای تغییر استایل در زمان اجرا ، Style مربوط به Window را به یکی از اون دو استایل ، تغییر بدید :


this.Style = (Style)Application.Current.Resources["LightStyle"];


بجای مقدار LightStyle در کد بالا ، در صورت نیاز به استایل تاریک ، از DarkStyle هم میتونین استفاده کنین .

ضمنا ناگفته مشخص هست که وقتی استایل تاریک را بکار بردید ، پشت زمینه ی کنترل زمینه تون (مثلا پشت زمینه Grid اصلی) ، اکیدا توصیه میشه که تاریک باشه (بهترین حالت برای این DarkStyle ، رنگ R=45 ;G=45; B=45 هست) و وقتی هم که از استایل روشن استفاده میکنید ، پشت زمینه ی کنترل اصلی تون ، توصیه میشه که رنگ روشن باشه (بهترین حالت برای این DarkStyle ، رنگ R=210 ;G=210; B=210 هست) .


-------------------------------------------------------------


پروژه ای را در این رابطه میخواستم پیوست کنم که حجمش 2 مگابایت بود اما سقف پیوست فایل ، زیر 500 کیلوبایت در این انجمن هست (این پروژه را در انجمن دیگه پیوست کردم) .

*نکته :* اگه کد استایل یا تمپلیت دیگه ای را میخواین بهش اضافه کنید ، توصیه میشه در قسمت آخر کدها اضافه کنید (در خط آخرِ بخش مربوطه) .


**** به نیت حضرت ولی عصر (عج) و برای اموات خودمون و خودتون ، یه فاتحه بگیرین ، ممنون میشم .

*** با تشکر ویژه از استادم (The King) که کمک بسیار زیادی بهم کردن .*

----------


## MMRavari

قراردادن عکس درون تکست باکس
برای قراردادن عکس درون تکس باکس از دستور زیر استفاده کردم


> <TextBox.Background>
>                 <ImageBrush ImageSource="Image Source"/>
>             </TextBox.Background>


و برای حذف اون هم دستور زیر



> if (MyTextBox.Text != "")
>                 MyTextBox.Background = null;


میخواستم بدونم اگر بخوا اینکار رو در ResourceDictionery انجام بدم چطوری ممکنه
مرسی

----------


## SajjadKhati

> قراردادن عکس درون تکست باکس
> برای قراردادن عکس درون تکس باکس از دستور زیر استفاده کردمو برای حذف اون هم دستور زیر
> میخواستم بدونم اگر بخوا اینکار رو در ResourceDictionery انجام بدم چطوری ممکنه
> مرسی


سلام
برای سئوال تون ، یه تاپیک بزنید .
سئوال های غیر مرتبط را در اون تاپیک مطرح نکنید ، ممنون میشم .
تشکر .

----------


## SajjadKhati

*بسم الله الرحمن الرحیم*


یه کنترلی بنام ShapeTextButton که از نوع Button هست ، طراحی شد که توسط تمپلیت ای که براش طراحی شد ، قابلیت تعریف شکل برای 4 حالتِ عادی ، رویداد MouseEnter ، رویداد MouseClick و زمانی که کنترل غیر فعال بشه (توسط برنامه نویس) را داره .

** دقت کنید که این کلاس ، مستقلا درون خودش ، چیزی رسم نمیکنه و باید با تمپلیت ای که براش نوشته شد ، استفاده بشه تا رسم مورد نظر ، انجام بشه .
** این کلاس ، به همراه بقیه ی چیزهای مربوطه و به همراه تمپلیت و استایل های مربوطه را میتونید از فایل پیوستی در این پست ، دانلود کنید .


تصاویر :

ShapeTextButton 3.PNG

ShapeTextButton 4.PNG

ShapeTextButton 5.PNG



*تنظیمات پروپرتی ها :*

1) پروپرتی هایی که با نامِ ButtonShape ختم میشن ، پروپرتی هایی از نوع System.Windows.Shapes.Path هستن که شکلِ کنترل را در یکی از اون 4 حالت (که در خط بالا توضیح داده شد) ، مشخص میکنند :

الف) پروپرتی DefaultButtonShape  :  شکل پیش فرض را مشخص میکنه . مقداردهی این پروپرتی ، برای رسم شکل اولیه ، الزامی هست .

ب) پروپرتی MouseEnterButtonShape  :  شکل ، برای زمانی که موسِ کاربر ، روی این کنترل قرار میگیره را مشخص میکنه .

ج) پروپرتی MouseDownButtonShape  :  شکل ، برای زمانی که کاربر روی این کنترل کلیک کرد را مشخص میکنه .

د) پروپرتی ControlDisabledButtonShape  :  شکل ، برای زمانی که کنترل غیر فعال شد را مشخص میکنه .


2) پروپرتی هایی که با نام ContentBrush ختم میشن ، پروپرتی هایی از نوع System.Windows.Media.Brush هستن که بِراش و قلم مو ، در صورتی که پروپرتیِ Content (این پروپرتی ، باید مقدار String داده بشه که در قسمت "نکته ها" ، در زیر ، توضیح داده شد) مقداردهی شده باشه را در حالت ها و رویدادهای مختلف ، مشخص میکنند :

الف) پروپرتی MouseEnterContentBrush  :  بِراش و قلمو ی Content برای زمانی که موس کاربر ، روی این کنترل قرار میگیره را مشخص میکنه .

ب) پروپرتی MouseDownContentBrush  :  بِراش و قلمو ی Content برای زمانی که کاربر روی این کنترل کلیک کرد را مشخص میکنه .

ج) پروپرتی ControlDisabledContentBrush  :  بِراش و قلمو ی Content برای زمانی که این کنترل غیر فعال شد را مشخص میکنه .


3) پروپرتی GetContentBrush_ForWhichButtonShapeProperty  :  که از نوع اینامِ ButtonShapeProperty هست (این enum ، ساخته شده و درون فایل پیوستی در پست زیر قرار داره) ، مشخص میکنه که اگه کاربر قصد داره از Brush ها و قلم موهایی که برای تعیین متن استفاده میشه ، از همین قلم موها هم برای کدوم یک از پروپرتی های مربوط به ButtonShape (که از نوع Path بودند) ، استفاده بشه یا استفاده نشه (مقدار ButtonShapeProperty.None) تا با تعیین این پروپرتی ، نیازی نباشه که از قلم موهایی که در پروپرتی های ButtonShape تعیین میشه ، استفاده بشه 

تا به این ترتیب ، کار برای Style دهی برای تعیین قلم موها برای پروپرتی های ButtonShape ، آسون تر بشه و هم اینکه قلم موهای Content و ButtonShape (در صورت نیاز و تمایل) ، از یک قلم مو استفاده کنند .




*طریقه ی استفاده :*

اول ، فایل های مربوطه که در این پست پیوست شده را به پروژه اضافه کنید (فایل های ShapeTextButton.cs و ButtonShapeProperty.cs و ShapeTextButtonStyle.xaml و ShapeTextButtonTemplate.xaml را به پروژه اضافه کنید) .

فضای نام زیر را به پروژه اضافه کنید :

xmlns:CustomControls ="clr-namespace:PoshtibangirTolo.Elements.CustomControls  "

کد زیر را (برای الحاق فایل های تمپلیت و استایل) درون Application.Resources اضافه کنید :

        <ResourceDictionary>            <ResourceDictionary.MergedDictionaries>                <ResourceDictionary Source="ShapeTextButtonTemplate.xaml"/>                <ResourceDictionary Source="ShapeTextButtonStyle.xaml"/>            </ResourceDictionary.MergedDictionaries>        </ResourceDictionary>

مثال :

<CustomControls:ShapeTextButton x:Name="CloseButton" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10" Width="24" Height="24"                GetContentBrush_ForWhichButtonShapeProperty="Strok  e"                DefaultButtonShape="{DynamicResource CloseShape}"                MouseEnterButtonShape="{DynamicResource CloseShape}"                MouseDownButtonShape="{DynamicResource CloseShape}"                ControlDisabledButtonShape="{DynamicResource CloseShape}">
            <CustomControls:ShapeTextButton.Resources>                <Path x:Key="CloseShape" Data="M2,2  L22,22  M22,2  L2,22" StrokeThickness="3" StrokeStartLineCap="Triangle" StrokeEndLineCap="Triangle"/>            </CustomControls:ShapeTextButton.Resources>        </CustomControls:ShapeTextButton>




*نکته ها :*

1) موقع نوشتن این تمپلیت برای این کنترل ، فرض فقط بر این گذاشته شد که کاربر ، نوع پروپرتیِ Content را اگه قرار هست که مقداردهی کنه ، فقط از نوع String مقداردهی کنه (تا مجددا پروپرتی ای مجزا برای متن برای این کلاس در نظر گرفته نشه) .پس حتما دقت کنید که برای این کنترلِ ShapeTextButton ، اگه پروپرتیِ Content را میخواید مقداردهی کنید ، مقدارش را فقط از نوع String مشخص کنید .

2) دقت کنید که با قرار دادنِ مقدار ButtonShapeProperty.None برای پروپرتیِ GetContentBrush_ForWhichButtonShapeProperty (که بصورت پیش فرض هم همین مقدار را داره) ، باید بصورت جداگانه ، برای هر کدوم از پروپرتی هایی که با نام ButtonShape ختم میشن ، مقدار پروپرتی Fill یا Stroke (یا هر دو) را حتما تعیین کنید .

و برعکس ، اگه مقداری بجز ButtonShapeProperty.None را برای اون پروپرتی مشخص کنید ، پروپرتی Fill یا Stroke (یا هر دو که بسته به نوع انتخاب مقدار پروپرتی GetContentBrush_ForWhichButtonShapeProperty داره) را اگه برای پروپرتی هایی که با نام ButtonShape ختم میشن ، مقداردهی کنید ، چون از مقادیر و قلم موهایی که برای پروپرتی هایی که با نام ContentBrush ختم میشن ، استفاده میشه ، پس تعیین مقدارشون ، هیچ تاثیری نخواهد داشت .

3) بصورت پیش فرض ، پروپرتیِ Focusable ئه این کنترل ، غیر فعال هست که برای فوکوس کردن روی این کنترل ، باید فعال اش کنید .
همچنین علاوه بر فعال کردن پروپرتیِ Focusable ، برای اینکه زمانی که روی کنترل فوکوس میشه ، تغییر شکل کنترل دیده بشه (و به اون شکل ، تغییر کنه) ، باید پروپرتیِ MouseEnterButtonShape را هم مقداردهی کنید .




**** به نیت حضرت ولی عصر (عج) و برای اموات خودمون و خودتون ، یه فاتحه بگیرین ، ممنون میشم .

*** با تشکر ویژه از استادم (The King) که کمک بسیار زیادی بهم کردن .*

----------


## SajjadKhati

> *بسم الله الرحمن الرحیم*
> 
> تمپلیت هایی که در این پست طراحی  شدن را در 2 استایل (Theme) تاریک و روشن در این پست قرار داده میشه که با نام فایل Dark & Light Style With 6 Control Template که در این پست پیوست میشه ، میتونین دریافت کنین .
> علاوه بر این 6 کنترل ، استایل ها شامل 2 کنترل TextBox و Progress Bar هم هستن اما این دو کنترل ، بدون تمپلیت هستن و فقط استایلِ خالی براشون در نظر گرفته شد.
> 
> 
> تصاویر :
> 
> 
> ...


*
بسم الله الرحمن الرحیم*


یه کم تغییراتی در این استایل و تمپلیت ها بوجود اومدن و یه کم استایل و تمپلیت کنترل های دیگه (مثل ShapeTextButton و ...) به مجموعه اضافه شدن که مجددا در این پست پیوست میکنم .


کد زیر را در قسمت Application.Resources در App.Xaml قرار بدید :


        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Style_Template\TemplateResource.xaml"/>
                <ResourceDictionary Source="Style_Template\DarkStyleResource.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
        


نکته اینکه در صورت نیاز ، اگه خواستین برای هر کدوم از پنجره ها (یا حتی کنترل ها) ، بصورت مجزا این استایل را اختصاص بدید ، فایل DarkStyleResource.xaml را میتونید بجای اجرا درکد بالا ، در قسمت Resource ئه مربوط به اون پنجره و Window ئه مورد نظرتون ، بنویسید برای الحاق کردن .


هم اینکه در صورت نیاز ، بجای DarkStyleResource ، میتونید از LightStyleResource استفاده کنید .



*
*** به نیت حضرت ولی عصر (عج) و برای اموات خودمون و خودتون ، یه فاتحه بگیرین ، ممنون میشم .


*** با تشکر ویژه از استادم (The King) که کمک بسیار زیادی بهم کردن .*

----------


## SajjadKhati

*بسم الله الرحمن الرحیم*


تمپلیتِ ToolTip که بصورت پیش فرض ، شکل بالون هست را میتونید از این پست دریافت کنید .


برای استفاده ، اول ، هر 3 فایلی که در این پست پیوست شده را به پروژه تون الحاق کنید و بعد مثل روال قبل (که فایل های xaml را در پست های قبلی توضیح داده شد برای الحاق کردن به عنوان Resource) ، اول فایل BalloonToolTipTemplate.xaml و بعد هم فایل BalloonToolTipStyle.xaml را به عنوان Resource ، الحاق کنید) .
مثلا در ResourceDictionary ئه Application :

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="BalloonToolTipTemplate.xaml"/>
                <ResourceDictionary Source="BalloonToolTipStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>


تصویر :


1.PNG


نکات :

1) اگه مقدار پروپرتیِ Placement ئه ToolTip ، به یکی از 3 مقدار PlacementMode.Right یا PlacementMode.Left یا PlacementMode.Center تنظیم بشه ، شکلِ تولتیپ ، دیگه بصورت بالون نمایش داده نمیشه و بصورت معمولی نمایش داده میشه .


پی نوشت :

1) بدیهی هست که میتونین با تنظیم Width یا Height یا Padding ئه شیِ ToolTip ، ارتفاع و فاصله از جهت ها (ی بالا و پایین و چپ و راست) را تنظیم کنید .

2) توسط اضافه کردنِ Attached Property های کلاس ToolTipService به کنترلی که میخواید بهش tooltip را اضافه کنید ، میتونید تاخیرِ زمانِ نمایش و مدت زمان نمایش tooltip را تنظیم کنید . 
Attached Property های کلاس ToolTipService مثل InitialShowDelay و BetweenShowDelay و ShowDuration .
دقت کنید که این Attached Property را نباید به شیِ ToolTip اضافه کنید بلکه به کنترلی که توی اون کنترل از ToolTip استفاده میکنید ، اضافه کنید (مثل شی Button ای که برای اون مقدار ToolTip ای تنظیم کردید) .



**** به نیت حضرت ولی عصر (عج) و برای اموات خودمون و خودتون ، یه فاتحه بگیرین ، ممنون میشم .


*** با تشکر ویژه از استادم (The King) که کمک بسیار زیادی بهم کردن .*

----------


## SajjadKhati

*بسم الله الرحمن الرحیم*


استایل و تمپلیتِ Xceed.Wpf.Toolkit.MessageBox را در فایل زیر میتونید دانلود کنید .
الحاق کردنِ فایل ها که بارها در پست های قبل ، بیان شد .
روش استفاده (در کدهایی که در این پست پیوست شدن . قبل اش باید الحاق انجام بشه) :


            Style messageBoxStyle = this.Owner.TryFindResource(typeof(Xceed.Wpf.Toolki  t.MessageBox)) as Style;
            string text = "متن فارسی English Text و تست آن؟";
            string caption = "پیغام جدید";
            Xceed.Wpf.Toolkit.MessageBox.Show(this, text, caption, MessageBoxButton.YesNoCancel, MessageBoxImage.Warning, MessageBoxResult.Yes, messageBoxStyle);



تصاویر :





**** به نیت حضرت ولی عصر (عج) و برای اموات خودمون و خودتون ، یه فاتحه بگیرین ، ممنون میشم .

*** با تشکر ویژه از استادم (The King) که کمک بسیار زیادی بهم کردن .*

----------


## SajjadKhati

*بسم الله الرحمن الرحیم*


استایل و تمپلیتِ کنترل ListView را در فایل زیر میتونید دانلود کنید .
الحاق کردنِ فایل ها که بارها در پست های قبل ، بیان شد .
روش استفاده (در کدهایی که در این پست پیوست شدن . قبل اش باید الحاق انجام بشه) :


        <WrapPanel.Resources>
            <x:Array Type="{x:Type System:String}" x:Key="ListViewItemsKey">
                <System:String>Drive C</System:String>
                <System:String>Drive D</System:String>
                <System:String>Drive E</System:String>
                <System:String>Drive F</System:String>
            </x:Array>
        </WrapPanel.Resources>





        <ListView  Name="ListView1" ItemsSource="{StaticResource ListViewItemsKey}" Margin="10" FlowDirection="RightToLeft">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="نام درایو" Width="150"/>
                    <GridViewColumn Header="برچسب درایو" Width="200"/>
                    <GridViewColumn Header="حجم درایو" Width="150"/>
                </GridView>
            </ListView.View>
        </ListView>



تصویر :


1.JPG

برای استایلِ روشن ، میتونید Brush های زیر را جایگزینِ Brush هایی که در کد (که در پست این پست) وجود دارند ، کنید :


            <Color x:Key="ColumnHeaderGripper_Linear1">#FFCCCCCC</Color>
            <Color x:Key="ColumnHeaderGripper_Linear2">#FF444444</Color>


            <SolidColorBrush x:Key="GridViewColumnHeader_DefaultForegroundBrush  " Color="#FF0A0A0A"/>

            <SolidColorBrush x:Key="GridViewColumnHeader_DefaultBorderBrush" Color="#FFAAAAAA"/>

            <SolidColorBrush x:Key="GridViewColumnHeader_DefaultBackgroundBrush  " Color="#FFF0F0F0"/>

            <SolidColorBrush x:Key="GridViewColumnHeader_MouseOverBackgroundBru  sh" Color="#FFC8C8C8"/>

            <SolidColorBrush x:Key="GridViewColumnHeader_MouseOverBorderBrush" Color="DeepSkyBlue"/>

            <SolidColorBrush x:Key="GridViewColumnHeaderGripper_DefaultBackgrou  ndBrush" Color="White"/>


            <SolidColorBrush x:Key="ListViewItem_DisabledBrush" Color="Gray"/>

            <SolidColorBrush x:Key="ListViewItem_MouseEnterBorderBrush" Color="DeepSkyBlue"/>

            <SolidColorBrush x:Key="ListView_DefaultBackgroundBrush" Color="#FFEBEBEB"/>

            <SolidColorBrush x:Key="ListView_DefaultBorderBrush" Color="#FFAAAAAA"/>

            <SolidColorBrush x:Key="ListView_DefaultForegroundBrush" Color="Black"/>

            <SolidColorBrush x:Key="ListView_DisabledBrush" Color="#FFAAAAAA"/>

            <SolidColorBrush x:Key="ListView_FocusedBorderBrush" Color="DeepSkyBlue"/>




**** به نیت حضرت ولی عصر (عج) و برای اموات خودمون و خودتون ، یه فاتحه بگیرین ، ممنون میشم .*

**** با تشکر ویژه از استادم (The King) که کمک بسیار زیادی بهم کردن .*

----------


## SajjadKhati

*بسم الله الرحمن الرحیم*


استایل و تمپلیتِ کنترل ContextMenu و MenuItem را در فایل زیر میتونید دانلود کنید .
الحاق کردنِ فایل ها که قبلا گفته شد .
روش استفاده (در کدهایی که در این پست پیوست شدن . قبل اش باید الحاق انجام بشه) :


<ContextMenu Width="120">
                        <MenuItem Header="تست 1" >
                            <MenuItem Header="زیر منو 1"/>
                            <MenuItem Header="زیر منو 2"/>
                            <MenuItem Header="زیر منو 3"/>
                        </MenuItem>
                        <MenuItem Header="تست 2"/>
                        <MenuItem Header="تست 3" IsEnabled="False"/>
                        <MenuItem Header="تست 4"/>
                        <MenuItem Header="تست 5"/>
                        <Separator/>
                        <MenuItem Header="تست 6"/>
                    </ContextMenu>


تصویر :



برای استایلِ روشن ، میتونید Brush های زیر را جایگزینِ Brush هایی که در کد (که در پست این پست) وجود دارند ، کنید :



    <SolidColorBrush x:Key="ContextMenu_DefaultBackgroundBrush" Color="#FFD2D2D2"/>


    <SolidColorBrush x:Key="ContextMenu_And_MenuItem_DefaultForegroundB  rush" Color="Black"/>


    <SolidColorBrush x:Key="ContextMenu_DefaultBorderBrush" Color="#FF4B4B4B"/>


    <SolidColorBrush x:Key="MenuItem_Separator_DefaultBorderBrush" Color="#FF2D2D2D"/>








    <SolidColorBrush x:Key="MenuItem_DefaultBackgroundBrush" Color="Transparent"/>


    <SolidColorBrush x:Key="MenuItem_MouseEnterBorderBrush" Color="#FF0096FF"/>


    <SolidColorBrush x:Key="MenuItem_TickPathBrush" Color="#FF2D2D2D"/>


    <SolidColorBrush x:Key="MenuItem_DisabledForegroundBrush" Color="#FF8C8C8C"/>








    <SolidColorBrush x:Key="MenuItem_TopLevel_MouseEnterBackgroundBrush  " Color="#FF5A5A5A"/>


    <SolidColorBrush x:Key="MenuItem_TopLevelHeader_AllBrush" Color="LimeGreen"/>




**** به نیت حضرت ولی عصر (عج) و برای اموات خودمون و خودتون ، یه فاتحه بگیرین ، ممنون میشم .

*** با تشکر ویژه از استادم (The King) که کمک بسیار زیادی بهم کردن .*

----------

