自定義應用程序並將它們與您的主題對齊

在本教程中，我將向您展示如何使用 Power Apps 平台中的不同工具和功能自定義應用。自定義應用程序可以幫助您打造與您喜歡的主題或品牌完美契合的獨特外觀，同時有效地提供您想要顯示的數據。

如果您已閱讀有關Power Apps 的其他教程，您會發現該平台的最大優勢在於其易用性。

目錄

• 自定義應用程序：主屏幕和文檔屏幕
• 使用文檔屏幕自定義應用程序
• 通過添加按鈕自定義應用程序
• 通過添加圖庫自定義應用程序
• 向按鈕和圖標添加導航
• 結論

自定義應用程序：主屏幕和文檔屏幕

從空白畫布啟動應用程序時，從主屏幕和文檔屏幕開始非常重要。擁有這兩個屏幕將有助於加快您的整個過程，並有助於您在整個應用程序中保持統一的外觀，無論您最終有多少個屏幕。

主屏幕充當整個應用程序的模板。它決定了其餘屏幕的外觀。對於這個例子，這就是我們的主屏幕的樣子。

如您所見，我們在頂部區域有一個標題，它位於一個紅色矩形的頂部，該矩形也橫跨屏幕的長度。這意味著當我們向應用程序添加更多屏幕時，每個頁面都將始終具有該標題。

至於文檔屏幕，它作為我們正在構建的應用程序中要使用的所有元素的參考點。由於我們在主屏幕上已經有一個標題和一個頂部欄，所以讓我們在文檔屏幕上也有相同的東西。

我們這裡已經有了一個紅色矩形。

所以我們只需要添加標題。為此，只需使用“插入”功能區下的“文本”下拉菜單創建一個標籤。

現在這裡有一個文本框，我們希望使用與主屏幕上相同的字體大小。

回到主屏幕上的標籤，顯示字體大小為40。

因此，我也會將文檔屏幕上的文本設為 40。

由於我們將使用文檔屏幕作為參考點，因此正確標記其中的所有元素非常重要。目前，這裡的元素名為 Label3 和 Rectangle2，它們都很通用。

因此，讓我們重命名它們並將它們稱為 Title 和 TopBar。

使用文檔屏幕自定義應用程序

現在我們已經正確標記了文檔屏幕中的元素，我們可以開始自定義其他屏幕了。在這種情況下，我們唯一擁有的其他屏幕就是主屏幕。

假設主屏幕上的標題大小仍然不正確。我們需要做的就是在主屏幕上選擇 Label1。然後，在屬性的下拉菜單中選擇 Size，我們將在文檔屏幕上輸入我們想要引用的元素的名稱（在本例中為 Title），然後跟踪我們想要模仿的屬性。

一旦我們在輸入 Title.Size 後按下回車鍵，它應該會自動更改我們自定義的元素。

除了尺寸，我們還可以自定義標籤的顏色。假設我想將其更改為白色。因此，只需突出顯示名為 Title 的元素，從下拉列表中選擇 Color，然後輸入 White。

現在我們的文檔頁面上的標題是白色的，讓我們跳回主屏幕，看看如果我們也引用該屬性會發生什麼。突出顯示主屏幕下的 Label1，然後鍵入 Title.Color。

一旦我們按下 Enter，您就會看到它不僅會改變我們定制的元素的顏色。它還在公式欄上顯示 RGBA 顏色代碼。

現在，我將向您展示另一種使用文檔屏幕進行自定義的方法。我將通過查看圖標下的下拉菜單來添加一個矩形。

我希望這個矩形成為我的主屏幕背景的基礎。所以我將把這個元素重命名為 Background。

在右窗格中，我可以在“屬性”選項卡下為該元素選擇顏色。

我會選擇一種較淺的灰色，這樣它就不會干擾我們在屏幕上添加其他元素時的顯示方式。

現在，讓我們轉到主屏幕。我們這裡還有兩個元素——標籤和矩形。但是對於我們改變屏幕的背景顏色，我們不需要在這裡添加另一個元素。

確保主屏幕突出顯示，我將在下拉列表下查找 Fill。然後，在公式欄上，我將引用我們之前創建的矩形及其填充顏色。在我輸入 Background.Fill 後按 Enter 後，您會看到該屏幕上的背景現在顯示與我們的參考相同的顏色。

雖然我們是一個一個地添加元素並選擇它們各自的顏色，但也可以使用主頁功能區下的默認主題。這些應該足夠了，特別是如果任何主題與您的品牌相匹配。

但是，如果沒有一個主題符合您的需要，那麼文檔方法就可以完美地工作。

