Alignment、Margin 和 Padding 概述 |
您所在的位置：网站首页 › margin属性4个值顺序 › Alignment、Margin 和 Padding 概述 |
|
Alignment、Margin 和 Padding 概述
项目
09/27/2022
FrameworkElement 类公开一些用于精确定位子元素的属性。 本主题讨论四个最重要的属性：HorizontalAlignment、Margin、Padding 和 VerticalAlignment。 了解这些属性的作用非常重要，因为这些属性是控制元素在 Windows Presentation Foundation (WPF) 应用程序中的位置的基础。 元素定位简介可使用 WPF 通过多种方式来定位元素。 但是，获得理想的布局远不止仅选择正确的 Panel 元素。 对定位的精细控制需要了解 HorizontalAlignment、Margin、Padding 和 VerticalAlignment 属性。 下图显示了一个采用若干定位属性的布局方案。 乍看上去，此图中的 Button 元素似乎是随意放置的。 但是，其位置实际上是通过使用边距、对齐和填充加以精确控制的。 下面的示例描述如何创建上图中的布局。 Border 元素封装父级 StackPanel，并且 Padding 值为 15 个与设备无关的像素。 这解释了围绕子级 StackPanel 的窄 LightBlue 带。 StackPanel 的子元素用于说明本主题中详述的各个定位属性。 三 Button 个元素用于演示 Margin 和 HorizontalAlignment 属性。 // Create the application's main Window. mainWindow = new Window (); mainWindow.Title = "Margins, Padding and Alignment Sample"; // Add a Border myBorder = new Border(); myBorder.Background = Brushes.LightBlue; myBorder.BorderBrush = Brushes.Black; myBorder.Padding = new Thickness(15); myBorder.BorderThickness = new Thickness(2); myStackPanel = new StackPanel(); myStackPanel.Background = Brushes.White; myStackPanel.HorizontalAlignment = HorizontalAlignment.Center; myStackPanel.VerticalAlignment = VerticalAlignment.Top; TextBlock myTextBlock = new TextBlock(); myTextBlock.Margin = new Thickness(5, 0, 5, 0); myTextBlock.FontSize = 18; myTextBlock.HorizontalAlignment = HorizontalAlignment.Center; myTextBlock.Text = "Alignment, Margin and Padding Sample"; Button myButton1 = new Button(); myButton1.HorizontalAlignment = HorizontalAlignment.Left; myButton1.Margin = new Thickness(20); myButton1.Content = "Button 1"; Button myButton2 = new Button(); myButton2.HorizontalAlignment = HorizontalAlignment.Right; myButton2.Margin = new Thickness(10); myButton2.Content = "Button 2"; Button myButton3 = new Button(); myButton3.HorizontalAlignment = HorizontalAlignment.Stretch; myButton3.Margin = new Thickness(0); myButton3.Content = "Button 3"; // Add child elements to the parent StackPanel. myStackPanel.Children.Add(myTextBlock); myStackPanel.Children.Add(myButton1); myStackPanel.Children.Add(myButton2); myStackPanel.Children.Add(myButton3); // Add the StackPanel as the lone Child of the Border. myBorder.Child = myStackPanel; // Add the Border as the Content of the Parent Window Object. mainWindow.Content = myBorder; mainWindow.Show (); WindowTitle = "Margins, Padding and Alignment Sample" 'Add a Border. Dim myBorder As New Border() myBorder.Background = Brushes.LightBlue myBorder.BorderBrush = Brushes.Black myBorder.Padding = New Thickness(15) myBorder.BorderThickness = New Thickness(2) Dim myStackPanel As New StackPanel() myStackPanel.Background = Brushes.White myStackPanel.HorizontalAlignment = Windows.HorizontalAlignment.Center myStackPanel.VerticalAlignment = Windows.VerticalAlignment.Top Dim myTextBlock As New TextBlock() myTextBlock.Margin = New Thickness(5, 0, 5, 0) myTextBlock.FontSize = 18 myTextBlock.HorizontalAlignment = Windows.HorizontalAlignment.Center myTextBlock.Text = "Alignment, Margin and Padding Sample" Dim myButton1 As New Button() myButton1.HorizontalAlignment = Windows.HorizontalAlignment.Left myButton1.Margin = New Thickness(20) myButton1.Content = "Button 1" Dim myButton2 As New Button() myButton2.HorizontalAlignment = Windows.HorizontalAlignment.Right myButton2.Margin = New Thickness(10) myButton2.Content = "Button 2" Dim myButton3 As New Button() myButton3.HorizontalAlignment = Windows.HorizontalAlignment.Stretch myButton3.Margin = New Thickness(0) myButton3.Content = "Button 3" 'Add child elements to the parent StackPanel. myStackPanel.Children.Add(myTextBlock) myStackPanel.Children.Add(myButton1) myStackPanel.Children.Add(myButton2) myStackPanel.Children.Add(myButton3) 'Add the StackPanel as the lone Child of the Border. myBorder.Child = myStackPanel ' Add the Canvas as the lone Child of the Border myBorder.Child = myStackPanel Me.Content = myBorder通过下图可以仔细查看上例中使用的各个定位属性。 本主题的后面各节更详细地介绍了如何使用各个定位属性。 了解 Alignment 属性HorizontalAlignment 和 VerticalAlignment 属性描述子元素应当如何在父元素的已分配布局空间中定位。 结合使用这些属性可精确定位子元素。 例如，DockPanel 的子元素可以指定四种不同的水平对齐方式（Left、Right、Center 或 Stretch）来填补空闲空间。 类似的值可用于垂直定位。 注意 元素上显式设置的 Height 和 Width 属性优先于 Stretch 属性值。 尝试设置 Height、Width 和被忽略的 Stretch 请求中的 Stretch 结果的 HorizontalAlignment 值。 HorizontalAlignment 属性HorizontalAlignment 属性声明适用于子元素的水平对齐特征。 下表列出了 HorizontalAlignment 属性的每个可能值。 成员 说明 Left 子元素与父元素的已分配布局空间的左端对齐。 Center 子元素与父元素的已分配布局空间的中心对齐。 Right 子元素与父元素的已分配布局空间的右端对齐。 Stretch（默认值） 拉伸子元素以填充父元素的已分配布局空间。 显式 Width 值和 Height 值优先。下面的示例演示如何将 HorizontalAlignment 属性应用于 Button 元素。 显示每个特性值，以便更好地阐释各种呈现行为。 Button myButton1 = new Button(); myButton1.HorizontalAlignment = HorizontalAlignment.Left; myButton1.Content = "Button 1 (Left)"; Button myButton2 = new Button(); myButton2.HorizontalAlignment = HorizontalAlignment.Right; myButton2.Content = "Button 2 (Right)"; Button myButton3 = new Button(); myButton3.HorizontalAlignment = HorizontalAlignment.Center; myButton3.Content = "Button 3 (Center)"; Button myButton4 = new Button(); myButton4.HorizontalAlignment = HorizontalAlignment.Stretch; myButton4.Content = "Button 4 (Stretch)"; Dim myButton1 As New Button() myButton1.HorizontalAlignment = Windows.HorizontalAlignment.Left myButton1.Margin = New Thickness(20) myButton1.Content = "Button 1" Dim myButton2 As New Button() myButton2.HorizontalAlignment = Windows.HorizontalAlignment.Right myButton2.Margin = New Thickness(10) myButton2.Content = "Button 2" Dim myButton3 As New Button() myButton3.HorizontalAlignment = Windows.HorizontalAlignment.Center myButton3.Margin = New Thickness(0) myButton3.Content = "Button 3" Dim myButton4 As New Button() myButton4.HorizontalAlignment = Windows.HorizontalAlignment.Stretch myButton4.Content = "Button 4 (Stretch)"以上代码将产生与下图类似的布局。 每个 HorizontalAlignment 值的定位效果均在图中可见。 VerticalAlignment 属性VerticalAlignment 属性描述适用于子元素的垂直对齐特征。 下表列出了 VerticalAlignment 属性的各可能值。 成员 说明 Top 子元素与父元素的已分配布局空间的顶端对齐。 Center 子元素与父元素的已分配布局空间的中心对齐。 Bottom 子元素与父元素的已分配布局空间的底端对齐。 Stretch（默认值） 拉伸子元素以填充父元素的已分配布局空间。 显式 Width 值和 Height 值优先。下面的示例演示如何将 VerticalAlignment 属性应用于 Button 元素。 显示每个特性值，以便更好地阐释各种呈现行为。 在此示例中，使用带有可见网格线的 Grid 元素作为父项，以便更好地阐释各个属性值的布局行为。 TextBlock myTextBlock = new TextBlock(); myTextBlock.FontSize = 18; myTextBlock.HorizontalAlignment = HorizontalAlignment.Center; myTextBlock.Text = "VerticalAlignment Sample"; Grid.SetRow(myTextBlock, 0); Button myButton1 = new Button(); myButton1.VerticalAlignment = VerticalAlignment.Top; myButton1.Content = "Button 1 (Top)"; Grid.SetRow(myButton1, 1); Button myButton2 = new Button(); myButton2.VerticalAlignment = VerticalAlignment.Bottom; myButton2.Content = "Button 2 (Bottom)"; Grid.SetRow(myButton2, 2); Button myButton3 = new Button(); myButton3.VerticalAlignment = VerticalAlignment.Center; myButton3.Content = "Button 3 (Center)"; Grid.SetRow(myButton3, 3); Button myButton4 = new Button(); myButton4.VerticalAlignment = VerticalAlignment.Stretch; myButton4.Content = "Button 4 (Stretch)"; Grid.SetRow(myButton4, 4); Dim myTextBlock As New TextBlock() myTextBlock.FontSize = 18 myTextBlock.HorizontalAlignment = Windows.HorizontalAlignment.Center myTextBlock.Text = "VerticalAlignment Sample" Grid.SetRow(myTextBlock, 0) Dim myButton1 As New Button() myButton1.VerticalAlignment = Windows.VerticalAlignment.Top myButton1.Content = "Button 1 (Top)" Grid.SetRow(myButton1, 1) Dim myButton2 As New Button() myButton2.VerticalAlignment = Windows.VerticalAlignment.Bottom myButton2.Content = "Button 2 (Bottom)" Grid.SetRow(myButton2, 2) Dim myButton3 As New Button() myButton3.VerticalAlignment = Windows.VerticalAlignment.Center myButton3.Content = "Button 3 (Center)" Grid.SetRow(myButton3, 3) Dim myButton4 As New Button() myButton4.VerticalAlignment = Windows.VerticalAlignment.Stretch myButton4.Content = "Button 4 (Stretch)" Grid.SetRow(myButton4, 4) VerticalAlignment Sample Button 1 (Top) Button 2 (Bottom) Button 3 (Center) Button 4 (Stretch)以上代码将产生与下图类似的布局。 每个 VerticalAlignment 值的定位效果均在图中可见。 了解 Margin 属性Margin 属性描述一个元素与其子元素或同级元素之间的距离。 通过使用语法（例如 Margin="20"），Margin 值可以是统一的。 利用此语法，向元素应用 20 个与设备无关的像素的统一 Margin。 Margin 值还可以采用四个不同值的形式，每个值描述一个要应用到左侧、顶部、右侧和底部（采用该顺序）的不同边距，例如 Margin="0,10,5,25"。 Margin 属性的正确使用可很好地控制元素及其相邻元素和子元素的呈现位置。 注意 非零边距在元素的 ActualWidth 和 ActualHeight 外应用空白。 下面的示例演示如何在一组 Button 元素的周围应用统一边距。 Button 元素各个方向的间距都相同，并带有 10 像素的边距缓冲区。 Button^ myButton7 = gcnew Button(); myButton7->Margin = Thickness(10); myButton7->Content = "Button 7"; Button^ myButton8 = gcnew Button(); myButton8->Margin = Thickness(10); myButton8->Content = "Button 8"; Button^ myButton9 = gcnew Button(); myButton9->Margin = Thickness(10); myButton9->Content = "Button 9"; Button myButton7 = new Button(); myButton7.Margin = new Thickness(10); myButton7.Content = "Button 7"; Button myButton8 = new Button(); myButton8.Margin = new Thickness(10); myButton8.Content = "Button 8"; Button myButton9 = new Button(); myButton9.Margin = new Thickness(10); myButton9.Content = "Button 9"; Dim myButton7 As New Button myButton7.Margin = New Thickness(10) myButton7.Content = "Button 7" Dim myButton8 As New Button myButton8.Margin = New Thickness(10) myButton8.Content = "Button 8" Dim myButton9 As New Button myButton9.Margin = New Thickness(10) myButton9.Content = "Button 9" Button 7 Button 8 Button 9在许多情况下，不适合使用统一边距。 对于这些情况，可应用非统一间距。 下面的示例演示如何将非统一边距间距应用于子元素。 按此顺序描述边距：左端、顶端、右端和底端。 Button^ myButton1 = gcnew Button(); myButton1->Margin = Thickness(0, 10, 0, 10); myButton1->Content = "Button 1"; Button^ myButton2 = gcnew Button(); myButton2->Margin = Thickness(0, 10, 0, 10); myButton2->Content = "Button 2"; Button^ myButton3 = gcnew Button(); myButton3->Margin = Thickness(0, 10, 0, 10); Button myButton1 = new Button(); myButton1.Margin = new Thickness(0, 10, 0, 10); myButton1.Content = "Button 1"; Button myButton2 = new Button(); myButton2.Margin = new Thickness(0, 10, 0, 10); myButton2.Content = "Button 2"; Button myButton3 = new Button(); myButton3.Margin = new Thickness(0, 10, 0, 10); Dim myButton1 As New Button myButton1.Margin = New Thickness(0, 10, 0, 10) myButton1.Content = "Button 1" Dim myButton2 As New Button myButton2.Margin = New Thickness(0, 10, 0, 10) myButton2.Content = "Button 2" Dim myButton3 As New Button myButton3.Margin = New Thickness(0, 10, 0, 10) Button 1 Button 2 Button 3 了解 Padding 属性Padding 在大多数方面与 Margin 相似。 Padding 属性只在少数类上公开，主要是为了方便：例如，Block、Border、Control 和 TextBlock 类公开 Padding 属性。 Padding 属性将一个子元素的有效尺寸放大指定的 Thickness 值。 下面的例子展示了如何将 Padding 应用于父级 Border 元素。 myBorder = gcnew Border(); myBorder->Background = Brushes::LightBlue; myBorder->BorderBrush = Brushes::Black; myBorder->BorderThickness = Thickness(2); myBorder->CornerRadius = CornerRadius(45); myBorder->Padding = Thickness(25); myBorder = new Border(); myBorder.Background = Brushes.LightBlue; myBorder.BorderBrush = Brushes.Black; myBorder.BorderThickness = new Thickness(2); myBorder.CornerRadius = new CornerRadius(45); myBorder.Padding = new Thickness(25); Dim myBorder As New Border myBorder.Background = Brushes.LightBlue myBorder.BorderBrush = Brushes.Black myBorder.BorderThickness = New Thickness(2) myBorder.CornerRadius = New CornerRadius(45) myBorder.Padding = New Thickness(25) 在应用程序中使用 Alignment、Margins 和 PaddingHorizontalAlignment、Margin、Padding 和 VerticalAlignment 提供创建复杂用户界面 (UI) 所需的定位控件。 可利用每个属性的作用来更改子元素定位，以便能够灵活地创建动态应用程序和用户体验。 下面的示例演示本主题中详述的各个概念。 此示例以本主题第一个示例中的基础结构为基础，添加了一个 Grid 元素作为第一个示例中 Border 的子项。 Padding 应用于父级 Border 元素。 Grid 用于在三个子 StackPanel 元素之间划分空间。 Button 元素再次用于显示 Margin 和 HorizontalAlignment 的各种效果。 TextBlock 元素添加到每个 ColumnDefinition 中，以更好地定义应用于每列中的 Button 元素的各种属性。 mainWindow = gcnew Window(); myBorder = gcnew Border(); myBorder->Background = Brushes::LightBlue; myBorder->BorderBrush = Brushes::Black; myBorder->BorderThickness = Thickness(2); myBorder->CornerRadius = CornerRadius(45); myBorder->Padding = Thickness(25); // Define the Grid. myGrid = gcnew Grid(); myGrid->Background = Brushes::White; myGrid->ShowGridLines = true; // Define the Columns. ColumnDefinition^ myColDef1 = gcnew ColumnDefinition(); myColDef1->Width = GridLength(1, GridUnitType::Auto); ColumnDefinition^ myColDef2 = gcnew ColumnDefinition(); myColDef2->Width = GridLength(1, GridUnitType::Star); ColumnDefinition^ myColDef3 = gcnew ColumnDefinition(); myColDef3->Width = GridLength(1, GridUnitType::Auto); // Add the ColumnDefinitions to the Grid. myGrid->ColumnDefinitions->Add(myColDef1); myGrid->ColumnDefinitions->Add(myColDef2); myGrid->ColumnDefinitions->Add(myColDef3); // Add the first child StackPanel. StackPanel^ myStackPanel = gcnew StackPanel(); myStackPanel->HorizontalAlignment = HorizontalAlignment::Left; myStackPanel->VerticalAlignment = VerticalAlignment::Top; Grid::SetColumn(myStackPanel, 0); Grid::SetRow(myStackPanel, 0); TextBlock^ myTextBlock1 = gcnew TextBlock(); myTextBlock1->FontSize = 18; myTextBlock1->HorizontalAlignment = HorizontalAlignment::Center; myTextBlock1->Margin = Thickness(0, 0, 0, 15); myTextBlock1->Text = "StackPanel 1"; Button^ myButton1 = gcnew Button(); myButton1->Margin = Thickness(0, 10, 0, 10); myButton1->Content = "Button 1"; Button^ myButton2 = gcnew Button(); myButton2->Margin = Thickness(0, 10, 0, 10); myButton2->Content = "Button 2"; Button^ myButton3 = gcnew Button(); myButton3->Margin = Thickness(0, 10, 0, 10); TextBlock^ myTextBlock2 = gcnew TextBlock(); myTextBlock2->Text = "ColumnDefinition.Width = \"Auto\""; TextBlock^ myTextBlock3 = gcnew TextBlock(); myTextBlock3->Text = "StackPanel.HorizontalAlignment = \"Left\""; TextBlock^ myTextBlock4 = gcnew TextBlock(); myTextBlock4->Text = "StackPanel.VerticalAlignment = \"Top\""; TextBlock^ myTextBlock5 = gcnew TextBlock(); myTextBlock5->Text = "StackPanel.Orientation = \"Vertical\""; TextBlock^ myTextBlock6 = gcnew TextBlock(); myTextBlock6->Text = "Button.Margin = \"1,10,0,10\""; myStackPanel->Children->Add(myTextBlock1); myStackPanel->Children->Add(myButton1); myStackPanel->Children->Add(myButton2); myStackPanel->Children->Add(myButton3); myStackPanel->Children->Add(myTextBlock2); myStackPanel->Children->Add(myTextBlock3); myStackPanel->Children->Add(myTextBlock4); myStackPanel->Children->Add(myTextBlock5); myStackPanel->Children->Add(myTextBlock6); // Add the second child StackPanel. StackPanel^ myStackPanel2 = gcnew StackPanel(); myStackPanel2->HorizontalAlignment = HorizontalAlignment::Stretch; myStackPanel2->VerticalAlignment = VerticalAlignment::Top; myStackPanel2->Orientation = Orientation::Vertical; Grid::SetColumn(myStackPanel2, 1); Grid::SetRow(myStackPanel2, 0); TextBlock^ myTextBlock7 = gcnew TextBlock(); myTextBlock7->FontSize = 18; myTextBlock7->HorizontalAlignment = HorizontalAlignment::Center; myTextBlock7->Margin = Thickness(0, 0, 0, 15); myTextBlock7->Text = "StackPanel 2"; Button^ myButton4 = gcnew Button(); myButton4->Margin = Thickness(10, 0, 10, 0); myButton4->Content = "Button 4"; Button^ myButton5 = gcnew Button(); myButton5->Margin = Thickness(10, 0, 10, 0); myButton5->Content = "Button 5"; Button^ myButton6 = gcnew Button(); myButton6->Margin = Thickness(10, 0, 10, 0); myButton6->Content = "Button 6"; TextBlock^ myTextBlock8 = gcnew TextBlock(); myTextBlock8->HorizontalAlignment = HorizontalAlignment::Center; myTextBlock8->Text = "ColumnDefinition.Width = \"*\""; TextBlock^ myTextBlock9 = gcnew TextBlock(); myTextBlock9->HorizontalAlignment = HorizontalAlignment::Center; myTextBlock9->Text = "StackPanel.HorizontalAlignment = \"Stretch\""; TextBlock^ myTextBlock10 = gcnew TextBlock(); myTextBlock10->HorizontalAlignment = HorizontalAlignment::Center; myTextBlock10->Text = "StackPanel.VerticalAlignment = \"Top\""; TextBlock^ myTextBlock11 = gcnew TextBlock(); myTextBlock11->HorizontalAlignment = HorizontalAlignment::Center; myTextBlock11->Text = "StackPanel.Orientation = \"Horizontal\""; TextBlock^ myTextBlock12 = gcnew TextBlock(); myTextBlock12->HorizontalAlignment = HorizontalAlignment::Center; myTextBlock12->Text = "Button.Margin = \"10,0,10,0\""; myStackPanel2->Children->Add(myTextBlock7); myStackPanel2->Children->Add(myButton4); myStackPanel2->Children->Add(myButton5); myStackPanel2->Children->Add(myButton6); myStackPanel2->Children->Add(myTextBlock8); myStackPanel2->Children->Add(myTextBlock9); myStackPanel2->Children->Add(myTextBlock10); myStackPanel2->Children->Add(myTextBlock11); myStackPanel2->Children->Add(myTextBlock12); // Add the final child StackPanel. StackPanel^ myStackPanel3 = gcnew StackPanel(); myStackPanel3->HorizontalAlignment = HorizontalAlignment::Left; myStackPanel3->VerticalAlignment = VerticalAlignment::Top; Grid::SetColumn(myStackPanel3, 2); Grid::SetRow(myStackPanel3, 0); TextBlock^ myTextBlock13 = gcnew TextBlock(); myTextBlock13->FontSize = 18; myTextBlock13->HorizontalAlignment = HorizontalAlignment::Center; myTextBlock13->Margin = Thickness(0, 0, 0, 15); myTextBlock13->Text = "StackPanel 3"; Button^ myButton7 = gcnew Button(); myButton7->Margin = Thickness(10); myButton7->Content = "Button 7"; Button^ myButton8 = gcnew Button(); myButton8->Margin = Thickness(10); myButton8->Content = "Button 8"; Button^ myButton9 = gcnew Button(); myButton9->Margin = Thickness(10); myButton9->Content = "Button 9"; TextBlock^ myTextBlock14 = gcnew TextBlock(); myTextBlock14->Text = "ColumnDefinition.Width = \"Auto\""; TextBlock^ myTextBlock15 = gcnew TextBlock(); myTextBlock15->Text = "StackPanel.HorizontalAlignment = \"Left\""; TextBlock^ myTextBlock16 = gcnew TextBlock(); myTextBlock16->Text = "StackPanel.VerticalAlignment = \"Top\""; TextBlock^ myTextBlock17 = gcnew TextBlock(); myTextBlock17->Text = "StackPanel.Orientation = \"Vertical\""; TextBlock^ myTextBlock18 = gcnew TextBlock(); myTextBlock18->Text = "Button.Margin = \"10\""; myStackPanel3->Children->Add(myTextBlock13); myStackPanel3->Children->Add(myButton7); myStackPanel3->Children->Add(myButton8); myStackPanel3->Children->Add(myButton9); myStackPanel3->Children->Add(myTextBlock14); myStackPanel3->Children->Add(myTextBlock15); myStackPanel3->Children->Add(myTextBlock16); myStackPanel3->Children->Add(myTextBlock17); myStackPanel3->Children->Add(myTextBlock18); // Add child content to the parent Grid. myGrid->Children->Add(myStackPanel); myGrid->Children->Add(myStackPanel2); myGrid->Children->Add(myStackPanel3); // Add the Grid as the lone child of the Border. myBorder->Child = myGrid; // Add the Border to the Window as Content and show the Window. mainWindow->Content = myBorder; mainWindow->Title = "Margin, Padding, and Alignment Sample"; mainWindow->Show(); mainWindow = new Window(); myBorder = new Border(); myBorder.Background = Brushes.LightBlue; myBorder.BorderBrush = Brushes.Black; myBorder.BorderThickness = new Thickness(2); myBorder.CornerRadius = new CornerRadius(45); myBorder.Padding = new Thickness(25); // Define the Grid. myGrid = new Grid(); myGrid.Background = Brushes.White; myGrid.ShowGridLines = true; // Define the Columns. ColumnDefinition myColDef1 = new ColumnDefinition(); myColDef1.Width = new GridLength(1, GridUnitType.Auto); ColumnDefinition myColDef2 = new ColumnDefinition(); myColDef2.Width = new GridLength(1, GridUnitType.Star); ColumnDefinition myColDef3 = new ColumnDefinition(); myColDef3.Width = new GridLength(1, GridUnitType.Auto); // Add the ColumnDefinitions to the Grid. myGrid.ColumnDefinitions.Add(myColDef1); myGrid.ColumnDefinitions.Add(myColDef2); myGrid.ColumnDefinitions.Add(myColDef3); // Add the first child StackPanel. StackPanel myStackPanel = new StackPanel(); myStackPanel.HorizontalAlignment = HorizontalAlignment.Left; myStackPanel.VerticalAlignment = VerticalAlignment.Top; Grid.SetColumn(myStackPanel, 0); Grid.SetRow(myStackPanel, 0); TextBlock myTextBlock1 = new TextBlock(); myTextBlock1.FontSize = 18; myTextBlock1.HorizontalAlignment = HorizontalAlignment.Center; myTextBlock1.Margin = new Thickness(0, 0, 0, 15); myTextBlock1.Text = "StackPanel 1"; Button myButton1 = new Button(); myButton1.Margin = new Thickness(0, 10, 0, 10); myButton1.Content = "Button 1"; Button myButton2 = new Button(); myButton2.Margin = new Thickness(0, 10, 0, 10); myButton2.Content = "Button 2"; Button myButton3 = new Button(); myButton3.Margin = new Thickness(0, 10, 0, 10); TextBlock myTextBlock2 = new TextBlock(); myTextBlock2.Text = @"ColumnDefinition.Width = ""Auto"""; TextBlock myTextBlock3 = new TextBlock(); myTextBlock3.Text = @"StackPanel.HorizontalAlignment = ""Left"""; TextBlock myTextBlock4 = new TextBlock(); myTextBlock4.Text = @"StackPanel.VerticalAlignment = ""Top"""; TextBlock myTextBlock5 = new TextBlock(); myTextBlock5.Text = @"StackPanel.Orientation = ""Vertical"""; TextBlock myTextBlock6 = new TextBlock(); myTextBlock6.Text = @"Button.Margin = ""1,10,0,10"""; myStackPanel.Children.Add(myTextBlock1); myStackPanel.Children.Add(myButton1); myStackPanel.Children.Add(myButton2); myStackPanel.Children.Add(myButton3); myStackPanel.Children.Add(myTextBlock2); myStackPanel.Children.Add(myTextBlock3); myStackPanel.Children.Add(myTextBlock4); myStackPanel.Children.Add(myTextBlock5); myStackPanel.Children.Add(myTextBlock6); // Add the second child StackPanel. StackPanel myStackPanel2 = new StackPanel(); myStackPanel2.HorizontalAlignment = HorizontalAlignment.Stretch; myStackPanel2.VerticalAlignment = VerticalAlignment.Top; myStackPanel2.Orientation = Orientation.Vertical; Grid.SetColumn(myStackPanel2, 1); Grid.SetRow(myStackPanel2, 0); TextBlock myTextBlock7 = new TextBlock(); myTextBlock7.FontSize = 18; myTextBlock7.HorizontalAlignment = HorizontalAlignment.Center; myTextBlock7.Margin = new Thickness(0, 0, 0, 15); myTextBlock7.Text = "StackPanel 2"; Button myButton4 = new Button(); myButton4.Margin = new Thickness(10, 0, 10, 0); myButton4.Content = "Button 4"; Button myButton5 = new Button(); myButton5.Margin = new Thickness(10, 0, 10, 0); myButton5.Content = "Button 5"; Button myButton6 = new Button(); myButton6.Margin = new Thickness(10, 0, 10, 0); myButton6.Content = "Button 6"; TextBlock myTextBlock8 = new TextBlock(); myTextBlock8.HorizontalAlignment = HorizontalAlignment.Center; myTextBlock8.Text = @"ColumnDefinition.Width = ""*"""; TextBlock myTextBlock9 = new TextBlock(); myTextBlock9.HorizontalAlignment = HorizontalAlignment.Center; myTextBlock9.Text = @"StackPanel.HorizontalAlignment = ""Stretch"""; TextBlock myTextBlock10 = new TextBlock(); myTextBlock10.HorizontalAlignment = HorizontalAlignment.Center; myTextBlock10.Text = @"StackPanel.VerticalAlignment = ""Top"""; TextBlock myTextBlock11 = new TextBlock(); myTextBlock11.HorizontalAlignment = HorizontalAlignment.Center; myTextBlock11.Text = @"StackPanel.Orientation = ""Horizontal"""; TextBlock myTextBlock12 = new TextBlock(); myTextBlock12.HorizontalAlignment = HorizontalAlignment.Center; myTextBlock12.Text = @"Button.Margin = ""10,0,10,0"""; myStackPanel2.Children.Add(myTextBlock7); myStackPanel2.Children.Add(myButton4); myStackPanel2.Children.Add(myButton5); myStackPanel2.Children.Add(myButton6); myStackPanel2.Children.Add(myTextBlock8); myStackPanel2.Children.Add(myTextBlock9); myStackPanel2.Children.Add(myTextBlock10); myStackPanel2.Children.Add(myTextBlock11); myStackPanel2.Children.Add(myTextBlock12); // Add the final child StackPanel. StackPanel myStackPanel3 = new StackPanel(); myStackPanel3.HorizontalAlignment = HorizontalAlignment.Left; myStackPanel3.VerticalAlignment = VerticalAlignment.Top; Grid.SetColumn(myStackPanel3, 2); Grid.SetRow(myStackPanel3, 0); TextBlock myTextBlock13 = new TextBlock(); myTextBlock13.FontSize = 18; myTextBlock13.HorizontalAlignment = HorizontalAlignment.Center; myTextBlock13.Margin = new Thickness(0, 0, 0, 15); myTextBlock13.Text = "StackPanel 3"; Button myButton7 = new Button(); myButton7.Margin = new Thickness(10); myButton7.Content = "Button 7"; Button myButton8 = new Button(); myButton8.Margin = new Thickness(10); myButton8.Content = "Button 8"; Button myButton9 = new Button(); myButton9.Margin = new Thickness(10); myButton9.Content = "Button 9"; TextBlock myTextBlock14 = new TextBlock(); myTextBlock14.Text = @"ColumnDefinition.Width = ""Auto"""; TextBlock myTextBlock15 = new TextBlock(); myTextBlock15.Text = @"StackPanel.HorizontalAlignment = ""Left"""; TextBlock myTextBlock16 = new TextBlock(); myTextBlock16.Text = @"StackPanel.VerticalAlignment = ""Top"""; TextBlock myTextBlock17 = new TextBlock(); myTextBlock17.Text = @"StackPanel.Orientation = ""Vertical"""; TextBlock myTextBlock18 = new TextBlock(); myTextBlock18.Text = @"Button.Margin = ""10"""; myStackPanel3.Children.Add(myTextBlock13); myStackPanel3.Children.Add(myButton7); myStackPanel3.Children.Add(myButton8); myStackPanel3.Children.Add(myButton9); myStackPanel3.Children.Add(myTextBlock14); myStackPanel3.Children.Add(myTextBlock15); myStackPanel3.Children.Add(myTextBlock16); myStackPanel3.Children.Add(myTextBlock17); myStackPanel3.Children.Add(myTextBlock18); // Add child content to the parent Grid. myGrid.Children.Add(myStackPanel); myGrid.Children.Add(myStackPanel2); myGrid.Children.Add(myStackPanel3); // Add the Grid as the lone child of the Border. myBorder.Child = myGrid; // Add the Border to the Window as Content and show the Window. mainWindow.Content = myBorder; mainWindow.Title = "Margin, Padding, and Alignment Sample"; mainWindow.Show(); Dim myBorder As New Border myBorder.Background = Brushes.LightBlue myBorder.BorderBrush = Brushes.Black myBorder.BorderThickness = New Thickness(2) myBorder.CornerRadius = New CornerRadius(45) myBorder.Padding = New Thickness(25) 'Define the Grid. Dim myGrid As New Grid myGrid.Background = Brushes.White myGrid.ShowGridLines = True 'Define the Columns. Dim myColDef1 As New ColumnDefinition myColDef1.Width = New GridLength(1, GridUnitType.Auto) Dim myColDef2 As New ColumnDefinition myColDef2.Width = New GridLength(1, GridUnitType.Star) Dim myColDef3 As New ColumnDefinition myColDef3.Width = New GridLength(1, GridUnitType.Auto) 'Add the ColumnDefinitions to the Grid myGrid.ColumnDefinitions.Add(myColDef1) myGrid.ColumnDefinitions.Add(myColDef2) myGrid.ColumnDefinitions.Add(myColDef3) 'Add the first child StackPanel. Dim myStackPanel As New StackPanel myStackPanel.HorizontalAlignment = System.Windows.HorizontalAlignment.Left myStackPanel.VerticalAlignment = System.Windows.VerticalAlignment.Top Grid.SetColumn(myStackPanel, 0) Grid.SetRow(myStackPanel, 0) Dim myTextBlock1 As New TextBlock myTextBlock1.FontSize = 18 myTextBlock1.HorizontalAlignment = System.Windows.HorizontalAlignment.Center myTextBlock1.Margin = New Thickness(0, 0, 0, 15) myTextBlock1.Text = "StackPanel 1" Dim myButton1 As New Button myButton1.Margin = New Thickness(0, 10, 0, 10) myButton1.Content = "Button 1" Dim myButton2 As New Button myButton2.Margin = New Thickness(0, 10, 0, 10) myButton2.Content = "Button 2" Dim myButton3 As New Button myButton3.Margin = New Thickness(0, 10, 0, 10) Dim myTextBlock2 As New TextBlock myTextBlock2.Text = "ColumnDefinition.Width = ""Auto""" Dim myTextBlock3 As New TextBlock myTextBlock3.Text = "StackPanel.HorizontalAlignment = ""Left""" Dim myTextBlock4 As New TextBlock myTextBlock4.Text = "StackPanel.VerticalAlignment = ""Top""" Dim myTextBlock5 As New TextBlock myTextBlock5.Text = "StackPanel.Orientation = ""Vertical""" Dim myTextBlock6 As New TextBlock myTextBlock6.Text = "Button.Margin = ""1,10,0,10""" myStackPanel.Children.Add(myTextBlock1) myStackPanel.Children.Add(myButton1) myStackPanel.Children.Add(myButton2) myStackPanel.Children.Add(myButton3) myStackPanel.Children.Add(myTextBlock2) myStackPanel.Children.Add(myTextBlock3) myStackPanel.Children.Add(myTextBlock4) myStackPanel.Children.Add(myTextBlock5) myStackPanel.Children.Add(myTextBlock6) 'Add the second child StackPanel. Dim myStackPanel2 As New StackPanel myStackPanel2.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch myStackPanel2.VerticalAlignment = System.Windows.VerticalAlignment.Top myStackPanel2.Orientation = Orientation.Vertical Grid.SetColumn(myStackPanel2, 1) Grid.SetRow(myStackPanel2, 0) Dim myTextBlock7 As New TextBlock myTextBlock7.FontSize = 18 myTextBlock7.HorizontalAlignment = System.Windows.HorizontalAlignment.Center myTextBlock7.Margin = New Thickness(0, 0, 0, 15) myTextBlock7.Text = "StackPanel 2" Dim myButton4 As New Button myButton4.Margin = New Thickness(10, 0, 10, 0) myButton4.Content = "Button 4" Dim myButton5 As New Button myButton5.Margin = New Thickness(10, 0, 10, 0) myButton5.Content = "Button 5" Dim myButton6 As New Button myButton6.Margin = New Thickness(10, 0, 10, 0) myButton6.Content = "Button 6" Dim myTextBlock8 As New TextBlock myTextBlock8.HorizontalAlignment = System.Windows.HorizontalAlignment.Center myTextBlock8.Text = "ColumnDefinition.Width = ""*""" Dim myTextBlock9 As New TextBlock myTextBlock9.HorizontalAlignment = System.Windows.HorizontalAlignment.Center myTextBlock9.Text = "StackPanel.HorizontalAlignment = ""Stretch""" Dim myTextBlock10 As New TextBlock myTextBlock10.HorizontalAlignment = System.Windows.HorizontalAlignment.Center myTextBlock10.Text = "StackPanel.VerticalAlignment = ""Top""" Dim myTextBlock11 As New TextBlock myTextBlock11.HorizontalAlignment = System.Windows.HorizontalAlignment.Center myTextBlock11.Text = "StackPanel.Orientation = ""Horizontal""" Dim myTextBlock12 As New TextBlock myTextBlock12.HorizontalAlignment = System.Windows.HorizontalAlignment.Center myTextBlock12.Text = "Button.Margin = ""10,0,10,0""" myStackPanel2.Children.Add(myTextBlock7) myStackPanel2.Children.Add(myButton4) myStackPanel2.Children.Add(myButton5) myStackPanel2.Children.Add(myButton6) myStackPanel2.Children.Add(myTextBlock8) myStackPanel2.Children.Add(myTextBlock9) myStackPanel2.Children.Add(myTextBlock10) myStackPanel2.Children.Add(myTextBlock11) myStackPanel2.Children.Add(myTextBlock12) 'Add the final child StackPanel. Dim myStackPanel3 As New StackPanel myStackPanel3.HorizontalAlignment = System.Windows.HorizontalAlignment.Left myStackPanel3.VerticalAlignment = System.Windows.VerticalAlignment.Top Grid.SetColumn(myStackPanel3, 2) Grid.SetRow(myStackPanel3, 0) Dim myTextBlock13 As New TextBlock myTextBlock13.FontSize = 18 myTextBlock13.HorizontalAlignment = System.Windows.HorizontalAlignment.Center myTextBlock13.Margin = New Thickness(0, 0, 0, 15) myTextBlock13.Text = "StackPanel 3" Dim myButton7 As New Button myButton7.Margin = New Thickness(10) myButton7.Content = "Button 7" Dim myButton8 As New Button myButton8.Margin = New Thickness(10) myButton8.Content = "Button 8" Dim myButton9 As New Button myButton9.Margin = New Thickness(10) myButton9.Content = "Button 9" Dim myTextBlock14 As New TextBlock myTextBlock14.Text = "ColumnDefinition.Width = ""Auto""" Dim myTextBlock15 As New TextBlock myTextBlock15.Text = "StackPanel.HorizontalAlignment = ""Left""" Dim myTextBlock16 As New TextBlock myTextBlock16.Text = "StackPanel.VerticalAlignment = ""Top""" Dim myTextBlock17 As New TextBlock myTextBlock17.Text = "StackPanel.Orientation = ""Vertical""" Dim myTextBlock18 As New TextBlock myTextBlock18.Text = "Button.Margin = ""10""" myStackPanel3.Children.Add(myTextBlock13) myStackPanel3.Children.Add(myButton7) myStackPanel3.Children.Add(myButton8) myStackPanel3.Children.Add(myButton9) myStackPanel3.Children.Add(myTextBlock14) myStackPanel3.Children.Add(myTextBlock15) myStackPanel3.Children.Add(myTextBlock16) myStackPanel3.Children.Add(myTextBlock17) myStackPanel3.Children.Add(myTextBlock18) 'Add child content to the parent Grid. myGrid.Children.Add(myStackPanel) myGrid.Children.Add(myStackPanel2) myGrid.Children.Add(myStackPanel3) 'Add the Grid as the lone child of the Border. myBorder.Child = myGrid StackPanel1 Button 1 Button 2 Button 3 ColumnDefinition.Width="Auto" StackPanel.HorizontalAlignment="Left" StackPanel.VerticalAlignment="Top" StackPanel.Orientation="Vertical" Button.Margin="0,10,0,10" StackPanel2 Button 4 Button 5 Button 6 ColumnDefinition.Width="*" StackPanel.HorizontalAlignment="Stretch" StackPanel.VerticalAlignment="Top" StackPanel.Orientation="Horizontal" Button.Margin="10,0,10,0" StackPanel3 Button 7 Button 8 Button 9 ColumnDefinition.Width="Auto" StackPanel.HorizontalAlignment="Left" StackPanel.VerticalAlignment="Top" StackPanel.Orientation="Vertical" Button.Margin="10"编译后，前面的应用程序生成类似于下图的 UI。 可在元素之间的间距中一目了然地看到各个属性值的效果，并且各列中元素的重要属性值显示在 TextBlock 元素内。 后续步骤利用 FrameworkElement 类定义的定位属性，可精确控制元素在 WPF 应用程序内的位置。 至此你已了解多种方法，可使用这些方法更好地通过 WPF 来定位元素。 我们还提供了一些附加资源，这些资源更详细地介绍 WPF 布局。 面板概述主题包含有关各个 Panel 元素的更多详细信息。 主题演练：我的第一个 WPF 桌面应用程序介绍使用布局元素来定位组件并将其操作绑定到数据源的高级方法。 另请参阅 FrameworkElement HorizontalAlignment VerticalAlignment Margin 面板概述 布局 WPF 布局库示例 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |