原文:背水一战 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[0] as ComboBoxItem).Content.ToString());
}
private void cmbPanePlacement_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
splitView.PanePlacement = (SplitViewPanePlacement)Enum.Parse(typeof(SplitViewPanePlacement), (e.AddedItems[0] as ComboBoxItem).Content.ToString());
}
}
}
OK
[源码下载]
时间： 2024-10-11 03:15:11