通過添加按鈕自定義應用程序

我們可以添加到應用程序中的一個有用元素是按鈕。按鈕是讓用戶從應用程序的一部分跳轉到另一部分的好方法。這在應用程序的主屏幕上會很棒。

所以讓我們先創建一個主屏幕。由於我們已經有了一個主屏幕，我們可以復制它來省去從頭開始創建主屏幕的麻煩。

如您所見，兩個屏幕上都有完全相同的元素。

讓我們重命名複製的主屏幕並將其稱為 HomeScreen。

如果您檢查主屏幕下的元素，您會發現它也帶有我們在自定義主屏幕時所做的相同引用。例如，如果您查看 Label1_1，它仍然引用文檔屏幕中標題的大小。

由於這將成為我們的主屏幕，讓我們更改該標籤上的文本。為此，我們只需在右側的“屬性”窗格下鍵入新文本即可。讓我們輸入主屏幕。

現在，讓我們在主屏幕上添加一個按鈕。我們可以通過單擊“插入”功能區下的“按鈕”來做到這一點。

就像任何其他元素一樣，我們可以將按鈕拖動到任何我們想要的地方，並通過單擊並拖動元素周圍的點來調整它的大小。

接下來，讓我們將此按鈕上的文本更改為“View Customers”。只需突出顯示按鈕，從屬性下拉列表中選擇文本，然後直接在公式欄中鍵入查看客戶。

為了讓它看起來更專業，讓我們添加一個放大鏡圖標。

您可以四處移動圖標並調整其大小。在這種情況下，讓我們把它放在這個按鈕上的文本之上。

然後，讓我們轉到右側的屬性窗格，將放大鏡的顏色更改為白色。

為了使它更美觀，讓我們也更改按鈕的顏色。但我們必須從文檔屏幕進行操作，以便在構建其他屏幕時可以輕鬆引用相同的顏色和設置。

讓我們突出顯示我們添加的這些新元素，然後單擊 Ctrl + C 複製它們。

然後，轉到文檔屏幕並單擊 Ctrl + V 將元素粘貼到該屏幕上。

由於我們的 TopBar 是栗色的，我們要確保按鈕的顏色與其相得益彰。

因此，讓我們將顏色更改為適合我們主題的顏色。

我們必須確保主屏幕按鈕與我們剛剛在文檔屏幕上設置的屬性相匹配。我們需要做的第一件事是將此元素的名稱更改為 HomeScreenButton。

然後，讓我們回到主屏幕並更改按鈕的 Fill 以匹配我們在文檔屏幕上設置的內容。

從表面上看，“查看客戶”按鈕看起來很適合我們選擇的顏色。但是當我們將鼠標懸停在它上面時，您會看到它仍然會變回原來的藍色。

要改變它，只需尋找 HoverFill。

查看懸停填充的當前屬性，它顯示顏色褪色 20%，但也使用特定顏色作為參考，這是我們不想要的。

因此，我們不引用特定的 RGBA 顏色代碼，而是引用 HomeSreenButton.Fill。

一旦我們按下回車鍵，您會看到按鈕現在使用了我們想要的顏色。

我們需要修復的另一件事是單擊按鈕時顯示的顏色。如您所見，單擊它時它會變成白色。

解決這個問題的最佳方法是確保我們使用的圖標（即放大鏡）在單擊按鈕時不會隱藏。我們可以通過更改圖標的顏色並將其設置為與 TopBar 相同的顏色來實現。

由於我們在主屏幕上需要三個按鈕，因此我們需要將這個特定按鈕複製兩次。為此，只需突出顯示元素並單擊 Ctrl + C 複製它們。

然後，只需單擊 Ctrl + V 即可在此屏幕上粘貼相同的元素。再做一次同樣的事情來添加第三個按鈕。然後，我們將它們拖到正確的位置以確保屏幕看起來不錯。

現在，讓我們更改文本。第二個是添加新客戶，第三個是查看代理。

現在我們在這裡有了三個按鈕，讓我們確保它們確實在某個地方。我們需要準備放置這些按鈕的屏幕。

通過添加圖庫自定義應用程序

圖庫是以特定方式佈置的項目集合或列表。想想您手機上的聯繫人。這是畫廊的一個很好的例子。

主屏幕上的第一個按鈕用於查看客戶，因此我們將創建一個新屏幕，該按鈕將放置在該屏幕上。這個屏幕將成為畫廊的好地方。

就像我們對其他屏幕所做的一樣，我們將復制主屏幕並將其重命名為 ViewCustomersScreen。

