Child Window in WPF

Let us assume there is a requirement,

1. On click event of button, a new child window should open.

2. While child window is open, the parent window should be inactive.

So start with

Step 1

Create a WPF application. And drag and drop a Button on the MainPage.

clip_image002

Step 2

Right click on the WPF project and new item and select a WPF Window from WPF tab. Rename window to ChildWindow.xaml

clip_image004

Step 3

Now on the click event of button child window will get open.

clip_image006

On the button click event

1. An instance of Child window is being created

2. Then ShowDialog() method is being called to open the child window .

MainPage.Xaml.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            BtnNewWindow.Click += new RoutedEventHandler(delegate(object sender, RoutedEventArgs e)
                                                          {
                                                              ChildWindow chldWindow = new ChildWindow();
                                                              MessageBox.Show(chldWindow.Getmessage());
                                                              chldWindow.ShowDialog();
                                                          });



        }


    }
}

So on running on the click of button new child window being open.

clip_image007

Data Binding In WPF

Objective

Here in this tutorial we are going to bind data from a collection (LIST) to XAML. We are going to display
Image, Name, Age and Email id of a Person.

Step 1

Open Visual Studio 2008; create a New Project as WPF application. Give this name as Display.
Step 2

Add a business logic class. Right click in solution explorer then add a new class called Person

namespace Display{public partial class Window1 : Window{
public Window1(){
InitializeComponent();
List<Person> persons = new
List<Person>()
{
new Person{Name=“Anuska Sharama”,Age=21,Email=“anuska@xyz.com”,Image=“anuska.jpg”},
new Person {Name=“Asin”,Age=26,Email=“asin@xyz.com”,Image=“asin.jpg”},
new Person{Name=“Deepika”,Age=25,Email=“deepika@xyz.com”,Image=“deepika.jpg”}
} } }}

 Step 3
Now it is time to write XAML code and bind collection persons to List of XAML.Create a Listbox in XAML as follows

<ListBox x:Name=”list1″>
</ListBox>

Name it as list1. Then bind this list1 to collection persons. So again go to

Windows.xaml.cs

file and add this line of code after creating collection persons

list1.ItemsSource = persons;
list1.ItemsSource = persons;

Step 4

Now add a Item Template and Data template inside listbox in xaml file. Bind images to List box . Now again add Stack panel with orientation Vertical. Then add three labels to display Name, age and email.

Complete Xaml code will look like

<Window x:Class=”Display.Window1″
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

Title=”Window1″ Height=”300″ Width=”300″>

<Grid>
 <ListBox x:Name=”list1″>
<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Orientation=”Horizontal”>

<Image Source=”{Binding Image}” Height=”100″ Stretch=”UniformToFill” />
<StackPanel Orientation=”Vertical”>
<Label FontFamily=”Tahoma” FontSize=”20″ Content=”{Binding Name}” />
<Label FontFamily=”Tahoma” FontSize=”20″ Content=”{Binding Age}” />
<Label FontFamily=”Tahoma” FontSize=”20″ Content=”{Binding Email}” />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
Run the code to get the desired output.
Happy Coding

Web Browser Control in WPF

Objective

In this article, I am going to show you; how to work with Web Browser control in WPF? We will be opening a web site (even a Silverlight Enabled web site in WPF application) in the new Web Browser control.

Expected Output


Web Browser Control

This control is added in .Net 3.5 SP1. This is used to browse the websites in a WPF application. This control could be used to execute scripts also. This control is capable of loading Silverlight enabled site also. This feature makes it a great control.


Working Explanation

I do have two buttons on the form. One button will load the requested site from the user text box. And another is used to load the default web site for this window application. I have taken Google as default website. There is one text box also. In this text box user could enter the site she is willing to load in the browser.

Step 1: Create a WPF Application.

Open the Visual Studio 2008 and create a new WPF Application.

Step 2: Design the window

Open the WPF application in blend and design the window.


  1. I have divided the default grid in three rows and two columns
  2. In first row , I put one TextBlock and one TextBox
  3. In TextBox user will input site address she wants to load in the web browser.
  4. In second row, I put one border layout. And merged the columns.
  5. Then I put one WebBrowser control in the second row of Grid inside border Layout.
  6. In third row, I put one StackPanel with horizontal orientation.
  7. Then I put two buttons in the third row. One button is to load the default website and another to load the requested website.

Windows1.Xaml (For your reference)

<Window x:Class=”webbrowsercontrol.Window1″


xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;


xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;


Title=”Window1″ Height=”400″ Width=”400″>


