背水一战 Windows 10 (39) - 控件(布局类): VariableSizedWrapGrid, Border, Viewbox, SplitView
作者:webabcd
介绍
背水一战 Windows 10 之 控件(布局类)
- VariableSizedWrapGrid
- Border
- Viewbox
- SplitView
示例
1、VariableSizedWrapGrid 的示例
Controls/LayoutControl/VariableSizedWrapGridDemo.xaml
<Page
x:Class="Windows10.Controls.LayoutControl.VariableSizedWrapGridDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.LayoutControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Grid Background="Transparent">
<Grid Margin="5"> <!--
VariableSizedWrapGrid - 用于 Wrap 子元素集合的控件
Orientation - 控件内元素的排列方向
Horizontal - 水平排列
Vertical - 垂直排列
MaximumRowsOrColumns - 最大行数或最大列数(默认值为 -1)
ItemWidth - 每个 item 的宽度(默认值为 double.NaN)
ItemHeight - 每个 item 的高度(默认值为 double.NaN)
HorizontalChildrenAlignment - 看不出有啥用
VerticalChildrenAlignment - 看不出有啥用 VariableSizedWrapGrid.RowSpan - 合并的行数(附加属性)
code-behind: int GetRowSpan(UIElement element), SetRowSpan(UIElement element, int value)
VariableSizedWrapGrid.ColumnSpan - 合并的列数(附加属性)
code-behind: int GetColumnSpan(UIElement element), SetColumnSpan(UIElement element, int value)
--> <VariableSizedWrapGrid HorizontalAlignment="Left" Background="Green"
Orientation="Horizontal" MaximumRowsOrColumns="5"
ItemWidth="120" ItemHeight="120">
<VariableSizedWrapGrid.Children>
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" VariableSizedWrapGrid.RowSpan="2" VariableSizedWrapGrid.ColumnSpan="2" />
<!--
注:如果剩余的网格显示不下的话,就另起一行或列
-->
<Image Source="/Assets/StoreLogo.png" Margin="10" VariableSizedWrapGrid.ColumnSpan="3" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
<Image Source="/Assets/StoreLogo.png" Margin="10" />
</VariableSizedWrapGrid.Children>
</VariableSizedWrapGrid> </Grid>
</Grid>
</Page>
Controls/LayoutControl/VariableSizedWrapGridDemo.xaml.cs
/*
* VariableSizedWrapGrid - 用于 Wrap 子元素集合的控件(继承自 Panel, 请参见 /Controls/LayoutControl/PanelDemo.xaml)
*/ using Windows.UI.Xaml.Controls; namespace Windows10.Controls.LayoutControl
{
public sealed partial class VariableSizedWrapGridDemo : Page
{
public VariableSizedWrapGridDemo()
{
this.InitializeComponent();
}
}
}
2、Border 的示例
Controls/LayoutControl/BorderDemo.xaml
<Page
x:Class="Windows10.Controls.LayoutControl.BorderDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.LayoutControl"
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"> <!--
Border - 边框控件
Child - 边框里的内容([ContentProperty(Name = "Child")])
BorderThickness - 边框的宽度(像素值:上下左右;左右,上下;左,上,右,下)
注:边框控件的边框是绘制在控件内部的
BorderBrush - 边框的画笔
Background - 边框里内容的背景画笔
CornerRadius - 边框角的半径(左上 右上 右下 左下)
ChildTransitions - 过渡效果集合
--> <Border Name="border1" Width="400" Height="100" HorizontalAlignment="Left" Margin="5"
BorderThickness="1,10,20,30" BorderBrush="Red" Background="Blue" CornerRadius="10" >
<Border.Child>
<TextBlock Text="我是 border1 里的内容" TextAlignment="Center" />
</Border.Child>
</Border> <Border Name="border2" Width="400" Height="100" HorizontalAlignment="Left" Margin="5">
<TextBlock Text="我是 border2 里的内容" />
<!--进入页面的时候,此 Border 里的内容会有 EntranceThemeTransition 的主题过渡效果-->
<Border.ChildTransitions>
<TransitionCollection>
<EntranceThemeTransition />
</TransitionCollection>
</Border.ChildTransitions>
</Border> </StackPanel>
</Grid>
</Page>
Controls/LayoutControl/BorderDemo.xaml.cs
/*
* Border - 边框控件(继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo.xaml)
*/ using Windows.UI.Xaml.Controls; namespace Windows10.Controls.LayoutControl
{
public sealed partial class BorderDemo : Page
{
public BorderDemo()
{
this.InitializeComponent();
}
}
}
3、Viewbox 的示例
Controls/LayoutControl/ViewboxDemo.xaml
<Page
x:Class="Windows10.Controls.LayoutControl.ViewboxDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.LayoutControl"
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"> <!--
Viewbox - 容器控件,用于控制子元素如何拉伸
Child - 容器里的内容([ContentProperty(Name = "Child")])
Stretch - 拉伸方式(Windows.UI.Xaml.Media.Stretch 枚举)
Fill - 充满容器,不保留长宽比
None - 不做任何处理,如果内容比容器大,则多出的部分被剪裁
Uniform - 等比缩放到容器(默认值)
UniformToFill - 充满容器,且保留长宽比,多出的部分被剪裁 StretchDirection - 如何决定是否放大或缩小(Windows.UI.Xaml.Controls.StretchDirection 枚举)
UpOnly - 需要的时候执行放大操作,永远不会执行缩小操作
DownOnly - 需要的时候执行缩小操作,永远不会执行放大操作
Both - 需要的时候即可执行放大操作,又可执行缩小操作(默认值)
--> <Border BorderBrush="Red" HorizontalAlignment="Left" BorderThickness="1" Width="100" Height="100" Margin="5">
<Viewbox Width="100" Height="100" Stretch="Fill">
<StackPanel>
<TextBlock Text="webabcd" />
</StackPanel>
</Viewbox>
</Border> <Border BorderBrush="Red" HorizontalAlignment="Left" BorderThickness="1" Width="100" Height="100" Margin="5">
<Viewbox Width="100" Height="100" Stretch="None" >
<StackPanel>
<TextBlock Text="webabcd" />
</StackPanel>
</Viewbox>
</Border> <Border BorderBrush="Red" HorizontalAlignment="Left" BorderThickness="1" Width="100" Height="100" Margin="5">
<Viewbox Width="100" Height="100" Stretch="Uniform" >
<StackPanel>
<TextBlock Text="webabcd" />
</StackPanel>
</Viewbox>
</Border> <Border BorderBrush="Red" HorizontalAlignment="Left" BorderThickness="1" Width="100" Height="100" Margin="5">
<Viewbox Width="100" Height="100" Stretch="UniformToFill" >
<StackPanel>
<TextBlock Text="webabcd" />
</StackPanel>
</Viewbox>
</Border> </StackPanel>
</Grid>
</Page>
Controls/LayoutControl/ViewboxDemo.xaml.cs
/*
* Viewbox - 容器控件,用于控制子元素如何拉伸(继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo.xaml)
*/ using Windows.UI.Xaml.Controls; namespace Windows10.Controls.LayoutControl
{
public sealed partial class ViewboxDemo : Page
{
public ViewboxDemo()
{
this.InitializeComponent();
}
}
}
4、SplitView 的示例
Controls/LayoutControl/SplitViewDemo.xaml
<Page
x:Class="Windows10.Controls.LayoutControl.SplitViewDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.LayoutControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" xmlns:common="using:Windows10.Common"> <Page.Resources>
<common:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverter" />
</Page.Resources> <Grid Background="Transparent">
<StackPanel Margin="10 0 10 10"> <CheckBox Name="chkIsPaneOpen" Margin="5" Content="IsPaneOpen" IsChecked="True" /> <ComboBox x:Name="cmbDisplayMode" Margin="5" PlaceholderText="DisplayMode" SelectionChanged="cmbDisplayMode_SelectionChanged">
<ComboBoxItem>Overlay</ComboBoxItem>
<ComboBoxItem>CompactOverlay</ComboBoxItem>
<ComboBoxItem>Inline</ComboBoxItem>
<ComboBoxItem>CompactInline</ComboBoxItem>
</ComboBox> <ComboBox x:Name="cmbPanePlacement" Margin="5" PlaceholderText="PanePlacement" SelectionChanged="cmbPanePlacement_SelectionChanged">
<ComboBoxItem>Left</ComboBoxItem>
<ComboBoxItem>Right</ComboBoxItem>
</ComboBox> <!--
SplitView - Pane/Content 控件
Pane - 导航视图
Content - 内容视图([ContentProperty(Name = "Content")])
PaneBackground - 导航视图的背景画笔
IsPaneOpen - 是否显示导航视图(默认值为 true)
OpenPaneLength - 导航视图完全展开时的宽度(默认值为 320)
CompactPaneLength - 紧凑模式下导航视图的宽度(默认值为 48)
PanePlacement - 导航视图相对于内容视图的显示位置
Left - 导航视图显示在内容视图的左侧(默认值)
Right - 导航视图显示在内容视图的右侧
DisplayMode - 显示方式
Overlay - 导航视图打开时,其会覆盖在内容视图上面(点击其他区域会自动关闭);导航视图关闭时,其会隐藏
CompactOverlay - 导航视图打开时,其会覆盖在内容视图上面(点击其他区域会自动关闭);导航视图关闭时,其会以紧凑模式显示
Inline - 导航视图打开时,其会以与内容视图并行显示(点击其他区域不会自动关闭);导航视图关闭时,其会隐藏
CompactInline - 导航视图打开时,其会以与内容视图并行显示(点击其他区域不会自动关闭);导航视图关闭时,其会以紧凑模式显示
PaneClosing - 导航视图准备关闭时触发的事件
PaneClosed - 导航视图关闭后触发的事件
--> <SplitView x:Name="splitView" Margin="5"
PaneBackground="#FF2B2B2B"
IsPaneOpen="{x:Bind chkIsPaneOpen.IsChecked, Mode=TwoWay, Converter={StaticResource NullableBooleanToBooleanConverter}}"
OpenPaneLength="320"
CompactPaneLength="48"
DisplayMode="Overlay"
PanePlacement="Left">
<SplitView.Pane>
<StackPanel Height="200">
<TextBlock Text="我是 SplitView.Pane" />
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<StackPanel Height="200" Width="400" HorizontalAlignment="Left" Background="Orange">
<TextBlock Text="SplitView.Content" />
</StackPanel>
</SplitView.Content>
</SplitView> </StackPanel>
</Grid>
</Page>
Controls/LayoutControl/SplitViewDemo.xaml.cs
/*
* SplitView - Pane/Content 控件(继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/)
*/ using System;
using Windows.UI.Xaml.Controls; namespace Windows10.Controls.LayoutControl
{
public sealed partial class SplitViewDemo : Page
{
public SplitViewDemo()
{
this.InitializeComponent();
} private void cmbDisplayMode_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
splitView.DisplayMode = (SplitViewDisplayMode)Enum.Parse(typeof(SplitViewDisplayMode), (e.AddedItems[] as ComboBoxItem).Content.ToString());
} private void cmbPanePlacement_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
splitView.PanePlacement = (SplitViewPanePlacement)Enum.Parse(typeof(SplitViewPanePlacement), (e.AddedItems[] as ComboBoxItem).Content.ToString());
}
}
}
OK
[源码下载]
背水一战 Windows 10 (39) - 控件(布局类): VariableSizedWrapGrid, Border, Viewbox, SplitView的更多相关文章
- 背水一战 Windows 10 (38) - 控件(布局类): Panel, Canvas, RelativePanel, StackPanel, Grid
[源码下载] 背水一战 Windows 10 (38) - 控件(布局类): Panel, Canvas, RelativePanel, StackPanel, Grid 作者:webabcd 介绍背 ...
- 背水一战 Windows 10 (72) - 控件(控件基类): UIElement - UIElement 的位置, UIElement 的布局, UIElement 的其他特性
[源码下载] 背水一战 Windows 10 (72) - 控件(控件基类): UIElement - UIElement 的位置, UIElement 的布局, UIElement 的其他特性 作者 ...
- 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing
[源码下载] 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing 作者:webabcd 介绍背水一 ...
- 背水一战 Windows 10 (75) - 控件(控件基类): FrameworkElement - 基础知识, 相关事件, HorizontalAlignment, VerticalAlignment
[源码下载] 背水一战 Windows 10 (75) - 控件(控件基类): FrameworkElement - 基础知识, 相关事件, HorizontalAlignment, Vertical ...
- 背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingStackPanel, WrapGrid
[源码下载] 背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingS ...
- 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog
[源码下载] 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog 作者:webabcd 介绍背水一战 Windows 10 之 控 ...
- 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu
[源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹 ...
- 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout
[源码下载] 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout 作者:webabcd 介绍背水一战 Windows 10 之 ...
- 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch
[源码下载] 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch 作者:webabcd 介绍背水一 ...
随机推荐
- Linux下访问文件的基本模式
源址:http://blogread.cn/it/article/6523?f=wb 访问文件的操作主要是指读文件和写文件,下文简单说明内核中几种常见的访问文件的方式. 普通模式 读写系统调用的默认方 ...
- Singal Page App:使用Knockout和RequireJS创建高度模块化的单页应用引擎
Singal Page App 开篇扯淡 距离上一篇文章已经有好几个月,也不是没有时间记录点东西,主要是换了新的工作,在一家外资工作,目前的工作内容大多都是前端开发,新接触的东西因为时间原因,大多还不 ...
- SSMS2008插件开发(3)--部署调试SSMS2008插件
原文:SSMS2008插件开发(3)--部署调试SSMS2008插件 上一次说到VS2008中的插件开发,最终结果插件是部署在VS2008中,现在我们将插件部署到SSMS2008(Microsoft ...
- jquery简单异步读取xml文件
$.ajax({ url: '../XmlFiles/Sm.xml', async: true, cache: false, ...
- [转]SQL2005后的ROW_NUMBER()函数的应用
SQL Server 2005后之后,引入了row_number()函数,row_number()函数的分组排序功能使这种操作变得非常简单 分组取TOP数据是T-SQL中的常用查询, 如学生信息管理系 ...
- 微信SDK使用总结
最近做一个分享功能,需要使用微信SDK分享内容给朋友或朋友圈.期间遇到些奇怪的问题,花了点时间去折腾了一番. 首先需要到微信开放平台http://open.weixin.qq.com/?lang=zh ...
- 7.29 DFS总结
7.29 黄昏时刻 (一) 全排列 建模: 给了数字n 代表从1-n 个数全排列 思路: 1. 输入n,如果n值为‘0’,则退出程序 2. vis[i] 保存 是否对第i个数字进行访问 3. df ...
- 教你用Perl 实现Base64编码
在用脚本后台发送邮件时,需要将html的内容转换成Base64编码的形式,这样邮件客户端会自动对Base64编码的内容进行解码,还原成原来的内容. Base64.pl: #!/usr/bin/perl ...
- Asp.net 插入或更改查询字符串
string InsertOrUpdateQueryStringItem(string key, string value) { if (Request.QueryString.HasKeys()) ...
- ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)
上篇文章http://blog.csdn.net/itmyhome1990/article/details/36396291介绍了ajaxfileupload实现多文件上传, 但只是固定的文件个数,如 ...