A while back I posted up about showing more interesting content on that tab of a tab control using Windows Presentation Foundation (WPF).
In the example that I posted, I created the custom look of the tab control just using XAML and I thought that it would be good to also show how to do the same thing using Visual Basic.
To do this I decided to cut back to the basics for the content of the tabs and I started with a tab control with four tabs. The first tab had a textblock with some text as well as a couple style blocks in it. The second tab starts with a stack panel. The third and fourth tabs have grids on them.
The XAML for my base project is.
<Window x:Class="Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Window1"
Title="Window1" Height="437" Width="532" WindowStartupLocation="CenterScreen">
<
Grid x:Name="Form1">
<
TabControl>
<
TabItem x:Name="Tab1">
<
TabItem.Header>
<TextBlock x:Name="Tab1TextBlock">
<Span x:Name="Tab1TbSpan1">Words</Span> <Span x:Name="Tab1TbSpan2">in</Span>
<Span x:Name="Tab1TbSpan3">Italics</Span>
</TextBlock>
</TabItem.Header>
<TabItem x:Name="Tab2">
<
TabItem.Header>
<StackPanel x:Name="Stack" Orientation="Horizontal">
</StackPanel>
</TabItem.Header>
<TabItem x:Name="Tab3">
<
TabItem.Header>
<Grid x:Name="Grid1">
</Grid>
</TabItem.Header>
<TabItem>
<
TabItem.Header>
<Grid x:Name="Grid2">
</Grid>
</TabItem.Header>
The window does not look too interesting yet,
but we will make it look better soon.
Tab 1
Within the XAML of the text block that is in the first tab, I have added in where I want the different styles to be. I have giving the each span block a name so that it can be referenced by the code behind.
There are different ways to go about this depending on what you want to do. As you will see I have created one style with several different properties, since I am only going to be setting one property per span block I have only created one new style, or you can create a new style for each span block if you are going to have different styles for overlapping properties.
I started off by declaring a variable as a New Span, then I set the properties for the variable that I wanted.
Dim s As New Span
s.Foreground = Brushes.Blue
s.FontWeight = FontWeights.Bold
s.FontStyle = FontStyles.Italic
Now that I have the properties set, I just need to assign them to the various spans that I have on my tab.
Tab1TbSpan1.Foreground = s.Foreground
Tab1TbSpan2.FontWeight = s.FontWeight
Tab1TbSpan3.FontStyle = s.FontStyle
Tab one now has something more elaborate on it.
Admittedly, I could have just used Brushes.Blue to set the Foreground of the first span, but by creating and using a new span I can now re-use this over and over in my code if I wanted to and if I wanted to change the colour, then I would only have to change one line of code rather than possibly having to several to change.
Tab 2
Tab 2 starts out with a stack panel on it with the orientation of the stack panel set to horizontal.I could have set the orientation of the stack panel with VB code if I wanted by using:
With Stack
.Orientation = Orientation.Horizontal
End With
if I wanted.
In the stack panel I am going to place a text block, a rectangle and a circle.
To add the text block, I need to start out with declaring a new text block then set the Text property. With that done the last line of code adds the text block to the stack panel.
With tb As New TextBlock
tb.Text = "Circles and Rectangles"
Stack.Children.Add(tb)
I now have a caption on the second tab.
Next I want to have a circle showing on the tab, so I declare a variable to hold a new ellipse and then set the Height, Width, and Fill. I also set the Margin for the ellipse to a new thickness and pass the numeric representations of left, top, right and bottom to position the ellipse on the tab. Once I have the properties I want set, I add the ellipse to the stack panel.
Dim c As New Ellipse
c.Height = 20
c.Width = 20
c.Fill = Brushes.Blue
c.Margin = New Thickness(10, 0, 0, 0)
Stack.Children.Add(c)
Tab 2 now has a caption and a circle on it.
The last item I wanted on the tab was a rectangle, so I did much the same for this as for adding the ellipse. I declared a variable to hold a new rectangle then set the Height, Width and Fill. Again I set the margin property to a new thickness to position the rectangle on the tab. Then I added the rectangle to the stack panel.
Dim r As New Rectangle
r.Height = 15
r.Width = 25
r.Fill = Brushes.Red
r.Margin = New Thickness(10, 0, 0, 0)
Stack.Children.Add(r)
I now have my desired look for the second tab.
Tab 3
Tab 3 will hold an image.
Once again I start off by declaring a variable which will hold a new image, then set the Width and Source properties.The source property is declared as a New BitmapImage and the path of the image file, as well as what kind of Uri the path is, are passed as parameters of the Uri of the file. The image control is then added to the grid on the tab.
Dim v As New Image
v.Width = 80
v.Source = New BitmapImage(New Uri("Lizard004_RJ.JPG", UriKind.Relative))
Grid1.Children.Add(v)
The third tab now displays an image.
Tab 4
The last tab on my tab control is going to display a video.
I start out by declaring a variable to hold a new instance of a media element, then set the Width and Source properties of the element before adding the control to the grid on the fourth tab.
Dim m As New MediaElement
m.Width = 80
m.Source = New Uri("butterfly.wmv", UriKind.Relative)
Grid2.Children.Add(m)
The tab now displays the video and completes the effect I was after.
So you can see that it can be just as easy to do in Visual Basic what you can with XAML.