背水一戰 Windows 10 (75) - 控制項（控制項基類）: FrameworkElement - 基礎知識, 相關事件, HorizontalAlignment, VerticalAlignment

背水一戰 Windows 10 之控制項（控制項基類 - FrameworkElement）: 基礎知識, 相關事件, HorizontalAlignment 和 VerticalAlignment ...

作者：webabcd

介紹
背水一戰 Windows 10 之控制項（控制項基類 - FrameworkElement）

基礎知識
相關事件
HorizontalAlignment 和 VerticalAlignment

示例
1、演示 FrameworkElement 的基礎知識
Controls/BaseControl/FrameworkElementDemo/Demo1.xaml

<Page
    x:Class="Windows10.Controls.BaseControl.FrameworkElementDemo.Demo1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.BaseControl.FrameworkElementDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Orange">
        <StackPanel Name="stackPanel" Background="Blue" Margin="100">

            <TextBlock Name="lblMsg" Margin="5" />

        </StackPanel>
    </Grid>
</Page>

Controls/BaseControl/FrameworkElementDemo/Demo1.xaml.cs

/*
 * FrameworkElement - FrameworkElement（繼承自 UIElement, 請參見 /Controls/BaseControl/UIElementDemo/）
 *     MinWidth, MinHeight - 最小寬高，預設值為 0
 *     MaxWidth, MaxHeight - 最大寬高，預設值為 double.PositiveInfinity
 *     Width, Height - 寬高，預設值為 NaN
 *     ActualWidth, ActualHeight - 實際寬高，來自 UIElement 的 RenderSize 屬性（uwp 的 layout 是一個遞歸系統，更多說明請參見 /MyControls/MyControl2.cs）
 *     Margin - Margin
 *         它是一個 Thickness 類型的對象，在 C# 端就構造這個對象即可
 *         在 xaml 端設置的話，其規則為“左,上,右,下”或“左右,上下”或“左上右下”，可以用逗號分隔也可以用空格分隔
 *     Name - 名字
 *     FindName() - 查找當前頁面的指定名字的對象
 *     Parent - 獲取當前對象的父對象
 *     Tag - 用於保存任意對象
 *     Language - 設置或獲取當前元素及其所有子元素的語言信息（沒什麼實際效果，就是一個標記而已）
 *     BaseUri - 獲取當前對象所在的 xaml 頁面的 uri 地址
 *     DataContext - 數據上下文（參見 /Bind/DataContextChanged.xaml）
 *     RequestedTheme - 主題（參見 /Resource/ThemeResourceDemo.xaml.cs）
 *     Resources - 資源字典（參見 /Resource/ResourceDictionaryDemo.xaml）
 *     Style - 樣式（參見 /Controls/UI/Style.xaml）
 *     GetBindingExpression() - 獲取指定屬性的綁定信息（參見 /Bind/UpdateSourceTrigger.xaml.cs）
 *     SetBinding() - 設置綁定信息（參見 /Bind/BindingElement.xaml.cs）
 *         
 *     
 * 本例用於演示 FrameworkElement 的基礎知識
 */

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.BaseControl.FrameworkElementDemo
{
    public sealed partial class Demo1 : Page
    {
        public Demo1()
        {
            this.InitializeComponent();

            this.Loaded += Demo1_Loaded;
        }

        private void Demo1_Loaded(object sender, RoutedEventArgs e)
        {
            stackPanel.MinWidth = 0;
            stackPanel.MinHeight = 0;
            stackPanel.MaxWidth = double.PositiveInfinity;
            stackPanel.MaxHeight = double.PositiveInfinity;

            lblMsg.Text += $"stackPanel.ActualWidth:{stackPanel.ActualWidth}, stackPanel.ActualHeight:{stackPanel.ActualHeight}";
            lblMsg.Text += Environment.NewLine;

            if (this.FindName("lblMsg") as TextBlock == lblMsg)
            {
                lblMsg.Text += "this.FindName(\"lblMsg\") as TextBlock == lblMsg";
                lblMsg.Text += Environment.NewLine;
            }

            if (lblMsg.Parent as StackPanel == stackPanel)
            {
                lblMsg.Text += "lblMsg.Parent as StackPanel == stackPanel";
                lblMsg.Text += Environment.NewLine;
            }

            lblMsg.Text += "BaseUri:" + this.BaseUri;
            lblMsg.Text += Environment.NewLine;

            lblMsg.Tag = "i am webabcd";
            lblMsg.Text += "lblMsg.Tag:" + lblMsg.Tag;
            lblMsg.Text += Environment.NewLine;
        }
    }
}

