WPF Frame Kullanımı

WPF‘ te aynı pencere içinde bir yada daha fazla pencere içeriği görüntülemek için Frame denetimi kullanılır. WPF uygulamaları sayfa tabanlı olarak tanımlanabilmektedir. Buradaki Sayfa kavramı birazdan örneğini de yapacağımız Page tipinden bir nesnedir. Page nesnelerini kullanarak aynı pencere içinde birden fazla Form içeriği görüntülenebilir. Frame kontrolü Page (sayfa) görüntülemesi dışında istenirse Html içeriğini görüntüleme ve içeriğin farklı parçaları arasındaki navigasyonu sağlama yeteneğine de sahiptir.
Frame kullanımıyla ilgili 2 adet örnek yapacağız. Örneğimizden biri basit bir şekilde Html içerik görüntüleme ile ilgili olacak. Diğer örneğimizde ise Page nesnesinin kullanımını göreceğiz.

İlk örneğimize geçelim. Bir web sayfasını örneğimiz de www.yazilimkodlama.com olacak 🙂 Frame içerisinde görüntüleyeceğiz. Bu işlemi iki farklı şekilde yapabiliriz.
XAML tarafında yapmak istersek;


    <Grid>
        <Frame Source="http://yazilimkodlama.com"  />
    </Grid>

<Grid>

</Grid>

şeklinde Source özelliğine sayfa adresini yazarak açılışta Web sayfasının MainWindow içerisinde görüntülenmesini sağlayabiliyoruz.
C# tarafında bu işlemi yapmak için;


 frame1.Source = (new Uri("http://www.yazilimkodlama.com"));

frame1.Source = (new Uri("http://www.yazilimkodlama.com"));

şeklinde kullanabiliriz. Burada dilerseniz web sayfasının adresini bir textBox kontolünden çekebilirsiniz. Yukarıdaki kodu Button_Click olayına;


frame1.Source = (new Uri(txt1.Text));

frame1.Source = (new Uri(txt1.Text));

şeklinde yazarak TextBox içerisine girilmiş adresin Frame içerisinde görüntülenmesi sağlanabilir.

2. Örneğimizde ise Frame içinde Page kullanımını gösteren küçük bir örnek yapacağız. Örneğimizde MainWindow yani ana penceremizde Listele ve Ekle butonu ve Frame nesnesi bulunacak. Listele ve Ekle butonu Page1 ve Page2 sayfalarının tasarımlarını yaparak Frame içinde görüntülenmesini sağlayacağız.

Yeni bir WPF projesi açarak örneğimize başlayalım.


<Window x:Class="WpfFramePage.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>
        <Grid.RowDefinitions>
            <RowDefinition Height="27"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Frame Name="frame1" Grid.Row="1" Background="Azure" NavigationUIVisibility="Hidden" />
        <Button Content="Listele" HorizontalAlignment="Left" Margin="20,5,0,0" VerticalAlignment="Top" Width="75"/>
        <Button Content="Kaydet" HorizontalAlignment="Left" Margin="100,5,0,0" VerticalAlignment="Top" Width="75"/>
    </Grid>
</Window>

<Window x:Class="WpfFramePage.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>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

</Window>

Şimdi Projemize Solution Explorer penceresinde Projemizin üzerinde sağ tıklayarak ‘ adet Page ekleyelim.

Şimdi Page tasarımlarımıza geçiyoruz. Page1 için 1 adet datagridView ekliyoruz. Page2 için ise basit bir kayıt ekleme formu oluşturacağız. Buradaki amacımız Frame içindeki sayfa geçişlerini görmek olacağından sadece gerekli kodları vereceğim.

Page1:

XAML kodları:


<Page x:Class="WpfFramePage.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
	Title="Page1">

    <Grid Background="AliceBlue">
        <DataGrid HorizontalAlignment="Left" Height="159" Margin="10,20,0,0" VerticalAlignment="Top" Width="270"/>
    </Grid>
</Page>

<Page x:Class="WpfFramePage.Page1"

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

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

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="300"

Title="Page1">

</Grid>

</Page>

Page2:

XAML kodları:


<Page x:Class="WpfFramePage.Page2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
	Title="Page2">

    <Grid Background="AliceBlue">
        <TextBox HorizontalAlignment="Left" Height="23" Margin="39,42,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
        <TextBox HorizontalAlignment="Left" Height="23" Margin="39,70,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
        <TextBox HorizontalAlignment="Left" Height="23" Margin="39,98,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
        <Button Content="KAYDET" HorizontalAlignment="Left" Margin="39,141,0,0" VerticalAlignment="Top" Width="120"/>

    </Grid>
</Page>

<Page x:Class="WpfFramePage.Page2"

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

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

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="300"

Title="Page2">

</Grid>

</Page>

Şimdi MainWindow’ da Listele ve Ekle butonları için frame nesnesinin Navigate metodunu kullanarak Page görüntülemesini sağlayacak aşağıdaki kodları oluşturuyoruz.


private void Button_Click(object sender, RoutedEventArgs e)
        {
            Page1 p1 = new Page1();
            frame1.Navigate(p1);
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            Page2 p2 = new Page2();
            frame1.Navigate(p2);
        }

private void Button_Click(object sender, RoutedEventArgs e)

{

Page1 p1 = new Page1();

frame1.Navigate(p1);

}

private void Button_Click_1(object sender, RoutedEventArgs e)

{

Page2 p2 = new Page2();

frame1.Navigate(p2);

}

Örneğimizi çalıştırdığımızda tek bir form üzerinde farklı sayfaların görüntülenmesini sağlamış oluyoruz.
Not:Örneğimizde Button’lar Frame dışındaydı. Eğer Page içerisinde bir Button kullanılıyorsa ve sayfa yönlendirmesi yapılmak isteniyorsa;