刚接触WPF在夫窗口里点击打开一个新的窗口,刚开始学习不会,所以找了一些资料,谢了,.Net / WPF(113404016)群里的朋友衡阳-Aimeast提供的例子也学习了一下。
代码
<
NavigationWindow x:Class
=
"
WpfApplication1.Window1
"
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
Title = " Switch page with transition " Height = " 512 " Icon = " icon1.ico " Width = " 958 " ShowsNavigationUI = " False " Source = " Index.xaml " Navigating = " NavigationWindow_Navigating " ResizeMode = " NoResize " >
</ NavigationWindow >
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
Title = " Switch page with transition " Height = " 512 " Icon = " icon1.ico " Width = " 958 " ShowsNavigationUI = " False " Source = " Index.xaml " Navigating = " NavigationWindow_Navigating " ResizeMode = " NoResize " >
</ NavigationWindow >
Windows.xaml.cs
代码
public
partial
class
Window1 : NavigationWindow
{
public Window1()
{
InitializeComponent();
}
private void NavigationWindow_Navigating( object sender, NavigatingCancelEventArgs e)
{
if (Content != null && ! _allowDirectNavigation)
{
e.Cancel = true ;
_navArgs = e;
this .IsHitTestVisible = false ;
DoubleAnimation da = new DoubleAnimation( 0.3d , new Duration(TimeSpan.FromMilliseconds( 300 )));
da.Completed += FadeOutCompleted;
this .BeginAnimation(OpacityProperty, da);
}
_allowDirectNavigation = false ;
}
private void FadeOutCompleted( object sender, EventArgs e)
{
(sender as AnimationClock).Completed -= FadeOutCompleted;
this .IsHitTestVisible = true ;
_allowDirectNavigation = true ;
switch (_navArgs.NavigationMode)
{
case NavigationMode.New:
if (_navArgs.Uri == null )
{
NavigationService.Navigate(_navArgs.Content);
}
else
{
NavigationService.Navigate(_navArgs.Uri);
}
break ;
case NavigationMode.Back:
NavigationService.GoBack();
break ;
case NavigationMode.Forward:
NavigationService.GoForward();
break ;
case NavigationMode.Refresh:
NavigationService.Refresh();
break ;
}
Dispatcher.BeginInvoke(DispatcherPriority.Loaded,
(ThreadStart) delegate ()
{
DoubleAnimation da = new DoubleAnimation( 1.0d , new Duration(TimeSpan.FromMilliseconds( 200 )));
this .BeginAnimation(OpacityProperty, da);
});
}
private bool _allowDirectNavigation = false ;
private NavigatingCancelEventArgs _navArgs = null ;
}
{
public Window1()
{
InitializeComponent();
}
private void NavigationWindow_Navigating( object sender, NavigatingCancelEventArgs e)
{
if (Content != null && ! _allowDirectNavigation)
{
e.Cancel = true ;
_navArgs = e;
this .IsHitTestVisible = false ;
DoubleAnimation da = new DoubleAnimation( 0.3d , new Duration(TimeSpan.FromMilliseconds( 300 )));
da.Completed += FadeOutCompleted;
this .BeginAnimation(OpacityProperty, da);
}
_allowDirectNavigation = false ;
}
private void FadeOutCompleted( object sender, EventArgs e)
{
(sender as AnimationClock).Completed -= FadeOutCompleted;
this .IsHitTestVisible = true ;
_allowDirectNavigation = true ;
switch (_navArgs.NavigationMode)
{
case NavigationMode.New:
if (_navArgs.Uri == null )
{
NavigationService.Navigate(_navArgs.Content);
}
else
{
NavigationService.Navigate(_navArgs.Uri);
}
break ;
case NavigationMode.Back:
NavigationService.GoBack();
break ;
case NavigationMode.Forward:
NavigationService.GoForward();
break ;
case NavigationMode.Refresh:
NavigationService.Refresh();
break ;
}
Dispatcher.BeginInvoke(DispatcherPriority.Loaded,
(ThreadStart) delegate ()
{
DoubleAnimation da = new DoubleAnimation( 1.0d , new Duration(TimeSpan.FromMilliseconds( 200 )));
this .BeginAnimation(OpacityProperty, da);
});
}
private bool _allowDirectNavigation = false ;
private NavigatingCancelEventArgs _navArgs = null ;
}
然后我们就开始做首页
index.xaml
代码
<
Page x:Class
=
"
WpfApplication1.index
"
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
Title = " index " >
< Page.Background >
< ImageBrush ImageSource = " Resources/pdc.jpg " Stretch = " Fill " ></ ImageBrush >
</ Page.Background >
< Canvas Height = " 512 " Width = " 958 " >
< Image Source = " Resources/clock256.png " Canvas.Left = " 567.313 " Stretch = " Fill " Width = " 80 " Height = " 80.024 " Canvas.Top = " 312.951 " MouseLeftButtonDown = " button1_Click " Cursor = " Hand " />
< Image Source = " Resources/music256.png " Canvas.Left = " 680 " Canvas.Top = " 312.951 " Height = " 80 " Stretch = " Fill " Width = " 80.024 " MouseLeftButtonDown = " button2_Click " Cursor = " Hand " />
< Image Source = " Resources/movie256.png " Canvas.Left = " 790 " Canvas.Top = " 312.951 " Height = " 80 " Stretch = " Fill " Width = " 80.024 " MouseLeftButtonDown = " button3_Click " Cursor = " Hand " />
< Label Canvas.Left = " 147 " Canvas.Top = " 218.637 " Height = " 91 " Name = " label1 " Width = " 242.93 " Foreground = " White " FontSize = " 60 " > How To </ Label >
< Label Canvas.Left = " 151 " Canvas.Top = " 315.809 " Height = " 28 " Name = " label2 " Width = " 174.338 " Foreground = " White " > 演示如何在多Page间的切换 </ Label >
< Label Canvas.Left = " 151 " Canvas.Top = " 338 " Height = " 28 " Name = " label3 " Width = " 204.347 " Foreground = " White " > 同时,在Page切换间加入Fade过渡 </ Label >
< Label Canvas.Left = " 151 " Canvas.Top = " 362 " Height = " 28 " Name = " label4 " Width = " 204.347 " Foreground = " White " > May it helps. </ Label >
< Label Canvas.Left = " 450 " Canvas.Top = " 340 " Height = " 28 " Name = " label5 " Width = " 204.347 " Foreground = " White " > 点击打开新页面 >></ Label >
</ Canvas >
</ Page >
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
Title = " index " >
< Page.Background >
< ImageBrush ImageSource = " Resources/pdc.jpg " Stretch = " Fill " ></ ImageBrush >
</ Page.Background >
< Canvas Height = " 512 " Width = " 958 " >
< Image Source = " Resources/clock256.png " Canvas.Left = " 567.313 " Stretch = " Fill " Width = " 80 " Height = " 80.024 " Canvas.Top = " 312.951 " MouseLeftButtonDown = " button1_Click " Cursor = " Hand " />
< Image Source = " Resources/music256.png " Canvas.Left = " 680 " Canvas.Top = " 312.951 " Height = " 80 " Stretch = " Fill " Width = " 80.024 " MouseLeftButtonDown = " button2_Click " Cursor = " Hand " />
< Image Source = " Resources/movie256.png " Canvas.Left = " 790 " Canvas.Top = " 312.951 " Height = " 80 " Stretch = " Fill " Width = " 80.024 " MouseLeftButtonDown = " button3_Click " Cursor = " Hand " />
< Label Canvas.Left = " 147 " Canvas.Top = " 218.637 " Height = " 91 " Name = " label1 " Width = " 242.93 " Foreground = " White " FontSize = " 60 " > How To </ Label >
< Label Canvas.Left = " 151 " Canvas.Top = " 315.809 " Height = " 28 " Name = " label2 " Width = " 174.338 " Foreground = " White " > 演示如何在多Page间的切换 </ Label >
< Label Canvas.Left = " 151 " Canvas.Top = " 338 " Height = " 28 " Name = " label3 " Width = " 204.347 " Foreground = " White " > 同时,在Page切换间加入Fade过渡 </ Label >
< Label Canvas.Left = " 151 " Canvas.Top = " 362 " Height = " 28 " Name = " label4 " Width = " 204.347 " Foreground = " White " > May it helps. </ Label >
< Label Canvas.Left = " 450 " Canvas.Top = " 340 " Height = " 28 " Name = " label5 " Width = " 204.347 " Foreground = " White " > 点击打开新页面 >></ Label >
</ Canvas >
</ Page >
放了三张图片分别点开不同的页面然运用了
NavigationWindow 类
备注
NavigationWindow 派生自 Window,扩展了导航和显示内容的功能。
内容可以是任何 .NET Framework 对象或 HTML 文件。 但是,一般而言,Page 对象是将内容打包以便导航的首选方式。
通过用所需内容的 URI 来设置 Source 属性,可以导航到内容。 此外,也可以使用 Navigate 方法的以下重载之一来导航到内容:
通过 URI 导航到内容时,NavigationWindow 将返回一个包含该内容的对象。
.cs
代码
private
void
button1_Click(
object
sender, MouseButtonEventArgs e)
{
NavigationService.Navigate( new Uri( " Page1.xaml " , UriKind.Relative));
}
private void button2_Click( object sender, MouseButtonEventArgs e)
{
NavigationService.Navigate( new Uri( " Page2.xaml " , UriKind.Relative));
}
private void button3_Click( object sender, MouseButtonEventArgs e)
{
NavigationService.Navigate( new Uri( " Page3.xaml " , UriKind.Relative));
}
{
NavigationService.Navigate( new Uri( " Page1.xaml " , UriKind.Relative));
}
private void button2_Click( object sender, MouseButtonEventArgs e)
{
NavigationService.Navigate( new Uri( " Page2.xaml " , UriKind.Relative));
}
private void button3_Click( object sender, MouseButtonEventArgs e)
{
NavigationService.Navigate( new Uri( " Page3.xaml " , UriKind.Relative));
}
2、建立第一个PAGE1页
page1.xaml
代码
<
Page x:Class
=
"
WpfApplication1.Page1
"
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
Title = " Page1 " Height = " 512 " Width = " 958 " MouseLeftButtonDown = " Page_MouseLeftButtonDown " >
< Page.Background >
< ImageBrush ImageSource = " Resources/CA_16-9-2009.jpg " ></ ImageBrush >
</ Page.Background >
< Canvas >
< Label Canvas.Left = " 62 " Canvas.Top = " 41 " Width = " 242 " Height = " 91 " Foreground = " White " FontSize = " 60 " > Page 1页面 </ Label >
</ Canvas >
</ Page >
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
Title = " Page1 " Height = " 512 " Width = " 958 " MouseLeftButtonDown = " Page_MouseLeftButtonDown " >
< Page.Background >
< ImageBrush ImageSource = " Resources/CA_16-9-2009.jpg " ></ ImageBrush >
</ Page.Background >
< Canvas >
< Label Canvas.Left = " 62 " Canvas.Top = " 41 " Width = " 242 " Height = " 91 " Foreground = " White " FontSize = " 60 " > Page 1页面 </ Label >
</ Canvas >
</ Page >
Page1.xaml.cs后台,我们点击完后显示回到首页
代码
///
<summary>
/// Page1.xaml 的交互逻辑
/// NavigationService 封装了在浏览器样式的导航上下文中下载内容的能力
/// 通过 URI 导航到内容时,NavigationService 将返回一个包含该内容的对象。
/// </summary>
public partial class Page1 : Page
{
public Page1()
{
InitializeComponent();
}
private void Page_MouseLeftButtonDown( object sender, MouseButtonEventArgs e)
{
NavigationService.Navigate( new Uri( " Index.xaml " , UriKind.Relative));
}
}
/// Page1.xaml 的交互逻辑
/// NavigationService 封装了在浏览器样式的导航上下文中下载内容的能力
/// 通过 URI 导航到内容时,NavigationService 将返回一个包含该内容的对象。
/// </summary>
public partial class Page1 : Page
{
public Page1()
{
InitializeComponent();
}
private void Page_MouseLeftButtonDown( object sender, MouseButtonEventArgs e)
{
NavigationService.Navigate( new Uri( " Index.xaml " , UriKind.Relative));
}
}
后面的首页代码和Page1页面效果一样,只不过图片不同,这样可以轻松的实例WPF多窗口切换效果