背水一战 Windows 10 (39)

2017-01-12 19:04:16来源:cnblogs.com作者:控件(布局类): VariableSizedWrapGrid人点击

[源码下载]


背水一战 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">                <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
[源码下载]

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台