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