【學習筆記】WPF快速入門：佈局

来源:https://www.cnblogs.com/yexiaozhi/archive/2022/07/23/16512905.html
-Advertisement-
Play Games

佈局（Panel族） WPF佈局使用的是Panel族佈局控制項，它們均派生自Panel抽象類，主要用於控制UI佈局。 WPF佈局容器 WPF常用的佈局容器及使用方法如下： Grid 網格，類似table表格，可靈活設置行列並放置控制項元素，比較常用 Grid的使用思路 - 聲明Grid容器 <Grid> ...


佈局（Panel族）

WPF佈局使用的是Panel族佈局控制項，它們均派生自Panel抽象類，主要用於控制UI佈局。

WPF佈局容器

WPF常用的佈局容器及使用方法如下：

Grid

網格，類似table表格，可靈活設置行列並放置控制項元素，比較常用

Grid的使用思路

- 聲明Grid容器
	<Grid></Grid>
- 定義行列屬性
    <Grid.ColumnDefinitions>	
    	<ColumnDefinition>
	</Grid.ColumnDefinitions>
    <Grid.RowDefinitions>		
    	<RowDefinition>
    </Grid.RowDefinitions>
- 使用網格單元
	<ControlName Grid.Column="0" Grid.Row="0"/>

四種行列高寬設置

  • Auto：根據網格單元內容自動設置大小
  • 數值：直接設置網格單元大小
  • 數值*：剩餘部分按比例分配大小
  • 預設值：預設為1*

Gird佈局練習

<!--#region Gird佈局練習-->
<Grid>
    <!--定義行列數及相關屬性-->
    <Grid.ColumnDefinitions>
        <!--四種行列高寬設置方式-->
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition/>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="100"/>
        <RowDefinition/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="2*"/>
    </Grid.RowDefinitions>
    <!--使用Grid網格單元-->
    <Button Grid.Column="0" Grid.Row="0" Content="我是Button" Width="100" Height="100"/>
    <Border Grid.Column="1" Grid.Row="1" Background="Red"/>
    <Border Grid.Column="2" Grid.Row="2" Background="Yellow"/>
    <Border Grid.Column="3" Grid.Row="3" Grid.ColumnSpan="6" Grid.RowSpan="2" Background="Green"/>
</Grid>
<!--#endregion-->

備註：WPF的解析度無關性

​ WPF程式中的單位是與設備無關的單位，每個單位是1/96英寸，如果電腦的DPI設置為96（每個英寸96個像素），那麼此時每個WPF單位對應一個像素，不過如果電腦的DPI設備為120（每個英寸120個像素），那此時每個WPF單位對應應該是120/96=1.25個像素，也就是說WPF中的控制項在不同解析度的情況下會自動調整，使用不同的像素點渲染，以適應屏幕顯示。

StackPanel

棧式面板，水平或垂直排列元素，移除一個元素後，後面的元素自動向前填補空缺，Orientation屬性: Horizontal / Vertical

StackPanel的使用思路

- 確定是否需要堆棧式佈局，確定佈局採用橫排還是豎排
- 聲明StackPanel容器
- 設置StackPanel屬性，Orientation橫排還是豎排，HorizontalAlignment、VerticalAlignment對齊方式
- 填充StackPanel容器內容

StackPanel佈局練習

<!--#region StackPanel佈局練習-->
<GroupBox Header="請選擇正確的成語" BorderBrush="Black" Margin="5">
    <StackPanel Orientation="Vertical" Margin="10" VerticalAlignment="Center">
        <CheckBox Content="A.迫不及待"/>
        <CheckBox Content="B.首屈一指"/>
        <CheckBox Content="C.陳詞濫調"/>
        <CheckBox Content="D.唉聲嘆氣"/>
        <CheckBox Content="E.不可理喻"/>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Content="清空" Width="60" Margin="5"/>
            <Button Content="確定" Width="60" Margin="5"/>
        </StackPanel>
    </StackPanel>
