In this article we will learn how to use Frame control in WPF using VB.NET.
Frame control
The Frame control in WPF supports content navigation within content. A Frame can be hosted within a Window, NavigationWindow, Page, UserControl, or a FlowDocument control.
Properties - These are the following properties of Frame control.
Figure 1.
Source - this property provides the Uri of the page that will be opened in the frame, when the frame is loaded.
JournalOwnership - this property determines if the Frame should use its own journal or the one of the browser to store the navigation history. We'll take a look at it a little bit later.
Automatic - If the browser allows, the navigation history will be recorded in its journal, if not - it will be recorded only in the journal of the Frame control.
OwnsJournal - the Frame control will store the navigation history only in its own history journal.
UsesParentJournal - the Frame will use the journal of the parent Frame control and the JournalOwnership settings of the parent control are then applied. If there is no parent Frame control, the Browser History journal is used.
UriMapper property - This property provide a collection of URI patterns that map to WPF pages.
Creating a Frame control in XAML
<Frame Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Frame1"VerticalAlignment="Top" Width="200" />
The Width and Height attributes of the Frame element represent the width and the height of a Frame control.
The default view of the Frame control looks like this.
Figure 2.
For example
The Source property is set to Page1.xaml which means that by default the page displayed in the frame is the page located at Page1.xaml.
Add a page in solution explorer and taking a image control on the form. This looks like this.
Figure 6.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Frame Height="222" HorizontalAlignment="Left" Margin="10,50,0,0" Name="Frame1"VerticalAlignment="Top"
Width="306" Source="Page1.xaml" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="TextBlock1"Text="This shows the area outside of the frame" VerticalAlignment="Top" Width="322" />
</Grid>
</Window>
Now run the application.
Figure 3.
The Window looks like as below in picture. The image area is the Page1.xaml and white area is outside of the Frame.
For example
The following code rotates the contents of frame to 60 angle.
XAML Code
<Frame Source="Page1.xaml">
<Frame.LayoutTransform>
<RotateTransform Angle="60" />
</Frame.LayoutTransform>
</Frame>
The form looks like this.
Figure 4.
Now run the application and test it.
Figure 5.