Win10系列:C#应用控件基础20

SemanticZoom控件

SemanticZoom控件由相互关联的缩小视图和放大视图所组成,缩小视图用来显示内容的索引,放大视图可以用来显示内容的详细信息,用户可以根据阅读需要在两种视图之间自由切换。

在XAML文件中,SemanticZoom控件的用法如下所示:

<SemanticZoom ...>

<SemanticZoom.ZoomedOutView>

<!--添加缩小的视图内容-->

</SemanticZoom.ZoomedOutView>

<SemanticZoom.ZoomedInView>

<!--添加放大的视图内容-->

</SemanticZoom.ZoomedInView>

</SemanticZoom>

下面介绍一下SemanticZoom控件的几个常用属性:

  • IsZoomedInViewActive属性,获取或设置SemanticZoom控件的放大视图是否为活动视图。当属性值为True,放大视图为活动视图,运行程序首先显示的将是放大视图内容。当属性值为False,运行程序首先显示的是缩小视图内容。
  • ZoomedInView属性,获取或设置SemanticZoom控件的放大视图内容。
  • ZoomedOutView属性,获取或设置SemanticZoom控件的缩小视图内容。

介绍完常用属性,接着来看一下SemanticZoom控件的常用事件:

  • ViewChangeCompleted事件,当视图改变完成时触发。
  • ViewChangeStarted事件,当视图开始发生改变时触发。

接下来使用SemanticZoom控件设计一个可以显示放大视图和缩小视图的应用,在缩小视图中放置一个索引图片,而放大视图中将放置与缩小视图中的索引图片相关的详细展示图片。

新建一个Windows应用商店的空白应用程序项目,并命名为SemanticZoomDemo,在项目中添加一个名为"Images"的文件夹,并在此文件夹中添加6张蔬菜图片,其中1张用于表示蔬菜类别,另外5张表示与此类别相关的5种不同的蔬菜。双击打开MainPage.xaml文件,在Grid元素中添加如下代码。

<SemanticZoom IsZoomedInViewActive="False">

<SemanticZoom.ZoomedOutView>

<!--在缩小的视图中添加ListView控件并在此控件内添加1张图片-->

<ListView VerticalAlignment="Center" Width="200" ScrollViewer.IsVerticalScrollChainingEnabled="False" HorizontalAlignment="Center">

<Image Source="Images/Vegetables.jpg" Width="180" Height="180"/>

</ListView>

</SemanticZoom.ZoomedOutView>

<SemanticZoom.ZoomedInView>

<!--在放大的视图中添加ListView控件并在此控件中添加5张图片-->

<ListView VerticalAlignment="Center" ScrollViewer.IsVerticalScrollChainingEnabled="False" HorizontalAlignment="Center">

<StackPanel Orientation="Horizontal">

<Image Source="Images/BaiCai.jpg" Width="80" Height="80"/>

<Image Source="Images/BoCai.jpg" Width="80" Height="80"/>

<Image Source="Images/QinCai.jpg" Width="80" Height="80"/>

<Image Source="Images/SuanMiao.jpg" Width="80" Height="80"/>

<Image Source="Images/YouCai.jpg" Width="80" Height="80"/>

</StackPanel>

</ListView>

</SemanticZoom.ZoomedInView>

</SemanticZoom>

在上面的代码中,添加了一个SemanticZoom控件并设置其IsZoomedInViewActive属性值为False,使SemanticZoom控件先展示缩小视图内容。在SemanticZoom控件的缩小视图元素SemanticZoom.ZoomedOutView内添加一个ListView控件,在ListView控件中放置一个显示蔬菜类别图片的Image控件。

在放大视图元素SemanticZoom.ZoomedInView内添加一个ListView控件,在ListView控件中添加五个表示具体蔬菜图片的Image控件,并使用StackPanel元素对这五个Image控件进行布局,定义StackPanel的Orientation属性值为Horizontal将五张图片以水平方式排列。

运行程序,在屏幕上首先以缩小视图显示蔬菜种类的图片,效果如图4-32所示。单击此图片将以放大视图显示五种不同蔬菜的图片,效果如图4-33所示,单击放大视图中右下角的缩小按钮,将切换回缩小视图。

图4-32 SemanticZoom控件的缩小视图 图4-33 SemanticZoom控件的放大视图

posted on 2017-03-30 21:07 冯瑞涛 阅读( ...) 评论( ...) 编辑 收藏
代码介绍 MetroForWinForm(win8风格模版) using System; using System.Drawing; using System.Globalization; using System.Windows.Forms; using MetroFramework.Forms; namespace MetroFramework.Demo { public partial class MainForm : MetroForm { public MainForm() { InitializeComponent(); metroStyleManager.Theme = MetroThemeStyle.Default; metroStyleManager.Style = MetroColorStyle.Teal; } private void metroTileSwitch_Click(object sender, EventArgs e) { var m = new Random(); int next = m.Next(0, 13); metroStyleManager.Style = (MetroColorStyle)next; } private void metroTile1_Click(object sender, EventArgs e) { metroStyleManager.Theme = metroStyleManager.Theme == MetroThemeStyle.Light ? MetroThemeStyle.Dark : MetroThemeStyle.Light; } private void metroButton1_Click(object sender, EventArgs e) { MetroTaskWindow.ShowTaskWindow(this, "SubControl in TaskWindow", new TaskWindowControl(), 10); } private void metroButton2_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "Do you like this metro message box?", "Metro Title", MessageBoxButtons.YesNoCancel, MessageBoxIcon.Asterisk); } private void metroButton5_Click(object sender, EventArgs e) { metroContextMenu1.Show(metroButton5, new Point(0, metroButton5.Height)); } private void metroButton6_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "This is a sample MetroMessagebox `OK` only button", "MetroMessagebox", MessageBoxButtons.OK, MessageBoxIcon.Information); } private void metroButton10_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "This is a sample MetroMessagebox `OK` and `Cancel` button", "MetroMessagebox", MessageBoxButtons.OKCancel, MessageBoxIcon.Information); } private void metroButton7_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "This is a sample MetroMessagebox `Yes` and `No` button", "MetroMessagebox", MessageBoxButtons.YesNo, MessageBoxIcon.Question); } private void metroButton8_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "This is a sample MetroMessagebox `Yes`, `No` and `Cancel` button", "MetroMessagebox", MessageBoxButtons.YesNoCancel, MessageBoxIcon.Question); } private void metroButton11_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "This is a sample MetroMessagebox `Retry` and `Cancel` button. With warning style.", "MetroMessagebox", MessageBoxButtons.RetryCancel, MessageBoxIcon.Warning); } private void metroButton9_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "This is a sample MetroMessagebox `Abort`, `Retry` and `Ignore` button. With Error style.", "MetroMessagebox", MessageBoxButtons.AbortRetryIgnore, MessageBoxIcon.Error); } private void metroButton12_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "This is a sample `default` MetroMessagebox ", "MetroMessagebox"); } private void metroButton4_Click(object sender, EventArgs e) { var testform = new TestForm1(); testform.ShowDialog(); } private void metroButton4_Click_1(object sender, EventArgs e) { metroTextBox2.Focus(); } } }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值