设为首页 收藏本站
云服务器等爆品抢先购,低至4.2元/月
查看: 548|回复: 0

[经验分享] 背水一战 Windows 10 (35)

[复制链接]

尚未签到

发表于 2017-6-28 11:23:29 | 显示全部楼层 |阅读模式
  [源码下载]




背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout  
作者:webabcd

介绍
背水一战 Windows 10 之 控件(弹出类)


  • FlyoutBase
  • Flyout
  • MenuFlyout
  
示例
1、FlyoutBase(基类) 的示例
Controls/FlyoutControl/FlyoutBaseDemo.xaml



<Page
x:Class="Windows10.Controls.FlyoutControl.FlyoutBaseDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.FlyoutControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<!--
通过资源的方式定义 flyout 的样式和内容
-->
<Flyout x:Key="MyFlyout">
<StackPanel>
<TextBlock Text="我是 Flyout 中的内容" />
</StackPanel>
</Flyout>
</Page.Resources>
<Grid Background="Transparent">
<StackPanel Margin="10 0 10 10">
<!--
Flyout - 弹出框控件,继承自 FlyoutBase,下面介绍 FlyoutBase 的相关知识点
Placement - 弹出框的显示位置
Top - 目标元素的上边(默认值)
Bottom - 目标元素的下边
Left - 目标元素的左边
Right - 目标元素的右边
Full - 屏幕中央
Opening - 弹出框准备显示时触发的事件
Opened - 弹出框显示之后触发的事件
Closed - 弹出框隐藏之后触发的事件
-->

<!--
FlyoutBase 的用法 1
部分控件本身有 Flyout 属性,比如 Button 控件,可以通过其 Flyout 属性直接为其绑定 FlyoutBase 控件及行为(单击按钮后就会显示此 FlyoutBase 控件)
-->
<Button Name="button1" Margin="5" Content="按我弹出 Flyout">
<Button.Flyout>
<Flyout x:Name="flyout1" Placement="Right" Opening="flyout1_Opening" Opened="flyout1_Opened" Closed="flyout1_Closed">
<StackPanel>
<TextBlock>我是 Flyout 中的内容</TextBlock>
<Button x:Name="button1CloseFlyout" Click="button1CloseFlyout_Click">隐藏 Flyout</Button>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<TextBlock Name="lblMsg1" Margin="5" />

<!--
FlyoutBase 的用法 2
通过附加属性 FlyoutBase.AttachedFlyout 为指定的控件绑定 FlyoutBase 控件(何时显示需要在 CodeBehind 中控制)
-->
<TextBlock Name="textBlock1" Margin="5" Text="按我弹出 Flyout" Tapped="textBlock1_Tapped" FontSize="18">
<FlyoutBase.AttachedFlyout>
<Flyout Placement="Right">
<TextBlock Text="我是 Flyout 中的内容" />
</Flyout>
</FlyoutBase.AttachedFlyout>
</TextBlock>

<!--
FlyoutBase 的用法 3
此用法同用法 2,不同之处在于这里把 flyout 的样式和内容放到资源中定义了
-->
<TextBlock Name="textBlock2" Margin="5" Text="按我弹出 Flyout" Tapped="textBlock2_Tapped" FontSize="18"
FlyoutBase.AttachedFlyout="{StaticResource MyFlyout}" />

<!--
FlyoutBase 的用法 4
在 CodeBehind 中创建 FlyoutBase 控件后,将其绑定到指定的控件上,并显示
-->
<TextBlock Name="textBlock3" Margin="5" Text="按我弹出 Flyout" Tapped="textBlock3_Tapped" FontSize="18" />

<!--
FlyoutBase 的用法 5
在 CodeBehind 中创建 FlyoutBase 控件后,在不设置绑定的情况下,使其显示在指定的控件上
-->
<TextBlock Name="textBlock4" Margin="5" Text="按我弹出 Flyout" Tapped="textBlock4_Tapped" FontSize="18" />
</StackPanel>
</Grid>
</Page>
  Controls/FlyoutControl/FlyoutBaseDemo.xaml.cs