2、演示 FrameworkElement 的相關事件
Controls/BaseControl/FrameworkElementDemo/Demo2.xaml

<Page
    x:Class="Windows10.Controls.BaseControl.FrameworkElementDemo.Demo2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.BaseControl.FrameworkElementDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Orange">
        <StackPanel Name="stackPanel" Background="Blue" Margin="100">

            <TextBlock Name="lblMsg" Margin="5" />

        </StackPanel>
    </Grid>
</Page>

Controls/BaseControl/FrameworkElementDemo/Demo2.xaml.cs

/*
 * FrameworkElement - FrameworkElement（繼承自 UIElement, 請參見 /Controls/BaseControl/UIElementDemo/）
 *     DataContextChanged - 數據上下文發生改變後觸發的事件（參見 /Bind/DataContextChanged.xaml）
 *     Loading - 在 OnNavigatedTo 之後，由外到內觸發 Loading 事件
 *     Loaded - 由內到外觸發 Loaded 事件
 *     Unloaded - 在 OnNavigatedFrom 之後，由外到內觸發 Unloaded 事件
 *     SizeChanged - 在尺寸（ActualWidth 或 ActualHeight）發生變化時觸發的事件，位置等發生變化時不會觸發
 *     LayoutUpdated - 佈局更新時觸發的事件，比如尺寸發生了變化或位置發生了變化等
 *     
 *     
 * 本例用於演示 FrameworkElement 的相關事件
 */

using System;
using System.Diagnostics;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace Windows10.Controls.BaseControl.FrameworkElementDemo
{
    public sealed partial class Demo2 : Page
    {
        public Demo2()
        {
            this.InitializeComponent();

            this.Loading += page_Loading;
            this.Loaded += page_Loaded;
            this.Unloaded += page_Unloaded;

            stackPanel.Loading += stackPanel_Loading;
            stackPanel.Loaded += stackPanel_Loaded;
            stackPanel.Unloaded += stackPanel_Unloaded;

            lblMsg.Loading += lblMsg_Loading;
            lblMsg.Loaded += lblMsg_Loaded;
            lblMsg.Unloaded += lblMsg_Unloaded;

            lblMsg.SizeChanged += lblMsg_SizeChanged;
            lblMsg.LayoutUpdated += lblMsg_LayoutUpdated;
        }



        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            lblMsg.Text += "OnNavigatedTo";
            lblMsg.Text += Environment.NewLine;
        }
        protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
        {
            Debug.WriteLine("OnNavigatingFrom");
        }
        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            Debug.WriteLine("OnNavigatedFrom");
        }



        private void page_Loading(FrameworkElement sender, object args)
        {
            lblMsg.Text += "page_Loading";
            lblMsg.Text += Environment.NewLine;
        }
        private void page_Loaded(object sender, RoutedEventArgs e)
        {
            lblMsg.Text += "page_Loaded";
            lblMsg.Text += Environment.NewLine;
        }
        private void page_Unloaded(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("page_Unloaded");
        }



        private void stackPanel_Loading(FrameworkElement sender, object args)
        {
            lblMsg.Text += "stackPanel_Loading";
            lblMsg.Text += Environment.NewLine;
        }
        private void stackPanel_Loaded(object sender, RoutedEventArgs e)
        {
            lblMsg.Text += "stackPanel_Loaded";
            lblMsg.Text += Environment.NewLine;
        }
        private void stackPanel_Unloaded(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("stackPanel_Unloaded");
        }



        private void lblMsg_Loading(FrameworkElement sender, object args)
        {
            lblMsg.Text += "lblMsg_Loading";
            lblMsg.Text += Environment.NewLine;
        }
        private void lblMsg_Loaded(object sender, RoutedEventArgs e)
        {
            lblMsg.Text += "lblMsg_Loaded";
            lblMsg.Text += Environment.NewLine;
        }
        private void lblMsg_Unloaded(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("lblMsg_Unloaded");
        }



        private void lblMsg_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            Debug.WriteLine($"lblMsg_SizeChanged, PreviousSize:{e.PreviousSize}, NewSize:{e.NewSize}");

            // 註：如果在這裡又改變了 lblMsg 的尺寸的話，則會發生迴圈調用，編譯時會出現“Layout cycle detected.  Layout could not complete.”錯誤
        }
        private void lblMsg_LayoutUpdated(object sender, object e)
        {
            Debug.WriteLine("lblMsg_LayoutUpdated");

            // 註：如果在這裡又改變了 lblMsg 的佈局的話，則會發生迴圈調用，編譯時會出現“Layout cycle detected.  Layout could not complete.”錯誤
        }
    }
}

