12주차 TwoWindows , 페이지 내비게이션

이번주차를 시작하기 전에는 미리 알아두어야 할 것이 있다.

 

Modal과 Modaless의 차이점을 알아야 한다

- Modal 창이 열리면 기존에 있던 창은 사용하지 못한다.

Modaless창이 열리면 기존에 있던 창이 사용가능하다는 

차이점을 알아두어야 한다.

 

디자인 코드 

<Window x:Class="TwoWindows.MainWindow“
   …
   Title="Two Windows" Height="250" Width="400">
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" 
	Orientation="Horizontal">
    <Button x:Name="btnShow" Content="Show()-Modaless" 
	Height="40" Width="120" Click="btnShow_Click"/>
    <TextBlock Width="30"/>
    <Button x:Name="btnShowDialog" Content="ShowDialog()-Modal" 
	Height="40" Width="120" Click="btnShowDialog_Click"/>
  </StackPanel>
</Window>

 

CS코드 

    private void btnShow_Click(object sender, RoutedEventArgs e)
    {
      Window1 w = new Window1();
      w.Show();		// 모달리스
    }

    private void btnShowDialog_Click(object sender, RoutedEventArgs e)
    {
      Window1 w = new Window1();	
      w.ShowDialog();		// 모달
    }

 

결과 창

 

 

첫번째 버튼을 누르면 기존 화면이 사용가능하지만 

두번재 버튼은 기존 화면이 사용 불가능해진다. 

 

 

 

페이지 네비게이션 

 

 

 

본 페이지는 Frame Source로 지명 해준다 .

 

<Window x:Class="Pages.MainWindow"
        	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	...
	Title="Login" Height="500" Width="500">
  <Grid>
    <Frame Source="/Page1.xaml"/>
  </Grid>
</Window>

 

 

Page 1 디자인 코드 및 CS 코드 

<Page x:Class="Pages.Page1"
      d:DesignHeight="300" d:DesignWidth="400"
      Title="Page1">
  <Grid>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
      <Button x:Name="btnInfo" Content="Information" Margin="20 0 10 0" 
	Height="50" Width="88" Click="btnInfo_Click"/>
      <Button x:Name="btnLogin" Content="ID/Password" Margin="10 0 10 0" 
	Height="50" Width="88" Click="btnLogin_Click"/>
      <Button x:Name="btnSignUp" Content="SignUp" Margin="10 0 20 0" 
	Height="50" Width="88" Click="btnSignUp_Click"/>
    </StackPanel>
  </Grid>
</Page>

private void btnInfo_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/Email.xaml", UriKind.Relative));
}

private void btnLogin_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/Login.xaml", UriKind.Relative));
}

private void btnSignUp_Click(object sender, RoutedEventArgs e)
{
  NavigationService.Navigate(new Uri("/SignUp.xaml", UriKind.Relative));
}

 

페이지 1에는 information 과 Login , Sign up 버튼 세개를 디자인 해놓는다. 

또한 CS코드로

 

  NavigationService.Navigate(new Uri("/Email.xaml", UriKind.Relative));

 

(이동할 페이지).xaml 로 하여 페이지 이동을 만들어 준다.

 

Information 디자인 코드 

<Page x:Class="Pages.Page2“
      ...
      d:DesignHeight="300" d:DesignWidth="400"
      Title="Page2">
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

    <TextBlock HorizontalAlignment="Center" FontSize="20" FontWeight="Bold" 
	Margin="30">Information</TextBlock>

    <StackPanel Orientation="Horizontal" Margin="10">
      <TextBlock Width="50" TextAlignment="Right">Email:</TextBlock>
      <TextBlock Width="30"/>
      <TextBox Width="150"></TextBox>
    </StackPanel>

    <StackPanel Orientation="Horizontal" Margin="10">
      <TextBlock Width="50" TextAlignment="Right">Name:</TextBlock>
      <TextBlock Width="30"/>
      <TextBox Width="150"></TextBox>
    </StackPanel>
  </StackPanel>
</Page>

 

Login 디자인코드 

<Page x:Class="Pages.Page3"
      d:DesignHeight="300" d:DesignWidth="400“ Title="Login">
  <Grid>
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
      <TextBlock HorizontalAlignment="Center" FontSize="20" 
	FontWeight="Bold" Margin="30">Login</TextBlock>
      <StackPanel Orientation="Horizontal" Margin="10">
        <TextBlock Width="50" TextAlignment="Right">Id:</TextBlock>
        <TextBlock Width="30"/>
        <TextBox Width="150"></TextBox>
      </StackPanel>
      <StackPanel Orientation="Horizontal" Margin="10">
        <TextBlock Width="50" TextAlignment="Right">Password:</TextBlock>
        <TextBlock Width="30"/>
        <PasswordBox Width="150"></PasswordBox>
      </StackPanel>
      <StackPanel Orientation="Horizontal" Margin="10">
        <TextBlock Width="50" TextAlignment="Right"></TextBlock>
        <TextBlock Width="30"/>
        <Button Width="150" Height="24">Login</Button>
      </StackPanel>
    </StackPanel>
  </Grid>
</Page>

 

 

 

Sign up 디자인 코드 

 

<Page x:Class="Pages.SignUp“
      ...
      d:DesignHeight="300" d:DesignWidth="400"
      Title="SignUp">

  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock HorizontalAlignment="Center" FontSize="20" FontWeight="Bold" 
	Margin="20">SignUp</TextBlock>
    <StackPanel Orientation="Horizontal" Margin="10">
      <TextBlock Width="60" TextAlignment="Right">Id:</TextBlock>
      <TextBlock Width="20"/>
      <TextBox Width="150"></TextBox>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Margin="10">
      <TextBlock Width="60" TextAlignment="Right">Password:</TextBlock>
      <TextBlock Width="20"/>
      <TextBox Width="150"></TextBox>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Margin="10" ...></StackPanel>
    <StackPanel Orientation="Horizontal" Margin="10" ...></StackPanel>
    <StackPanel Orientation="Horizontal" Margin="10" ...></StackPanel>
    <StackPanel Orientation="Horizontal" Margin="10">
      <TextBlock Width="60" TextAlignment="Right"></TextBlock>
      <TextBlock Width="20"/>
      <Button Width="150" Height="24">SignUp</Button>
    </StackPanel>
  </StackPanel>
</Page>

결과 창