کنترل TabControl :
با نام این کنترل و عملکرد این کنترل در دات نتفریم ورک 2.0 آشنا شدید. در این جا قصد صحبت کردن در مورد این کنترل را ندارم، و بیشتر به شرح خاصیت TabItem از این کنترل خواهیم پرداخت. ولی به عنوان اشاره کوچکی در مورد ساخت این کنترل در WPF به کد زیر دقت کنید ( کد نوشته شده توسط کاربر sajadlove )
<TabControl Margin="5">
<TabItem Header="TabOne">
<StackPanel>
<CheckBox Margin="3">Name</CheckBox>
<CheckBox Margin="3">Family</CheckBox>
<Button Margin="3">Go</Button>
</StackPanel>
</TabItem>
<TabItem Header="TabTwo">
<StackPanel>
<CheckBox Margin="3">SettingOne</CheckBox>
<CheckBox Margin="3">SettingTwo</CheckBox>
<Button Margin="3">Go</Button>
</StackPanel>
</TabItem>
</TabControl>
نتیجه حاصل از اجرای کد فوق ( درون یک window را در شکل زیر مشاهده می کنید)
--------------------------------------------------------------------------------------------------
خاصیت TabItem :
خاصیت TabItem شبیه به TabPage در کنترل TabControl در دات نت فریم ورک 2.0 می باشد. در واقع هر TabItem یک صفحه را در کنترل tabControl مشخص می کند. عنصر TabItem نیزاز ان دسته از عناصری است که دارای خاصیت header می باشد. همانند GroupBox خاصیت Header از عنصر TabItem نیز می تواند، شامل یک متن ساده باشد و یا اینکه شامل یک محتوای پیچیده تشکیل شده از چندین عنصر باشد.
به کد زیر دقت کنید ...(نوشته شده توسط کاربر sajadlove)
<Grid>
<TabControl Margin="5">
<TabItem Header="TabOne">
<TabItem.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="LightSteelBlue" Offset="0"/>
<GradientStop Color="LightBlue" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TabItem.Background>
<Border BorderBrush="DarkBlue" BorderThickness="2" CornerRadius="5">
<StackPanel>
<StackPanel.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="LightSteelBlue" Offset="0"/>
<GradientStop Color="LightBlue" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</StackPanel.Background>
<CheckBox Margin="3">SettingOne</CheckBox>
<CheckBox Margin="3">SettingTwo</CheckBox>
<Button Margin="3">Go</Button>
</StackPanel>
</Border>
</TabItem>
<TabItem>
<TabItem.Header>
<StackPanel>
<TextBlock>TabTwo</TextBlock>
</StackPanel>
</TabItem.Header>
<StackPanel>
<CheckBox Margin="3">SettingOne</CheckBox>
<CheckBox Margin="3">SettingTwo</CheckBox>
<Button Margin="3">Go</Button>
</StackPanel>
</TabItem>
</TabControl>
</Grid>
نتیجه اجرا:
-----------------------------------------------------------------------------------------------
حال به مثال جامع تر زیر که تر کیب، پست های قبلی با مطالب این پست می باشد نیز توجه فر مایید..
<TabControl Margin="10">
<TabItem Header="Simpe Header">
<TextBlock TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18">Without Content</TextBlock>
</TabItem>
<TabItem >
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="20" MaxWidth="20" Margin="0,0,2,0"></Image>
<TextBlock Margin="5,0,5,0"> ( Score Tab Page )
<TextBlock.Foreground>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Brown" Offset="0"/>
<GradientStop Color="Green" Offset=".5"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</StackPanel>
</TabItem.Header>
<GroupBox Margin="10" Padding="10" VerticalAlignment="Top">
<GroupBox.Header>
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="20" MaxWidth="20" Margin="0,0,2,0"></Image>
<TextBlock Margin="5,0,5,0"> ( Select Score )
<TextBlock.Foreground>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Brown" Offset="0"/>
<GradientStop Color="Bisque" Offset=".5"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</StackPanel>
</GroupBox.Header>
<StackPanel>
<RadioButton Margin="3" Name="rbtn1" IsChecked="True" >
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</RadioButton>
<RadioButton Margin="3" Name="rbtn2">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn3">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn4">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn5">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</StackPanel>
</RadioButton>
</StackPanel>
</GroupBox>
</TabItem>
<TabItem >
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\banner.png" MaxHeight="32" MaxWidth="32"></Image>
<TextBlock Margin="5,0,5,0"> ( Country Page )
<TextBlock.Foreground>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Brown" Offset="0"/>
<GradientStop Color="Gray" Offset=".5"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</StackPanel>
</TabItem.Header>
<GroupBox Margin="10" Padding="10" VerticalAlignment="Top">
<GroupBox.Header>
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\banner.png" MaxHeight="32" MaxWidth="32"></Image>
<TextBlock Margin="5,0,5,0"> ( Select Country )
<TextBlock.Foreground>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Brown" Offset="0"/>
<GradientStop Color="Gray" Offset=".5"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</StackPanel>
</GroupBox.Header>
<StackPanel>
<RadioButton Margin="3" Name="rbtn6" IsChecked="True">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\Iran.ico" MaxWidth="20" MaxHeight="20"/>
<TextBlock>(Iran)</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn7">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\Albania.ico" MaxWidth="20" MaxHeight="20"/>
<TextBlock>(Albani)</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn8">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\Hong-Kong.ico" MaxWidth="20" MaxHeight="20"/>
<TextBlock>(Hong-Kong)</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn9">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\Italy.ico" MaxWidth="20" MaxHeight="20"/>
<TextBlock>(Italy)</TextBlock>
</StackPanel>
</RadioButton>
</StackPanel>
</GroupBox>
</TabItem>
<TabItem >
<TabItem.Header>
<StackPanel>
<Image Source=".\Images\star.png" MaxHeight="20" MaxWidth="20" Margin="0,0,2,0"></Image>
<TextBlock Margin="5,0,5,0"> ( Score )
<TextBlock.Foreground>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Brown" Offset="0"/>
<GradientStop Color="Bisque" Offset=".5"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
<Image Source=".\Images\banner.png" MaxHeight="32" MaxWidth="32"></Image>
<TextBlock Margin="5,0,5,0"> ( Country )
<TextBlock.Foreground>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Brown" Offset="0"/>
<GradientStop Color="Gray" Offset=".5"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</StackPanel>
</TabItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GroupBox Margin="10" Padding="10" VerticalAlignment="Top">
<GroupBox.Header>
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="20" MaxWidth="20" Margin="0,0,2,0"></Image>
<TextBlock Margin="5,0,5,0"> ( Select Score )
<TextBlock.Foreground>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Brown" Offset="0"/>
<GradientStop Color="Bisque" Offset=".5"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</StackPanel>
</GroupBox.Header>
<StackPanel>
<RadioButton Margin="3" Name="rbtn10" IsChecked="True" >
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</RadioButton>
<RadioButton Margin="3" Name="rbtn11">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn12">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn13">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn14">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</StackPanel>
</RadioButton>
</StackPanel>
</GroupBox>
<GroupBox Grid.Column="1" Margin="10" Padding="10" VerticalAlignment="Top">
<GroupBox.Header>
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\banner.png" MaxHeight="32" MaxWidth="32"></Image>
<TextBlock Margin="5,0,5,0"> ( Select Country )
<TextBlock.Foreground>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Brown" Offset="0"/>
<GradientStop Color="Gray" Offset=".5"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</StackPanel>
</GroupBox.Header>
<StackPanel>
<RadioButton Margin="3" Name="rbtn15" IsChecked="True">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\Iran.ico" MaxWidth="20" MaxHeight="20"/>
<TextBlock>(Iran)</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn16">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\Albania.ico" MaxWidth="20" MaxHeight="20"/>
<TextBlock>(Albani)</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn17">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\Hong-Kong.ico" MaxWidth="20" MaxHeight="20"/>
<TextBlock>(Hong-Kong)</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn18">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\Italy.ico" MaxWidth="20" MaxHeight="20"/>
<TextBlock>(Italy)</TextBlock>
</StackPanel>
</RadioButton>
</StackPanel>
</GroupBox>
</Grid>
</TabItem>
</TabControl>
حال، نگاهی به نتیجه اجرای مثال فوق خواهیم انداخت و توضیحات مربوطه را در هر بخش خواهید دید. مثال فوق که کد کاملی می باشد،( می توانید آن را در یک پنجره و در داخل عنصر Grid کپی کنید و اجرا نمایید) یک پنجره که دارای یک عنصر TabControl می باشد را نشان می دهد. عنصر TabControl دارای چهار Page یا جهار TabItem می باشد که به ترتیتب در شکل های زیر مشاهده می کنید :
صفحه اول :
اولین عنصر TabItem دارای یک متن ساده در header خود می باشد و نیز یک عنصر TextBlock در خاصیت Content خود می باشد. این ساده ترین شکل از یک عنصر TabItem می تواند باشد.
صفحه دوم :
این صفحه دارای یک کنترل StackPanel با خاصیت Orientaion با مقدار Horizontal می باشد. درون این کنترل یک عکس و یک متن درون عنصر TextBlock قرار گرفته است. مقدار خاصیت Content این عنصر همان GroupBox سمت چپ مثال قبل می باشد که یک محتوای پیچیده و پیشرفته را برای شما ایجاد می کند.
صفحه سوم :
این صفحه دارای یک کنترل StackPanel با خاصیت Orientaion با مقدار Horizontal می باشد. درون این کنترل یک عکس و یک متن درون عنصر TextBlock قرار گرفته است. مقدار خاصیت Content این عنصر همان GroupBox سمت راست مثال قبل می باشد که یک محتوای پیچیده و پیشرفته را برای شما ایجاد می کند.
صفحه چهارم:
این صفح در header خود کمی متفاوت تر از header ها صفحات قبلی می باشد. اولین تفاوت اینکه در این صفحه و در قسمت هدر ان چهار عنصر مجزا قرار گرفته است. دو عنصر برای نگه داری عکس ها و دو عنصر برای نگهداری متن های مروبوطه. دو مین تفاوت ان این است که کنترل StackPanel موجود در هدر این صفحه به صورت نرمال می باشد. یا در واقع خاصیت Orientation آن تنظیم نشده است که باعث می شود به صورت پیش فرض Vertical در نظر گرفته شود. خاصیت Content این صفحه نیز، با GroupBox های مثال قبلی مقدار دهی شده است.
مثال فوق، نشان دهنده این است که شما می توانید با بهری گیری از عناصر کانتینر کنترل های کاملا سفارشی خود را ایجاد نمایید.
--------------
پ و:
(با تشکر از کاربر sajadlove به خاطر همکاریشون در این پست)
