WPF入門教程系列九——佈局之DockPanel與ViewBox（四）

時間 2019-11-11

標籤 wpf 入門教程系列佈局 dockpanel viewbox 简体版

原文原文鏈接

七. DockPanelc#

DockPanel定義一個區域，在此區域中，您可使子元素經過描點的形式排列，這些對象位於 Children 屬性中。停靠面板其實就是在WinForm相似於Dock屬性的元素。DockPanel會對每一個子元素進行排序，並停靠在面板的一側，多個停靠在同側的元素則按順序排序。　windows

　　若是將 LastChildFill 屬性設置爲 true(默認設置)，那麼不管對 DockPanel 的最後一個子元素設置的其餘任何停靠值如何，該子元素都將始終填滿剩餘的空間。若要將子元素停靠在另外一個方向，必須將 LastChildFill 屬性設置爲 false，還必須爲最後一個子元素指定顯式停靠方向。app

默認狀況下，面板元素並不接收焦點。要強制使面板元素接收焦點，請將 Focusable 屬性設置爲 true。佈局

　　注意：屏幕上 DockPanel 的子元素的位置由相關子元素的 Dock 屬性以及這些子元素在 DockPanel 下的相對順序肯定。所以，具備相同 Dock 屬性值的一組子元素在屏幕上的位置可能不一樣，具體取決於這些子元素在 DockPanel 下的順序。子元素的順序會影響定位，由於 DockPanel 會按順序迭代其子元素，並根據剩餘空間來設置每一個子元素的位置。 this

使用XAML代碼實現以下圖效果。圖以下。spa

<Window x:Class="WpfApp1.WindowDock"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="WindowDock" Height="300" Width="400">

    <Grid>

        <DockPanel Width="Auto" Height="Auto">

            <Button DockPanel.Dock="Left" Content="1" />

            <Button DockPanel.Dock="Top" Content="2" />

            <Button DockPanel.Dock="Right" Content="3" />

            <Button DockPanel.Dock="Bottom" Content="4" />

        

            <Button  HorizontalAlignment="Left"  Name="btnAddByCode" Height="22" Width="65" DockPanel.Dock=" Left "  Click="btnAddByCode_Click" >後臺代碼添加</Button>

 

        </DockPanel>

 

    </Grid>

</Window>

使用C#代碼實現以下圖效果。圖以下。code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

 

namespace WpfApp1

{

    /// <summary>

    /// WindowDock.xaml 的交互邏輯

    /// </summary>

    public partial class WindowDock : Window

    {

        public WindowDock()

        {

            InitializeComponent();

        }

 

        private void btnAddByCode_Click(object sender, RoutedEventArgs e)

        {

            DockPanel dp = new DockPanel();

          //  dp.LastChildFill = true;

            dp.Width = Double.NaN;    //至關於在XAML中設置Width="Auto"

            dp.Height = Double.NaN;   //至關於在XAML中設置Height="Auto"

            //把dp添加爲窗體的子控件

            this.Content = dp;

            //添加Rectangles

            Rectangle rTop = new Rectangle();

            rTop.Fill = new SolidColorBrush(Colors.BlanchedAlmond);

            rTop.Stroke = new SolidColorBrush(Colors.BlanchedAlmond);

            rTop.Height = 30;

            dp.Children.Add(rTop);

            rTop.SetValue(DockPanel.DockProperty, Dock.Top);

      

            Rectangle rLeft = new Rectangle();

            rLeft.Fill = new SolidColorBrush(Colors.Gray);

            rLeft.Stroke = new SolidColorBrush(Colors.Gray);

            rLeft.HorizontalAlignment = HorizontalAlignment.Left;

            rLeft.Height = 30;

            rLeft.Width = 30;

            dp.Children.Add(rLeft);

            rLeft.SetValue(DockPanel.DockProperty, Dock.Left);

            Rectangle rBottom = new Rectangle();

            rBottom.Fill = new SolidColorBrush(Colors.Red);

            rBottom.VerticalAlignment = VerticalAlignment.Bottom;

            rBottom.Height = 30;

            dp.Children.Add(rBottom);

            rBottom.SetValue(DockPanel.DockProperty, Dock.Bottom);

        }

    }

}

八. ViewBoxorm

ViewBox這個控件一般和其餘控件結合起來使用，是WPF中很是有用的控件。定義一個內容容器。ViewBox組件的做用是拉伸或延展位於其中的組件，以填滿可用空間，使之有更好的佈局及視覺效果。xml

一個 Viewbox中只能放一個控件。若是多添加了一個控件就會報錯。以下圖。對象

組件經常使用屬性：

Child：獲取或設置一個ViewBox元素的單一子元素。

Stretch：獲取或設置拉伸模式以決定該組件中的內容以怎樣的形式填充該組件的已有空間。具體設置值以下：

