Home > DeveloperSection > Beginner > Frame control in WPF

Frame control in WPF


WPF WPF 
Ratings:
0 Comment(s)
 29997  View(s)
Rate this:

Frame control in WPF

In WPF we can use Frame control to display content of another window with the same window. WPF frame control does not support to displaying html content. We can navigate to another form and show the content of that form within the same window. The frame control in WPF supports navigation within content. A frame can be hosted within a window, navigation window or user control etc. In XAML <Frame /> element is used to create a frame control. In this demonstration I will show you that how to use frame control in WPF.

Following XAML code snippet represent frame control in WPF

<Frame x:Name="frame1" Width="200" Height="200" Background="LightPink" Canvas.Left="97" Canvas.Top="28">

            <Frame.BitmapEffect>

                <DropShadowBitmapEffect />

            </Frame.BitmapEffect>

           

</Frame>

Output of the following code snippet is as follows

Frame control in WPF

Rotating Frame by an angle

We can rotate frame providing an angle to frame object.

The following XAML code snippet represents are used to rotate frame

<Frame x:Name="frame1" Width="200" Height="200" Background="LightPink" Canvas.Left="97" Canvas.Top="28">

            <Frame.BitmapEffect>

                <DropShadowBitmapEffect />

            </Frame.BitmapEffect>

            <Frame.LayoutTransform>

                <RotateTransform Angle="40" />

            </Frame.LayoutTransform>

</Frame>

Output of the following code snippet is as follows

Frame control in WPF

Navigating content in Frame control

XAML code which to create User Interface of navigation frame

<Canvas>

        <Frame x:Name="frame1" Width="479" Height="250" Background="LightPink" Canvas.Left="12" Canvas.Top="12">

            <Frame.BitmapEffect>

                <DropShadowBitmapEffect />

            </Frame.BitmapEffect>

        </Frame>

        <Button Canvas.Left="116" Canvas.Top="276" Content="Show Content" Height="23" x:Name="btnContent" Width="253" Click="btnContent_Click" />

</Canvas>

Output of the following code snippet is as follows

Frame control in WPF

On the click event of Show Content button write the following code

private void btnContent_Click(object sender, RoutedEventArgs e)

{

            frame1.Navigate(new Uri("http://www.google.com"));

}

Output of the following code

Frame control in WPF

 


Don't want to miss updates? Please click the below button!

Follow MindStick