/*
* FlyoutBase(基类) - 弹出框控件基类(继承自 DependencyObject, 请参见 /Controls/BaseControl/DependencyObjectDemo.xaml)
*     Hide() - 隐藏 Flyout
*     ShowAt(FrameworkElement targetElement) - 在指定的 FrameworkElement 上显示指定的 Flyout
*
*     FlyoutBase.SetAttachedFlyout(FrameworkElement element, FlyoutBase value) - 在指定的 FrameworkElement 上绑定指定的 Flyout
*     FlyoutBase.GetAttachedFlyout(FrameworkElement element) - 获取指定的 FrameworkElement 上绑定的 Flyout
*     FlyoutBase.ShowAttachedFlyout(FrameworkElement flyoutOwner) - 在指定的 FrameworkElement 上显示其绑定的 Flyout
*
*
* 注:点击 FlyoutBase 外部的话,FlyoutBase 会自动关闭
*
* 另外,在 uwp 中不再支持 SettingsFlyout 了
*/
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Input;
namespace Windows10.Controls.FlyoutControl
{
public sealed partial class FlyoutBaseDemo : Page
{
public FlyoutBaseDemo()
{
this.InitializeComponent();
}

private void flyout1_Opening(object sender, object e)
{
lblMsg1.Text = "Flyout 打开中";
}
private void flyout1_Opened(object sender, object e)
{
lblMsg1.Text = "Flyout 已打开";
}
private void flyout1_Closed(object sender, object e)
{
lblMsg1.Text = "Flyout 已关闭";
}
private void button1CloseFlyout_Click(object sender, RoutedEventArgs e)
{
flyout1.Hide();
}

private void textBlock1_Tapped(object sender, TappedRoutedEventArgs e)
{
FlyoutBase.ShowAttachedFlyout(textBlock1);
}

private void textBlock2_Tapped(object sender, TappedRoutedEventArgs e)
{
FlyoutBase flyout = FlyoutBase.GetAttachedFlyout(textBlock2);
flyout.Placement = FlyoutPlacementMode.Right;
FlyoutBase.ShowAttachedFlyout(textBlock2);
}

// 在 CodeBehind 中创建 FlyoutBase 控件后,将其绑定到指定的控件上,并显示
private void textBlock3_Tapped(object sender, TappedRoutedEventArgs e)
{
TextBlock flyoutContent = new TextBlock();
flyoutContent.Text = "我是 Flyout 中的内容";
Flyout flyout = new Flyout();
flyout.Placement = FlyoutPlacementMode.Right;
flyout.Content = flyoutContent;
FlyoutBase.SetAttachedFlyout(textBlock3, flyout);
FlyoutBase.ShowAttachedFlyout(textBlock3);
}

// 在 CodeBehind 中创建 FlyoutBase 控件后,在不设置绑定的情况下,使其显示在指定的控件上
private void textBlock4_Tapped(object sender, TappedRoutedEventArgs e)
{
TextBlock flyoutContent = new TextBlock();
flyoutContent.Text = "我是 Flyout 中的内容";
Flyout flyout = new Flyout();
flyout.Placement = FlyoutPlacementMode.Right;
flyout.Content = flyoutContent;
flyout.ShowAt(textBlock4);
}
}
}
  
2、Flyout 的示例
Controls/FlyoutControl/FlyoutDemo.xaml



<Page
x:Class="Windows10.Controls.FlyoutControl.FlyoutDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.FlyoutControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Transparent">
<StackPanel Margin="10 0 10 10">
<!--
Flyout - 弹出框控件
FlyoutPresenterStyle - 用于定义 Flyout 的样式
-->
<!--
xaml 方式指定 flyout
-->
<Button Name="button1" Margin="5" Content="按我弹出 Flyout">
<Button.Flyout>
<Flyout Placement="Right">
<StackPanel>
<TextBlock Text="我是 Flyout 中的内容" Foreground="White" FontSize="24" />
</StackPanel>
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="ScrollViewer.ZoomMode" Value="Enabled"/>
<Setter Property="Background" Value="Blue"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="BorderThickness" Value="10"/>
<Setter Property="MinHeight" Value="300"/>
<Setter Property="MinWidth" Value="300"/>
</Style>
</Flyout.FlyoutPresenterStyle>
</Flyout>
</Button.Flyout>
</Button>
<!--
code-behind 方式指定 flyout
-->
<TextBlock Name="textBlock1" Margin="5" Text="按我弹出 Flyout" Tapped="textBlock1_Tapped" FontSize="18" />
</StackPanel>
</Grid>
</Page>
  Controls/FlyoutControl/FlyoutDemo.xaml.cs



/*
* Flyout - 弹出框控件(继承自 FlyoutBase, 请参见 /Controls/FlyoutControl/FlyoutBaseDemo.xaml)
*     Content - 获取或设置 Flyout 的内容
*/
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Input;
namespace Windows10.Controls.FlyoutControl
{
public sealed partial class FlyoutDemo : Page
{
public FlyoutDemo()
{
this.InitializeComponent();
}
private void textBlock1_Tapped(object sender, TappedRoutedEventArgs e)
{
TextBlock flyoutContent = new TextBlock();
flyoutContent.Text = "我是 Flyout 中的内容";
Flyout flyout = new Flyout();
flyout.Placement = FlyoutPlacementMode.Right;
flyout.Content = flyoutContent;
flyout.ShowAt(textBlock1);
}
}
}
  
3、MenuFlyout 的示例
Controls/FlyoutControl/MenuFlyoutDemo.xaml