<Grid>

    <Grid.Background>

        <LinearGradientBrush MappingMode=”RelativeToBoundingBox” EndPoint=”0.5,1″ StartPoint=”0.5,0″>

            <GradientStop Color=”#FF000000″ Offset=”0″/>

            <GradientStop Color=”#FF52698D” Offset=”1″/>

        </LinearGradientBrush>

    </Grid.Background>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width=”0.226*”/>

        <ColumnDefinition Width=”0.774*”/>

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

        <RowDefinition Height=”0.091*”/>

        <RowDefinition Height=”0.755*”/>

        <RowDefinition Height=”0.154*”/>

    </Grid.RowDefinitions>

    <TextBlock Margin=”1,1,1,1″ Text=”Navigate To” TextWrapping=”Wrap” Foreground=”#FFF4EAEA”/>

    <TextBox x:Name=”txtLoad” Margin=”0,1,0,1″ Grid.Column=”1″ Text=”” TextWrapping=”Wrap” Background=”#FFBDA4A4″ HorizontalAlignment=”Stretch” Cursor=”No” Foreground=”#FFE91D1D” Width=”Auto” Height=”30″ VerticalAlignment=”Top”/>

    <Border Margin=”1,1,1,1″ Grid.ColumnSpan=”2″ Grid.Row=”1″ BorderBrush=”#FF000000″ BorderThickness=”1,1,1,1″>

        <WebBrowser x:Name=”myBrowser” Margin=”0,0,0,0″ Cursor=”Arrow”/>

    </Border>

    <Border Margin=”1,0,1,0″ Grid.ColumnSpan=”2″ Grid.Row=”2″ BorderBrush=”#FF000000″ BorderThickness=”1,1,1,1″>

        <StackPanel Margin=”0,0,0,0″ Orientation=”Horizontal”>

            <Button x:Name=”btnExternal” Margin=”0,0,0,0″ Width=”175″ Content=”Load Requested Site” FontWeight=”Bold” FontSize=”14″ Click=”btnExternal_Click”>

                <Button.Background>

                    <LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>

                        <GradientStop Color=”#FF000000″ Offset=”0″/>

                        <GradientStop Color=”#FFFFFFFF” Offset=”1″/>

                        <GradientStop Color=”#FFC44848″ Offset=”0.289″/>

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Button x:Name=”btnInternal” Margin=”9,0,0,0″ Width=”175″ Content=”Load Default Site” Foreground=”#FF0F0D0D” FontWeight=”Bold” FontSize=”14″ Click=”btnInternal_Click”>

                <Button.Background>

                    <LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>

                        <GradientStop Color=”#FF000000″ Offset=”0″/>

                        <GradientStop Color=”#FFFFFFFF” Offset=”1″/>

                        <GradientStop Color=”#FFA93030″ Offset=”0.211″/>

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

        </StackPanel>

    </Border>


</Grid>

</Window>

Step 3: Navigating the Sites in WebBrowser control

I have given Name of WebBrowser control is myBrowser. If you see XAML code closely, you would find that.

Navigate method on WebBrowser control is used to load the site in the control.

So, if you want to load Google in WebBrowser control, you need to call Navigate method like below,

myBrowser.Navigate(new
Uri(http://www.google.com&#8221;));

Navigate Method

 


Navigate method is overloaded with two arguments. One takes only URI address to be load and other takes URI source as well as Frame name along with other parameters.

Load Default Site Button

I have made c-sharpcorner.com as default web site to be loaded. So when user will click on Load Default site button, this site will get loaded in the Browser control.

private
void btnInternal_Click(object sender, System.Windows.RoutedEventArgs e)

{

myBrowser.Navigate(new
Uri(http://www.c-sharpcorner.com&#8221;));

}

Load Requested Site Button

When user will give any site address in textbox that site will get loaded on click event of this button.

private
void btnExternal_Click(object sender, System.Windows.RoutedEventArgs e)

{


Uri ui = new
Uri(txtLoad.Text.Trim(), UriKind.RelativeOrAbsolute);

myBrowser.Navigate(ui);

}

Windows.Xaml.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

    

namespace webbrowsercontrol

{


///
<summary>


/// Interaction logic for Window1.xaml


///
</summary>


public
partial
class
Window1 : Window

{


public Window1()

{

InitializeComponent();

myBrowser.Navigate(new
Uri(http://www.google.com&#8221;));

}


private
void btnExternal_Click(object sender, System.Windows.RoutedEventArgs e)

{


Uri ui = new
Uri(txtLoad.Text.Trim(), UriKind.RelativeOrAbsolute);

myBrowser.Navigate(ui);

}


private
void btnInternal_Click(object sender, System.Windows.RoutedEventArgs e)

{

myBrowser.Navigate(new
Uri(http://www.c-sharpcorner.com&#8221;));

}

}

}

Step 4: Run the application

Press F5 to run the application. If you see while loading Google.com is loaded in Browser Control. Because if you see closely Windows1() constructor , I am loading the browser control with google over there.


Click on Load Default site button, it will load c-sharp corner.

 

Type some site address in textbox at right top corner and click Load requested site.


Able to Load Silverlight enabled site

 

Most interesting Part is type http://silverlight.net/ in the textbox and click on Load Requested site. It would load SilverLight site. It means WebBrowser control is capable of loading a Silverlight enabled site also.


Conclusion

We saw, how to work with BrowserControl in WPF. Please download the attached code for better reference.

Happy Coding.