[源碼下載]
作者:webabcd
介紹
背水一戰 Windows 10 之 控件(布局類)
示例
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"> <Border.BorderBrush> <ImageBrush ImageSource="/Assets/Logo.png" /> </Border.BorderBrush> <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
[源碼下載]