程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> 背水一戰 Windows 10 (39),背水一戰39

背水一戰 Windows 10 (39),背水一戰39

編輯:關於.NET

背水一戰 Windows 10 (39),背水一戰39


[源碼下載]


背水一戰 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
[源碼下載]

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved