Wpf Frame Navigate

Frame を貼り付けてナビゲートします。

前田稔の超初心者のプログラム入門

プログラムの説明

  1. Frame は、ナビゲーションをサポートするコンテンツコントロールです。
    ナビゲートするページがフレームコントロールの中に表示され、自動的に Next, Back のリンクボタンが設定されます。
    新規プロジェクトから[WPF アプリ(.NET Framework)] を構築します。
    規定値で [プロジェクト名=WpfApp1][namespace=WpfAppl] になっています。
  2. Navigate(遷移)するページを作成します。
    メニューの[プロジェクト][新しい項目の追加]から[ページ(WPF)]を選んで2枚追加します。
    Page1.xaml, Page2.xaml をプロジェクトのソリューションエクスプローラに追加されます。
    プロジェクトの作成とページの追加は C# Store Application を参照して下さい。
  3. Page1.xaml には赤色の TextBox を貼り付けます。
    Page1.xaml のデザイン画面から操作する方法もありますが、直接ソースコードを書き換えてみます。
    <Page x:Class="WpfApp1.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" 
          xmlns:local="clr-namespace:WpfApp1"
          mc:Ignorable="d" 
          d:DesignHeight="450" d:DesignWidth="800"
          Title="Page1">
        <Grid>
            <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"
                Margin="50,50,160.100,0" Height="24" Width="120" Background="#FFF50E0E"/>
        </Grid>
    </Page>
    
  4. Page2.xaml には緑色の TextBox を貼り付けます。
        <Grid>
            <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"
                Margin="50,50,160.100,0" Height="24" Width="120" Background="#FF0EF50E"/>
        </Grid>
    
  5. MainWindow.xaml のデザイン画面を表示して Button と Frame を貼り付けて座標とサイズを整えます。
    ボタンをクリックするとナビゲートするページがフレームコントロールの中に表示されます。
  6. Frame の [共通][Source] から Page1.xaml を選択します。
  7. MainWindow.xaml.cs にボタンクリックのイベントハンドラを設定します。
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            frame.Source = new Uri("Page2.xaml", UriKind.Relative);
        }
    
  8. コンパイル&実行すると Frame に Page1 が表示されます。
    ボタンをクリックすると Frame に Page2 が表示されます。
    ナビゲートすると、左右の矢印アイコン(Next, Back)が設定され、←のクリックで元のページに戻ります。

超初心者のプログラム入門(C# Frame Work)