<Page
x:Class="Windows10.Controls.FlyoutControl.MenuFlyoutDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.FlyoutControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<!--
MenuFlyout - 菜单弹出框控件
Items - MenuFlyout 中包含的 item(MenuFlyoutItem, ToggleMenuFlyoutItem, MenuFlyoutSeparator)
-->
<MenuFlyout x:Key="MyMenuFlyout" Placement="Right">
<!--
MenuFlyoutItem - MenuFlyout 中的 item
Text, Click, Command, CommandParameter
ToggleMenuFlyoutItem - MenuFlyout 中的可以 toggle 的 item
IsChecked, Text, Click, Command, CommandParameter
MenuFlyoutSubItem - 支持 sub item 的 item
Text, Items
MenuFlyoutSeparator - MenuFlyout 中的分隔符
-->
<MenuFlyoutItem Name="menuFlyoutItem1" Text="MenuFlyoutItem" Click="menuFlyoutItem1_Click" />
<MenuFlyoutSeparator/>
<ToggleMenuFlyoutItem Name="toggleMenuFlyoutItem1" Text="ToggleMenuFlyoutItem1" IsChecked="False" Click="toggleMenuFlyoutItem1_Click" />
<ToggleMenuFlyoutItem Name="toggleMenuFlyoutItem2" Text="ToggleMenuFlyoutItem2" IsChecked="True" Click="toggleMenuFlyoutItem2_Click" />
<MenuFlyoutSubItem Text="item">
<MenuFlyoutItem Text="item 1" />
<MenuFlyoutItem Text="item 2" />
<MenuFlyoutSubItem Text="item 3">
<MenuFlyoutItem Text="item 3 - 1" />
<MenuFlyoutItem Text="item 3 - 2" />
</MenuFlyoutSubItem>
</MenuFlyoutSubItem>
<!--
MenuFlyout.MenuFlyoutPresenterStyle - 用于定义 MenuFlyout 的样式
-->
<MenuFlyout.MenuFlyoutPresenterStyle>
<Style TargetType="MenuFlyoutPresenter">
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="BorderThickness" Value="5" />
</Style>
</MenuFlyout.MenuFlyoutPresenterStyle>
</MenuFlyout>
</Page.Resources>
<Grid Background="Transparent">
<StackPanel Margin="10 0 10 10">
<TextBlock Name="lblMsg" Margin="5" />
<Button Name="button1" Margin="5" Content="Options" Flyout="{StaticResource MyMenuFlyout}" />
<TextBlock Name="textBlock1" Margin="5 20 5 5" Text="按我弹出 Flyout" Tapped="textBlock1_Tapped" FontSize="18" />
</StackPanel>
</Grid>
</Page>
  Controls/FlyoutControl/MenuFlyoutDemo.xaml.cs



/*
* MenuFlyout - 菜单弹出框控件(继承自 FlyoutBase, 请参见 /Controls/FlyoutControl/FlyoutBaseDemo.xaml)
*     ShowAt(UIElement targetElement, Point point) - 在指定的 UIElement 的指定位置(point 是相对于 targetElement 的位置)显示 MenuFlyout 控件
*/
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace Windows10.Controls.FlyoutControl
{
public sealed partial class MenuFlyoutDemo : Page
{
public MenuFlyoutDemo()
{
this.InitializeComponent();
}
private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
lblMsg.Text = "MenuFlyoutItem 被 click 了";
}
private void menuFlyoutItem1_Click(object sender, RoutedEventArgs e)
{
lblMsg.Text = "menuFlyoutItem1 被 click 了";
}
private void toggleMenuFlyoutItem1_Click(object sender, RoutedEventArgs e)
{
lblMsg.Text = $"toggleMenuFlyoutItem1 被 click 了, IsChecked:{toggleMenuFlyoutItem1.IsChecked}";
}
private void toggleMenuFlyoutItem2_Click(object sender, RoutedEventArgs e)
{
lblMsg.Text = $"toggleMenuFlyoutItem2 被 click 了, IsChecked:{toggleMenuFlyoutItem2.IsChecked}";
}

private void textBlock1_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
MenuFlyout menuFlyout = this.Resources["MyMenuFlyout"] as MenuFlyout;
// 对于基类的 ShowAt(FrameworkElement targetElement) 方法当然是支持的
// menuFlyout.ShowAt(textBlock1);
// 在 MenuFlyout 中重载了 ShowAt() 方法,即 ShowAt(UIElement targetElement, Point point)
// 其中 point 代表 MenuFlyout 相对于 targetElement 左上角的显示位置(此时 MenuFlyout 的 Placement 参数就无效了)
menuFlyout.ShowAt(textBlock1, new Point(10, 10));
}
}
}
  
OK
[源码下载]

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-388925-1-1.html 上篇帖子: windows 10 multiple editions x64 dvd.iso+密钥 下篇帖子: 按键精灵 句柄 获得句柄 控制windows窗口 后台
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表