重新想象 Windows 8 Store Apps (3)
[源码下载]重新想象 Windows 8 Store Apps (3) - 控件之内容控件: ToolTip, Frame, AppBar, ContentControl, ContentPresenter; 容器控件: Border, Viewbox, Popup
作者：webabcd
介绍
重新想象 Windows 8 Store Apps 之内容控件
[*]ToolTip - 提示框控件
[*]Frame - 框架控件，用于导航内容
[*]AppBar - 应用程序栏控件
[*]ContentControl ContentPresenter - ContentPresenter 用来呈现 ContentControl 的 Content
重新想象 Windows 8 Store Apps 之容器控件
[*]Border - 边框控件
[*]Viewbox - 控制子元素如何拉伸的容器控件
[*]Popup - 弹出框控件
示例
1、ToolTip 的 Demo
ToolTipDemo.xaml
2、Frame 的 Demo
Frame/Demo.xaml
Frame/Demo.xaml.cs
/*
* Frame - 框架控件，用于导航内容
* BackStackDepth - 返回堆栈内的条目数
* CanGoBack - 可否向后导航
* CanGoForward - 可否向前导航
* GoBack() - 向后导航
* GoForward() - 向前导航
* Navigate() - 导航到指定的 Type，可以传递一个 object 类型的参数
* SourcePageType - 获取或设置 Frame 当前内容的 Type
*
* CacheSize - 所支持的最大缓存页数，默认值 10
* CacheSize 与被导航的页的 Page.NavigationCacheMode 属性相关（详见 Frame1.xaml.cs 和 Frame2.xaml.cs 的示例代码）
* NavigationCacheMode.Disabled - 每次导航到页时，都重新实例化此页，默认值（CacheSize 无效）
* NavigationCacheMode.Enabled - 每次导航到页时，首先缓存此页，此时如果已缓存的页数大于 CacheSize，则按先进先出的原则丢弃最早的缓存页（CacheSize 有效）
* NavigationCacheMode.Required - 每次导航到页时，都缓存此页（CacheSize 无效）
*
* Navigating - 导航开始时触发的事件
* Navigated - 导航完成后触发的事件
* NavigationFailed - 导航失败时触发的事件
* NavigationStopped - 导航过程中，又请求了一个新的导航时触发的事件
*
* GetNavigationState() - 获取 Frame 当前的导航状态，返回字符串类型的数据，仅当导航无参数传递或只传递简单参数（int, char, string, guid, bool 等）时有效
* SetNavigationState(string navigationState) - 将 Frame 还原到指定的导航状态
*
*
*
* NavigationEventArgs - 导航的事件参数
* NavigationMode - 导航方式，只读（Windows.UI.Xaml.Navigation.NavigationMode 枚举）
* New, Back, Forward, Refresh
* Parameter - 传递给导航目标页的参数，只读
* SourcePageType - 导航的目标页的类型，只读
*/
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
namespace XamlDemo.Controls.Frame
{
public sealed partial class Demo : Page
{
public Demo()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
frame.Navigated += frame_Navigated;
}
void frame_Navigated(object sender, NavigationEventArgs e)
{
lblMsg.Text = "CacheSize: " + frame.CacheSize;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "BackStackDepth: " + frame.BackStackDepth;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "CanGoBack: " + frame.CanGoBack;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "CanGoForward: " + frame.CanGoForward;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "CurrentSourcePageType: " + frame.CurrentSourcePageType;
lblMsg.Text += Environment.NewLine;
// 显示 frame 的当前的导航状态，记录此值后，可以在需要的时候通过 SetNavigationState() 将 frame 还原到指定的导航状态
lblMsg.Text += "NavigationState: " + frame.GetNavigationState();
}
private void btnGotoFrame1_Click_1(object sender, RoutedEventArgs e)
{
frame.Navigate(typeof(Frame1), "param1");
}
private void btnGotoFrame2_Click_1(object sender, RoutedEventArgs e)
{
frame.SourcePageType = typeof(Frame2);
}
private void btnBack_Click_1(object sender, RoutedEventArgs e)
{
if (frame.CanGoBack)
frame.GoBack();
}
private void btnForward_Click_1(object sender, RoutedEventArgs e)
{
if (frame.CanGoForward)
frame.GoForward();
}
}
}
Frame/Frame1.xaml.cs
using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
namespace XamlDemo.Controls.Frame
{
public sealed partial class Frame1 : Page
{
public Frame1()
{
this.InitializeComponent();
/*
* Page.NavigationCacheMode - 使用 Frame 导航到此页面时，页面的缓存模式
* Disabled - 每次导航到页时，都重新实例化此页，默认值（Frame.CacheSize 无效）
* Enabled - 每次导航到页时，首先缓存此页，此时如果已缓存的页数大于 Frame.CacheSize，则按先进先出的原则丢弃最早的缓存页（Frame.CacheSize 有效）
* Required - 每次导航到页时，都缓存此页（Frame.CacheSize 无效）
*/
this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
this.Loaded += Frame1_Loaded;
}
void Frame1_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "Loaded: " + DateTime.Now.ToString();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "OnNavigatedTo: " + DateTime.Now.ToString();
}
}
}
Frame/Frame2.xaml.cs
using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
namespace XamlDemo.Controls.Frame
{
public sealed partial class Frame2 : Page
{
public Frame2()
{
this.InitializeComponent();
/*
* Page.NavigationCacheMode - 使用 Frame 导航到此页面时，页面的缓存模式
* Disabled - 每次导航到页时，都重新实例化此页，默认值（Frame.CacheSize 无效）
* Enabled - 每次导航到页时，首先缓存此页，此时如果已缓存的页数大于 Frame.CacheSize，则按先进先出的原则丢弃最早的缓存页（Frame.CacheSize 有效）
* Required - 每次导航到页时，都缓存此页（Frame.CacheSize 无效）
*/
this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
this.Loaded += Frame2_Loaded;
}
void Frame2_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "Loaded: " + DateTime.Now.ToString();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "OnNavigatedTo: " + DateTime.Now.ToString();
}
}
}
3、AppBar 的 Demo
AppBarDemo.xaml
AppBarDemo.xaml.cs
/*
* AppBar - 应用程序栏控件
* IsOpen - 是否打开 AppBar
* IsSticky - 是否 Sticky
* false - 显示 AppBar 后，如果用户触摸了非 AppBar 区域则 AppBar 会自动隐藏，默认值
* true - 显示 AppBar 后，即使用户触摸了非 AppBar 区域，AppBar 也不会自动隐藏，需要通过底部边缘手势或者右键或者win+z或者api使其隐藏
* Opened - AppBar 打开后所触发的事件
* Closed - AppBar 关闭后所触发的事件
*/
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
namespace XamlDemo.Controls
{
public sealed partial class AppBarDemo : Page
{
public AppBarDemo()
{
this.InitializeComponent();
}
private void chkIsSticky_Checked_1(object sender, RoutedEventArgs e)
{
appBar.IsSticky = true;
}
private void chkIsSticky_Unchecked_1(object sender, RoutedEventArgs e)
{
appBar.IsSticky = false;
}
private void btnOpen_Click_1(object sender, RoutedEventArgs e)
{
appBar.IsOpen = true;
}
private void btnClose_Click_1(object sender, RoutedEventArgs e)
{
appBar.IsOpen = false;
}
}
}
4、ContentControl, ContentPresenter 的 Demo
ContentControlDemo.xaml
5、Border 的 Demo
BorderDemo.xaml
6、Viewbox 的 Demo
ViewboxDemo.xaml
7、Popup 的 Demo
PopupDemo.xaml
PopupDemo.xaml.cs
/*
* Popup - 弹出框
* IsOpen - 弹出框是否是打开的状态
* Opened - 弹出框打开时所触发的事件
* Closed - 弹出框关闭时所触发的事件
*/
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;
namespace XamlDemo.Controls
{
public sealed partial class PopupDemo : Page
{
// 仿 toast 的 Popup
private Popup _popupToast = new Popup();
public PopupDemo()
{
this.InitializeComponent();
}
private void btnOpenPopup_Click_1(object sender, RoutedEventArgs e)
{
if (!popup.IsOpen)
popup.IsOpen = true;
}
private void btnClosePopup_Click_1(object sender, RoutedEventArgs e)
{
if (popup.IsOpen)
popup.IsOpen = false;
}
private void btnOpenPopupToast_Click_1(object sender, RoutedEventArgs e)
{
if (!_popupToast.IsOpen)
{
// 设置 Popup 中的内容
Border border = new Border();
border.BorderBrush = new SolidColorBrush(Colors.Red);
border.BorderThickness = new Thickness(1);
border.Background = new SolidColorBrush(Colors.Blue);
border.Width = 600;
border.Height = 100;
border.Child = new TextBlock() { Text = "我是 Popup", FontSize = 24.667, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center };
// 设置 Popup 的相关属性
_popupToast.IsLightDismissEnabled = true;
_popupToast.Child = border;
// 通过 HorizontalOffset 和 VerticalOffset 来指定 Popup 的显示位置（如果不将 Popup 添加到某个容器内，则 Popup 的默认显示位置在屏幕左上角）
_popupToast.VerticalOffset = 100d;
_popupToast.ChildTransitions = new TransitionCollection() { new PaneThemeTransition() { Edge = EdgeTransitionLocation.Left } };
_popupToast.IsOpen = true;
}
}
private void btnClosePopupToast_Click_1(object sender, RoutedEventArgs e)
{
if (_popupToast.IsOpen)
_popupToast.IsOpen = false;
}
}
}
OK
[源码下载]
页:
[1]