成員名稱	說明
None	內容保持其原始大小。
Fill	調整內容的大小以填充目標尺寸。不保留縱橫比。
Uniform	在保留內容原有縱橫比的同時調整內容的大小，以適合目標尺寸。
UniformToFill	在保留內容原有縱橫比的同時調整內容的大小，以填充目標尺寸。若是目標矩形的縱橫比不一樣於源矩形的縱橫比，則對源內容進行剪裁以適合目標尺寸。

StretchDirection：獲取或設置該組件的拉伸方向以決定該組件中的內容將以何種形式被延展。具體的設置值以下。

成員名稱	說明
UpOnly	僅當內容小於父項時，它纔會放大。若是內容大於父項，不會執行任何縮小操做。
DownOnly	僅當內容大於父項時，它纔會縮小。若是內容小於父項，不會執行任何放大操做。
Both	內容根據 Stretch 屬性進行拉伸以適合父項的大小。

接下來咱們作個示例，你能夠經過選擇下拉框中的不一樣設置值，來查看不一樣的效果。效果以下圖。

XAML代碼實現：

<Window x:Class="WpfApp1.WindowViewBox"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="WindowViewBox" Height="400" Width="500" Loaded="Window_Loaded">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="250"/>

            <RowDefinition Height="auto"/>

            <RowDefinition Height="73*"/>

        </Grid.RowDefinitions>

        <Viewbox Stretch="Fill" Grid.Row="0" Name="viewBoxTest">

            <TextBox Text="經過調查發現，被阿里打假驅逐的30家售假商家中，竟有12家轉戰到了京東上。" />

        </Viewbox>

        <WrapPanel  Grid.Row="2">

        <StackPanel>

 

                <TextBlock Height="16" HorizontalAlignment="Left"  VerticalAlignment="Bottom" Width="66" Text="拉伸模式：" TextWrapping="Wrap"/>

                <ComboBox x:Name="cbStretch" Height="21" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="139" SelectionChanged="cbStretch_SelectionChanged"/>

 

            </StackPanel>

            <StackPanel>

                <TextBlock Height="16" HorizontalAlignment="Right"  VerticalAlignment="Bottom" Width="56" Text="拉伸方向：" TextWrapping="Wrap"/>

 

                <ComboBox x:Name="cbStretchDirection" Height="21" HorizontalAlignment="Right"  VerticalAlignment="Bottom" Width="139" SelectionChanged="cbStretchDirection_SelectionChanged"/>

 

            </StackPanel>

        </WrapPanel>

    </Grid>

</Window>

c#代碼實現：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

 

namespace WpfApp1

{

 

    /// <summary>

    /// WindowViewBox.xaml 的交互邏輯

    /// </summary>

    public partial class WindowViewBox : Window

    {

        //定義cbStretch與cbStretchDirection的數據源 

List<StretchHelper> cbStretchList = new List<StretchHelper>(); 

List<StretchDirectionHelper> cbStretchDirectionList = new List<StretchDirectionHelper>(); 

 

        public WindowViewBox()

        {

            InitializeComponent();

        }

        private void BindDrp()

        { //填充各ComboBox內容 

            cbStretchList.Add(new StretchHelper() { StretchModeName = "Fill", theStretchMode = Stretch.Fill });

            cbStretchList.Add(new StretchHelper() { StretchModeName = "None", theStretchMode = Stretch.None });

            cbStretchList.Add(new StretchHelper() { StretchModeName = "Uniform", theStretchMode = Stretch.Uniform });

            cbStretchList.Add(new StretchHelper() { StretchModeName = "UniformToFill", theStretchMode = Stretch.UniformToFill });

            cbStretch.ItemsSource = cbStretchList;

            cbStretch.DisplayMemberPath = "StretchModeName";

            cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "DownOnly", theStretchDirection = StretchDirection.DownOnly });

            cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "UpOnly", theStretchDirection = StretchDirection.UpOnly });

            cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "Both", theStretchDirection = StretchDirection.Both });

            cbStretchDirection.ItemsSource = cbStretchDirectionList;

            cbStretchDirection.DisplayMemberPath = "StretchDirectionName";

        }

 

        private void cbStretchDirection_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            if (cbStretchDirection.SelectedItem != null)

            {

                viewBoxTest.StretchDirection = (cbStretchDirection.SelectedItem as StretchDirectionHelper).theStretchDirection;

            } 

        }

 

        private void cbStretch_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            if (cbStretch.SelectedItem != null)

            {

                viewBoxTest.Stretch = (cbStretch.SelectedItem as StretchHelper).theStretchMode;

            } 

        }

 

        private void Window_Loaded(object sender, RoutedEventArgs e)

        {

            BindDrp();

        }

    }

    //輔助類StretchHelper 

    public class StretchHelper

    {

        public string StretchModeName { get; set; }

        public Stretch theStretchMode { get; set; }

    }

    //輔助類StretchDirectionHelper 

    public class StretchDirectionHelper

    {

        public string StretchDirectionName { get; set; }

        public StretchDirection theStretchDirection { get; set; }

    } 

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。