背水一战 Windows 10 (39) - 控件（布局类）: VariableSizedWrapGrid, Border, Viewbox, SplitView

2021-05-12 22:27

阅读：468

标签：点击其他 mat 隐藏 express zed tle schema pat val

原文:背水一战 Windows 10 (39) - 控件（布局类）: VariableSizedWrapGrid, Border, Viewbox, SplitView

[源码下载]

背水一战 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 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 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.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">

            

            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>OverlayComboBoxItem>
                ComboBoxItem>CompactOverlayComboBoxItem>
                ComboBoxItem>InlineComboBoxItem>
                ComboBoxItem>CompactInlineComboBoxItem>
            ComboBox>

            ComboBox x:Name="cmbPanePlacement" Margin="5" PlaceholderText="PanePlacement" SelectionChanged="cmbPanePlacement_SelectionChanged">
                ComboBoxItem>LeftComboBoxItem>
                ComboBoxItem>RightComboBoxItem>
            ComboBox>

            
            
            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
[源码下载]

背水一战 Windows 10 (39) - 控件（布局类）: VariableSizedWrapGrid, Border, Viewbox, SplitView

标签：点击其他 mat 隐藏 express zed tle schema pat val

原文地址：http://www.cnblogs.com/lonelyxmas/p/7567367.html

上一篇：背水一战 Windows 10 (36) - 控件（弹出类）: ToolTip, Popup, PopupMenu

下一篇：窗体控件11-20总结

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：背水一战 Windows 10 (39) - 控件（布局类）: VariableSizedWrapGrid, Border, Viewbox, SplitView
文章链接：http://soscw.com/essay/84876.html

亲，登录后才可以留言！

背水一战 Windows 10 (39) - 控件（布局类）: VariableSizedWrapGrid, Border, Viewbox, SplitView

评论

热门文章

推荐文章

最新文章

置顶文章