接下來，我們將單擊“插入”按鈕下的“圖庫”。圖庫有不同的格式，但對於這個特定的應用程序，讓我們使用垂直佈局。

這就是垂直畫廊的樣子。

如您所見，它僅顯示三個條目。但是，如果您向下拖動畫廊以填滿屏幕，它會添加條目來填滿空間。

即使圖庫當前顯示四個空白條目，也不意味著我們只能在此處容納四組數據。在 PowerApps 中，畫廊將根據數據自動創建準確數量的條目。

由於我們的數據不攜帶圖像，讓我們將佈局更改為標題、副標題和正文。

我們當前的圖庫尚未連接到數據源，這就是為什麼它會在我們單擊圖庫時自動要求我們選擇數據源。

如果此彈出窗口沒有自動顯示，您可以通過右側的屬性窗格添加數據源。

選擇源後，只需打開可以找到源文件的文件夾。

我們將使用此客戶文件中的數據。

這就是電子表格中的內容。這是我們想要顯示在我們的畫廊中的數據。

一旦我點擊它，它就會讓我選擇一張桌子。

一旦我選擇了那個表格，其中的數據就會顯示在圖庫中。

現在，圖庫中的每個項目都在頂部顯示代理名稱。

但是，如果我們在頂部顯示 First Name 和 Last Name 會更有意義。因此，讓我們通過轉到公式欄來更改它。由於名字和姓氏位於兩個單獨的列中，因此我們將使用連接。

我們選擇的佈局的好處在於它為我們提供了更多空間來在每張卡片上放置更多信息。所以我們可以把客戶位置放在第二行。

然後我們就可以使用第三行的VIP等級了。

創建新畫布的優勢在於我們可以使用的空間量，尤其是在平板電腦模式下。例如，對於這個畫廊，即使我們已經在每張卡片上顯示了相當多的信息，我們仍然有很多空間。

因此，讓我們通過更改環繞計數來最大化空間。我們可以在屬性窗格中執行此操作。

讓我們將其更改為 3 而不是 1，以便我們可以擁有一個多列畫廊。

這樣可以更輕鬆地一目了然。

向按鈕和圖標添加導航

現在我們有幾個屏幕可以使用，我們可以開始添加導航，將我們從一個屏幕帶到另一個屏幕。

首先，讓我們通過單擊“插入”功能區下的“圖標”來添加主頁圖標。我們將把它放在查看客戶屏幕的頂部。

讓我們把這個圖標設為白色，因為我們有一個深色背景。

添加導航後，單擊該主頁圖標將使我們立即返回主屏幕。我們還將在主屏幕上的“查看客戶”按鈕上添加一些導航，將我們帶到“查看客戶”屏幕。

讓我們首先突出顯示 View Customers 按鈕，然後在屬性下拉列表下查找 OnSelect。這將為我們的導航設置觸發器。

然後，在公式欄上，我們將使用導航並引用我們想要轉到的屏幕，即 ViewCustomersScreen。

設置完成後，每次單擊“查看客戶”按鈕時，我們都會被帶到我們設置的畫廊。

現在讓我們轉到查看客戶屏幕。我們需要確保當用戶點擊這個主頁圖標時，他們會被帶回主屏幕。

有兩種方法可以做到這一點。首先，我們可以使用返回。這基本上會將您帶回到您訪問的最後一個屏幕。

該命令的問題是我們在此應用程序中有多個屏幕。這意味著我們不一定總是來自主屏幕。所以如果我們在這裡有一個後退按鈕或圖標而不是主頁圖標，這個命令很可能更適合。

更適用的命令是 Navigate。我們還將引用 HomeScreen 以告知 PowerApps 我們希望此圖標指向何處。

既然我們已經將導航添加到該屏幕，我們需要做的最後一件事就是將標題上的文本更改為 View Customers。

現在，我們的屏幕都已設置好，正確的數據顯示在我們的圖庫中，並且導航按鈕將我們帶到應用程序的不同屏幕。

結論

看看在 Power Apps 上自定義應用程序的便利性，就更清楚了 Microsoft 如何設計這個平台以提高效率。一切都易於編輯和自定義，任何人都不需要花費大量時間從頭開始創建應用程序。

這只是我們可以通過 PowerApps 完成的事情的一小部分。除了圖庫和附加屏幕之外，我們還可以添加其他內容來使我們的應用程序更加全面。我們將在其他教程中討論這些內容。

一切順利，

亨利

Power Apps 簡介：定義、特性、函數和重要性
Power Apps 環境：正確設置 App 元素
PowerApps 函數和公式 | 一個介紹