3、演示 FrameworkElement 的 HorizontalAlignment 和 VerticalAlignment 的應用
Controls/BaseControl/FrameworkElementDemo/Demo3.xaml

<Page
    x:Class="Windows10.Controls.BaseControl.FrameworkElementDemo.Demo3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.BaseControl.FrameworkElementDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Orange">
        <StackPanel Name="stackPanel" Background="Blue" Margin="100" VerticalAlignment="Stretch">
            
            <ComboBox Name="cmbHorizontalAlignment" PlaceholderText="HorizontalAlignment" SelectionChanged="cmbHorizontalAlignment_SelectionChanged" Margin="5">
                <ComboBoxItem>Left</ComboBoxItem>
                <ComboBoxItem>Center</ComboBoxItem>
                <ComboBoxItem>Right</ComboBoxItem>
                <ComboBoxItem IsSelected="True">Stretch</ComboBoxItem>
            </ComboBox>

            <ComboBox Name="cmbVerticalAlignment" PlaceholderText="VerticalAlignment" SelectionChanged="cmbVerticalAlignment_SelectionChanged" Margin="5">
                <ComboBoxItem>Top</ComboBoxItem>
                <ComboBoxItem>Center</ComboBoxItem>
                <ComboBoxItem>Bottom</ComboBoxItem>
                <ComboBoxItem IsSelected="True">Stretch</ComboBoxItem>
            </ComboBox>
            
        </StackPanel>
    </Grid>
</Page>

Controls/BaseControl/FrameworkElementDemo/Demo3.xaml.cs

/*
 * FrameworkElement - FrameworkElement（繼承自 UIElement, 請參見 /Controls/BaseControl/UIElementDemo/）
 *     HorizontalAlignment - 水平對齊方式（Left, Center, Right, Stretch）
 *     VerticalAlignment - 垂直對齊方式（Top, Center, Bottom, Stretch）
 *     
 *     
 * 本例用於演示 FrameworkElement 的 HorizontalAlignment 和 VerticalAlignment 的應用
 */

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.BaseControl.FrameworkElementDemo
{
    public sealed partial class Demo3 : Page
    {
        public Demo3()
        {
            this.InitializeComponent();
        }
        
        private void cmbHorizontalAlignment_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            stackPanel.HorizontalAlignment = (HorizontalAlignment)Enum.Parse(typeof(HorizontalAlignment), (e.AddedItems[0] as ComboBoxItem).Content.ToString());
        }

        private void cmbVerticalAlignment_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            stackPanel.VerticalAlignment = (VerticalAlignment)Enum.Parse(typeof(VerticalAlignment), (e.AddedItems[0] as ComboBoxItem).Content.ToString());
        }

    }
}

OK
[源碼下載]