{"id":28106,"date":"2024-03-16T09:44:53","date_gmt":"2024-03-16T09:44:53","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/"},"modified":"2024-03-22T12:39:02","modified_gmt":"2024-03-22T12:39:02","slug":"how-to-switch-between-multiple-pages-in-wpf","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/","title":{"rendered":"How to switch between multiple pages in WPF?"},"content":{"rendered":"<p>In WPF, there are several methods available for switching between multiple pages.<\/p>\n<ol>\n<li>By using the Frame control in WPF, you can nest one or more Frame controls in a Window and switch between pages using the navigation functionality of the Frame control. You can use the Navigate method of the Frame to switch between pages by passing the URI of the page or the page object.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ \u5728MainWindow\u7684XAML\u4e2d\u6dfb\u52a0\u4e00\u4e2aFrame\u63a7\u4ef6<\/span>\r\n&lt;Frame x:Name=<span class=\"hljs-string\">\"mainFrame\"<\/span> \/&gt;\r\n\r\n<span class=\"hljs-comment\">\/\/ \u5728\u4ee3\u7801\u4e2d\u4f7f\u7528Navigate\u65b9\u6cd5\u5207\u6362\u9875\u9762<\/span>\r\nmainFrame.Navigate(<span class=\"hljs-keyword\">new<\/span> Page1()); <span class=\"hljs-comment\">\/\/ \u5207\u6362\u5230Page1\u9875\u9762<\/span>\r\nmainFrame.Navigate(<span class=\"hljs-keyword\">new<\/span> Page2()); <span class=\"hljs-comment\">\/\/ \u5207\u6362\u5230Page2\u9875\u9762<\/span>\r\n<\/code><\/pre>\n<ol>\n<li>By using the TabControl control, you can add different page content to the TabItems in a WPF Window and switch between pages by selecting different TabItems in the TabControl.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ \u5728MainWindow\u7684XAML\u4e2d\u6dfb\u52a0\u4e00\u4e2aTabControl\u63a7\u4ef6\uff0c\u4ee5\u53ca\u591a\u4e2aTabItem<\/span>\r\n&lt;TabControl&gt;\r\n    &lt;TabItem Header=<span class=\"hljs-string\">\"Page1\"<\/span>&gt;\r\n        &lt;local:Page1 \/&gt;\r\n    &lt;\/TabItem&gt;\r\n    &lt;TabItem Header=<span class=\"hljs-string\">\"Page2\"<\/span>&gt;\r\n        &lt;local:Page2 \/&gt;\r\n    &lt;\/TabItem&gt;\r\n&lt;\/TabControl&gt;\r\n<\/code><\/pre>\n<ol>\n<li>Using custom widgets: You can create a custom container to manage multiple pages, switching between them by controlling the visibility of the pages.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ \u5728MainWindow\u7684XAML\u4e2d\u6dfb\u52a0\u4e00\u4e2a\u81ea\u5b9a\u4e49\u63a7\u4ef6<\/span>\r\n&lt;local:PageContainer Name=<span class=\"hljs-string\">\"pageContainer\"<\/span> \/&gt;\r\n\r\n<span class=\"hljs-comment\">\/\/ \u81ea\u5b9a\u4e49PageContainer\u63a7\u4ef6\u7684\u4ee3\u7801<\/span>\r\n<span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">PageContainer<\/span> : <span class=\"hljs-title\">ContentControl<\/span>\r\n{\r\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">static<\/span> <span class=\"hljs-keyword\">readonly<\/span> DependencyProperty CurrentPageProperty =\r\n        DependencyProperty.Register(<span class=\"hljs-string\">\"CurrentPage\"<\/span>, <span class=\"hljs-keyword\">typeof<\/span>(UIElement), <span class=\"hljs-keyword\">typeof<\/span>(PageContainer), <span class=\"hljs-keyword\">new<\/span> PropertyMetadata(<span class=\"hljs-literal\">null<\/span>));\r\n\r\n    <span class=\"hljs-keyword\">public<\/span> UIElement CurrentPage\r\n    {\r\n        <span class=\"hljs-keyword\">get<\/span> { <span class=\"hljs-keyword\">return<\/span> (UIElement)GetValue(CurrentPageProperty); }\r\n        <span class=\"hljs-keyword\">set<\/span> { SetValue(CurrentPageProperty, <span class=\"hljs-keyword\">value<\/span>); }\r\n    }\r\n\r\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-title\">PageContainer<\/span>()<\/span>\r\n    {\r\n        <span class=\"hljs-keyword\">this<\/span>.Loaded += PageContainer_Loaded;\r\n    }\r\n\r\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">private<\/span> <span class=\"hljs-keyword\">void<\/span> <span class=\"hljs-title\">PageContainer_Loaded<\/span>(<span class=\"hljs-params\"><span class=\"hljs-built_in\">object<\/span> sender, RoutedEventArgs e<\/span>)<\/span>\r\n    {\r\n        Content = CurrentPage;\r\n    }\r\n}\r\n\r\n<span class=\"hljs-comment\">\/\/ \u5728\u4ee3\u7801\u4e2d\u5207\u6362\u9875\u9762<\/span>\r\npageContainer.CurrentPage = <span class=\"hljs-keyword\">new<\/span> Page1(); <span class=\"hljs-comment\">\/\/ \u5207\u6362\u5230Page1\u9875\u9762<\/span>\r\npageContainer.CurrentPage = <span class=\"hljs-keyword\">new<\/span> Page2(); <span class=\"hljs-comment\">\/\/ \u5207\u6362\u5230Page2\u9875\u9762<\/span>\r\n<\/code><\/pre>\n<p>Here are several common ways to switch between pages, choose the appropriate one based on specific needs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In WPF, there are several methods available for switching between multiple pages. By using the Frame control in WPF, you can nest one or more Frame controls in a Window and switch between pages using the navigation functionality of the Frame control. You can use the Navigate method of the Frame to switch between pages [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-28106","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to switch between multiple pages in WPF? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to switch between multiple pages in WPF?\" \/>\n<meta property=\"og:description\" content=\"In WPF, there are several methods available for switching between multiple pages. By using the Frame control in WPF, you can nest one or more Frame controls in a Window and switch between pages using the navigation functionality of the Frame control. You can use the Navigate method of the Frame to switch between pages [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-16T09:44:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T12:39:02+00:00\" \/>\n<meta name=\"author\" content=\"Ava Mitchell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ava Mitchell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/\"},\"author\":{\"name\":\"Ava Mitchell\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\"},\"headline\":\"How to switch between multiple pages in WPF?\",\"datePublished\":\"2024-03-16T09:44:53+00:00\",\"dateModified\":\"2024-03-22T12:39:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/\"},\"wordCount\":143,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/\",\"name\":\"How to switch between multiple pages in WPF? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T09:44:53+00:00\",\"dateModified\":\"2024-03-22T12:39:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to switch between multiple pages in WPF?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\",\"name\":\"Ava Mitchell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"caption\":\"Ava Mitchell\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to switch between multiple pages in WPF? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/","og_locale":"en_US","og_type":"article","og_title":"How to switch between multiple pages in WPF?","og_description":"In WPF, there are several methods available for switching between multiple pages. By using the Frame control in WPF, you can nest one or more Frame controls in a Window and switch between pages using the navigation functionality of the Frame control. You can use the Navigate method of the Frame to switch between pages [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T09:44:53+00:00","article_modified_time":"2024-03-22T12:39:02+00:00","author":"Ava Mitchell","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Ava Mitchell","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/"},"author":{"name":"Ava Mitchell","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64"},"headline":"How to switch between multiple pages in WPF?","datePublished":"2024-03-16T09:44:53+00:00","dateModified":"2024-03-22T12:39:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/"},"wordCount":143,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/","name":"How to switch between multiple pages in WPF? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T09:44:53+00:00","dateModified":"2024-03-22T12:39:02+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-switch-between-multiple-pages-in-wpf\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to switch between multiple pages in WPF?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64","name":"Ava Mitchell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","caption":"Ava Mitchell"},"url":"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/28106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=28106"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/28106\/revisions"}],"predecessor-version":[{"id":62382,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/28106\/revisions\/62382"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=28106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=28106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=28106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}