دریافت Template برای کنترل های WPF

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
سلام
این تاپیک را زدم تا هر کس 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 مربوط به کمبوباکس (بخش زیرین) را مشخص میکنه .



نمونه مثال :

XML:
<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.7.10 ، به روزرسانی شد و چند تا از مشکلات کوچیکی که قبلا داشت (قابلیت تنظیم Padding و BorderThickness و ...) ، رفع شد . با تنظیم پروپرتیِ Left (نه هر پروپرتیِ دیگه) از پروپرتیِ BorderThickness مربوط به ComboBox ، ضخامت کل حاشیه ی کمبوباکس را میشه تعیین کرد .

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

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

پیوست ها

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
بسم الله الرحمن الرحیم


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 ها را احاطه کرده) .

نمونه مثال :

XML:
        <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

کاربر فعال <A href="http://forum.majidonline.com/f
بسم الله الرحمن الرحیم


همونطور که میدونید ، 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
که در لینک زیر در دسترس هست :


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


اقدام کنید .


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


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

XML:
        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) را عدد فرد انتخاب کنید .




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

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

پیوست ها

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
بسم الله الرحمن الرحیم


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

تصاویر :


Dark ListBox.PNG


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

XML:
        <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) که کمک بسیار زیادی بهم کردن .
 

پیوست ها

آخرین ویرایش:

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
بسم الله الرحمن الرحیم


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


تصاویر :


PowerDVD CheckBox.PNG


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

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

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

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


مثال :

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

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

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

پیوست ها

آخرین ویرایش:

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
بسم الله الرحمن الرحیم


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


تصاویر :


PowerDVD RadioButton.PNG


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


مثال :

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

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

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

پیوست ها

آخرین ویرایش:

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
بسم الله الرحمن الرحیم


تمپلیت هایی که در این پست طراحی شدن را در 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) :

XML:
<ResourceDictionary>
            
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="StyleResource.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        



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

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

C#:
this.Style = (Style)Application.Current.Resources["LightStyle"];
بجای مقدار LightStyle در کد بالا ، در صورت نیاز به استایل تاریک ، از DarkStyle هم میتونین استفاده کنین .

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


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


پروژه ای هم پیوست شده که مثالی از این قضیه هست (که تصویرش را در بالا میبینید) (با انتخاب Dark Theme از کمبوباکس ای که در قسمت بالای پروژه هست ، میتونین استایل سیاه وگرنه استایل روشن را انتخاب کنید) .

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



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

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

پیوست ها

جدیدترین ارسال ها

بالا