</GroupBox>
<!--#endregion-->

WrapPanel

自動折行面板，水平或垂直排列元素、如果剩餘空間不足，排不下的控制項會自動換行或換列進行排列，新起一行或一列繼續排列

WrapPanel的使用思路

- 確定是否需要流式佈局，確定佈局採用橫排還是豎排
- 聲明WrapPanel容器
- 設置WrapPanel屬性，Orientation橫排還是豎排，HorizontalAlignment、VerticalAlignment對齊方式
- 填充WrapPanel容器內容

WrapPanel佈局練習

<!--#region WrapPanel佈局練習-->
<WrapPanel Width="400" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button Width="100" Height="50" Content="Button" Margin="5"/>
    <Button Width="100" Height="50" Content="Button" Margin="5"/>
    <Button Width="100" Height="50" Content="Button" Margin="5"/>
    <Button Width="100" Height="50" Content="Button" Margin="5"/>
    <Button Width="100" Height="50" Content="Button" Margin="5"/>
    <Button Width="100" Height="50" Content="Button" Margin="5"/>
    <Button Width="100" Height="50" Content="Button" Margin="5"/>
    <Button Width="100" Height="50" Content="Button" Margin="5"/>
</WrapPanel>
<!--#endregion-->

DockPanel

泊靠式面板， 根據容器的邊界、元素進行Dock.Top、Left、Right、Bottom錨定設置

DockPanel的使用思路

- 確定是否需要流式佈局，確定佈局採用橫排還是豎排
- 聲明DockPanel容器
- 設置DockPanel屬性，HorizontalAlignment、VerticalAlignment對齊方式
- 填充DockPanel容器內容

DockPanel佈局練習

<!--#region DockPanel佈局練習-->
    <DockPanel Width="700" HorizontalAlignment="Center">
    <Button DockPanel.Dock="Top" Width="100" Height="50" Content="Button" Margin="5"/>
    <Button DockPanel.Dock="Bottom" Width="100" Height="50" Content="Button" Margin="5"/>
    <Button DockPanel.Dock="Left" Width="100" Height="50" Content="Button" Margin="5"/>
    <Button DockPanel.Dock="Right" Width="100" Height="50" Content="Button" Margin="5"/>
    <!--預設位置在四個dock方向上的元素邊界的中間位置-->
    <Button Width="100" Height="50" Content="Button" Margin="5"/>
    <Button Width="100" Height="50" Content="Button" Margin="5"/>
    </DockPanel>
<!--#endregion-->


<!--設置LastChildFill="False"-->
<DockPanel Width="700" HorizontalAlignment="Center" LastChildFill="False">
    <Button DockPanel.Dock="Top" Width="100" Height="50" Content="Button" Margin="5"/>
    <Button DockPanel.Dock="Bottom" Width="100" Height="50" Content="Button" Margin="5"/>
    <Button DockPanel.Dock="Left" Width="100" Height="50" Content="Button" Margin="5"/>
    <Button DockPanel.Dock="Right" Width="100" Height="50" Content="Button" Margin="5"/>
    <Button Width="100" Height="50" Content="Button" Margin="5"/>
    <Button Width="100" Height="50" Content="Button" Margin="5"/>
</DockPanel>

Canvas

畫布，內部元素可使用以像素為單位的絕對坐標進行定位，使用固定的坐標設置元素的位置、不具備錨定停靠等功能。

Canvas適用場合

●　一經設計基本上不會再有改動的小型佈局（如圖標）。

●　藝術性比較強的佈局。

●　需要大量使用橫縱坐標進行絕對點定位的佈局。

●　依賴於橫縱坐標的動畫。

Canvas的使用思路

- 確定是否需要Canvas畫布佈局
- 聲明Canvas容器
- 填充Canvas容器內容
- 設置內容屬性，Canvas.Left、Canvas.Top

Canvas佈局練習

