Tab control taken over by bacteria computer

  • Article

Oh no.  Looks like another overdose with that headline.  Well before the overdose of chocolate chips and expresso tunes down I better get the article written.  With four shots of expresso and a handful of chocolate chips, well…

What if you want to make a form that has tabs?  How would you do that? 

Tab 1, note the lovely circular ellipse, the term “Comment”, “Enter some text”, and the yellow textbox

image

Tab 2, note the icon, the term “Bacteria” and the image of the bacterial computer (from another blog entry)

image

Here is the XAML code (I have attached the simple file to the blog, you download it below):

Code Snippet

  1. <TabControl>
  2.             <!--************************************************-->
  3.             <!--If you use <TabItem Header="Tab 1" it more -->
  4.             <!--difficult to implement the ellipse or image on -->
  5.             <!--the tab -->
  6.             <!--************************************************-->
  7.             <TabItem>
  8.                 
  9.                 <TabItem.Header>
  10.                     <!--************************************************-->
  11.                     <!--You must use StackPanels to add more than -->
  12.                     <!--one control -->
  13.                     <!--************************************************-->
  14.                     <StackPanel Orientation="Horizontal">
  15.                         <!--************************************************-->
  16.                         <!--This is the Ellipse on the tab -->
  17.                         <!--************************************************-->
  18.                         <Ellipse Width="10" Height="10" Fill="Red"/>
  19.                         <!--************************************************-->
  20.                         <!--************************************************-->
  21.                         <TextBlock>Comment</TextBlock>
  22.                     </StackPanel>
  23.                 </TabItem.Header>
  24.                 <StackPanel>
  25.                     <TextBlock>Enter some text</TextBlock>
  26.                                         <TextBox Name="textBox1" Width="208" Height="52" Background="Yellow"/>
  27.                 </StackPanel>
  28.             </TabItem>
  29.             <TabItem>
  30.                 <TabItem.Header>
  31.                     <StackPanel Orientation="Horizontal">
  32.                         <!--************************************************-->
  33.                         <!--Change the "source" to an image on your computer-->
  34.                         <!--************************************************-->
  35.                         <Image Width="10" Height="10" Source="ToolIcon.bmp"/>
  36.                         <!--************************************************-->
  37.                         <!--************************************************-->
  38.                                         <TextBlock>Bacteria</TextBlock>
  39.                     </StackPanel>
  40.                 </TabItem.Header>
  41.                     <StackPanel>
  42.                         <TextBlock Text="{Binding ElementName=textBox1, Path=Text}"/>
  43.                         <!--************************************************-->
  44.                         <!--Change the "source" to an image on your computer-->
  45.                         <!--************************************************-->
  46.                     <Image Height="150" Width="200"
  47.                                Name="image1" Stretch="Fill"  
  48.                                Source="bacteria_heart.jpg" />
  49.                     </StackPanel>
  50.             </TabItem>
  51.         </TabControl>

Code attached

TabControl.zip