<!--#region Canvas佈局練習-->
<Canvas>
    <TextBlock Text="用戶名: " Canvas.Left="12" Canvas.Top="12"/>
    <TextBox Height="23" Width="200" BorderBrush="Black" Canvas.Left="66" Canvas.Top="9"/>
    <TextBlock Text="密碼: " Canvas.Left="12" Canvas.Top="40.72" Height="16" Width="36"/>
    <TextBox Height="23" Width="200" BorderBrush="Black" Canvas.Left ="66" Canvas.Top ="38"/>
    <Button Content="確定" Width="80" Height="22" Canvas.Left ="100" Canvas.Top="87" />
    <Button Content ="清除" Width="80" Height="22" Canvas.Left="186" Canvas.Top="87" />
</Canvas>
<!--#endregion-->


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • windows系統桌面壁紙切換的三種csharp辦法，相容win10及舊版，還有一個現成桌面小程式
    我自己用這些代碼做的小app如下： 第一種，user32.dll /// <summary> /// 調用外部切換壁紙的方法 /// </summary> /// <param name="uAction"></param> /// <param name="uParam"></param> /// ...
  • WPF 實現用戶頭像選擇器
    製作一個用戶頭像選擇器仿 WeGame 製作一個用戶頭像選擇Canvas為父控制項所實現，展示圖片使用Image，Path當作上方的蒙版;Canvas：主要用途方便移動Image，設置ClipToBounds="True"裁剪為一個正方形200x200做為主要展示區域;Image：展示需要裁剪的圖片； ...
  • 關於使用NAudio麥克風揚聲器組件造成WPF應用程式卡死問題跟蹤及非同步隊列的實現
    由於WPF應用程式出現卡死的情況，特記錄一下問題的跟蹤情況 1、多次進行NAudio事件註冊，沒有啟用註銷再註冊的方式，造成應用程式CPU過高 private AudioNotificationClient audioNotification = new AudioNotificationClien ...
  • [原創]九點標定工具之機械手頭部相機標定
    1、機械手頭部相機與龍門架頭部相機的區別？ 上篇文字講解了機械手頭部相機標定原理及方法，中間有提到只適用於龍門架，那為什麼呢？ 答：龍門架在運動過程中，固定在龍門架上的移動相機相對與龍門架本身只有平移關係，而架在機械手上的相機存在角度旋轉；機械手在運動過程中機械臂J1與機械臂J2兩個的角度一直在變化 ...
  • 8K解析度下，使用WPF播放視頻造成UI卡頓的問題
    我們知道，WPF有兩大特性：1、使用DirectX渲染；2、解析度無關性：WPF使用與設備解析度無關的單位來度量計算顯示界面的像素點，相同大小的情況下，解析度越高，像素點就會越多。因此在WPF中，使用矢量圖（會根據WPF進行縮放，清晰度不變）比點陣圖（固定像素點，縮放會出現鋸齒，並且占用空間大）更合適 ...
  • 改善C#程式的方法-(2)使用TryParse
    一 使用TryParse，而不是Parse 除string外的所有基元類型，都有兩個將string類型轉型為其本身類型的方法：Parse 和 TryParse。 以double類型為例，這兩個方法最簡單的原型為： public static Double Parse(string s); publi ...
  • 控制反轉IoC(Invers of Control)
    1.反轉的體現 控制反轉，即IoC(Invers of Control)，它並不是屬於某個特定編程語言的技術，本質上它是設計框架的一種基本思想。ASP.NET Core中的依賴註入其實就是結合了控制反轉的思想所設計出的一套框架。所以為了更好掌握依賴註入，我們就必須先對控制反轉有一個初步的認識。控制反 ...
  • 在Saas系統下多租戶零腳本分表分庫讀寫分離解決方案
    在Saas系統下多租戶零腳本分表分庫讀寫分離解決方案 ## 介紹 本文ShardinfCore版本x.6.0.20+ 本期主角: - [`ShardingCore`](https://github.com/dotnetcore/sharding-core) 一款ef-core下高性能、輕量級針對分表 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類