ImageButton

發行項
05/14/2024

.NET 多平臺應用程式 UI （.NET MAUI） ImageButton 檢視結合了 Button 檢視和 Image 檢視，以建立內容為影像的按鈕。當您用手指按 ImageButton 或用滑鼠按一下它時，它會指示應用程式執行工作。不過，與檢視不同的 Button ImageButton 是，檢視沒有文字和文字外觀的概念。

ImageButton 會定義下列屬性：

Aspect型 Aspect 別為的，決定影像的縮放方式以符合顯示區域。
BorderColor型 Color 別為的，描述按鈕的框線色彩。
BorderWidth型 double 別為的，會定義按鈕框線的寬度。
Command型 ICommand 別為的，定義點選按鈕時所執行的命令。
CommandParameter型 object 別為的，是傳遞至 Command 的參數。
CornerRadius類型 int 為的，描述按鈕框線的圓角半徑。
IsLoading型 bool 別為的，表示影像的載入狀態。此屬性的預設值為 false。
IsOpaque型 bool 別為的，會決定 .NET MAUI 在轉譯影像時是否應該將影像視為不透明。此屬性的預設值為 false。
IsPressed型 bool 別為的，表示是否按下按鈕。此屬性的預設值為 false。
Padding型 Thickness 別為的，會決定按鈕的邊框間距。
Source類型 ImageSource 為的，指定要顯示為按鈕內容的影像。

這些屬性是由 BindableProperty 物件所支援，這表示這些屬性可以是資料系結的目標，並設定樣式。

屬性 Aspect 可以設定為列舉的 Aspect 其中一個成員：

Fill - 縮放影像以完整且完全填滿 ImageButton 。這可能會導致影像扭曲。
AspectFill - 裁剪影像，使其填滿 ImageButton ，同時保留外觀比例。
AspectFit - 信箱影像（如有必要），讓整個影像符合 ImageButton ，並將空白空間新增至頂端/底部或側邊，視影像寬或高而定。這是列舉的 Aspect 預設值。
Center - 將影像置中 ImageButton ，同時保留外觀比例。

此外， ImageButton 定義 Clicked 、 Pressed 和 Released 事件。 Clicked當點選與手指或滑鼠指標從按鈕表面放開時 ImageButton ，就會引發此事件。 Pressed當手指按下時 ImageButton ，會引發事件，或按下滑鼠按鍵時，指標位於上方 ImageButton 。 Released放開手指或滑鼠按鍵時，就會引發事件。一般而言， Clicked 事件也會與 Released 事件同時引發，但如果手指或滑鼠指標在放開之前會離開表面 ImageButton ， Clicked 則可能不會發生此事件。

重要

ImageButton必須將其 IsEnabled 屬性設定為 true ，才能回應點選。

建立 ImageButton

若要建立影像按鈕，請建立 ImageButton 物件、設定其 Source 屬性並處理其 Clicked 事件。

下列 XAML 範例示範如何建立 ImageButton ：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ControlGallery.Views.XAML.ImageButtonDemoPage"
             Title="ImageButton Demo">
    <StackLayout>
       <ImageButton Source="image.png"
                    Clicked="OnImageButtonClicked"
                    HorizontalOptions="Center"
                    VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

屬性 Source 會指定出現在中的 ImageButton 影像。事件 Clicked 會設定為名為的 OnImageButtonClicked 事件處理常式。此處理程式位於程式碼後置檔案中：

public partial class ImageButtonDemoPage : ContentPage
{
    int clickTotal;

    public ImageButtonDemoPage()
    {
        InitializeComponent();
    }

    void OnImageButtonClicked(object sender, EventArgs e)
    {
        clickTotal += 1;
        label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
    }
}

在此範例中，點選時 ImageButton ，會 OnImageButtonClicked 執行方法。自 sender 變數負責 ImageButton 此事件。您可以使用這個來存取 ImageButton 物件，或區分共用相同 Clicked 事件的多個 ImageButton 物件。處理常式 Clicked 會遞增計數器，並在中 Label 顯示計數器值：

Screenshot of an ImageButton.

要建立的 ImageButton 對等 C# 程式碼為：

Label label;
int clickTotal = 0;
...

ImageButton imageButton = new ImageButton
{
    Source = "XamarinLogo.png",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.CenterAndExpand
};
imageButton.Clicked += (s, e) =>
{
  clickTotal += 1;
  label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
};

使用命令介面

應用程式可以回應 ImageButton 點選，而不需要處理 Clicked 事件。會 ImageButton 實作稱為命令或 命令介面的 替代通知機制。這包含兩個屬性：

Command 型 ICommand 別為，這是命名空間中 System.Windows.Input 定義的介面。
CommandParameter 類型的 Object 屬性。

此方法適用于與資料系結的連線，特別是在實作 Model-View-ViewModel （MVVM）模式時。如需命令的詳細資訊，請參閱 Button 文章中的使用命令介面。

按下併發布 ImageButton

Pressed當手指按下時 ImageButton ，會引發事件，或按下滑鼠按鍵，且指標位於上方 ImageButton 。 Released放開手指或滑鼠按鍵時，就會引發事件。一般而言， Clicked 事件也會與 Released 事件同時引發，但如果手指或滑鼠指標在放開之前會從表面 ImageButton 移開，則 Clicked 可能不會發生此事件。

如需這些事件的詳細資訊，請參閱 Button 文章中的按鈕並加以釋放。

ImageButton 視覺狀態

ImageButtonPressedVisualState 具有，可在按下時起始視覺效果變更 ImageButton ，如果啟用則為。

下列 XAML 範例示範如何定義狀態的 Pressed 視覺狀態：

<ImageButton Source="image.png"
             ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
                <VisualState.Setters>
                    <Setter Property="Scale"
                            Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Pressed">
                <VisualState.Setters>
                    <Setter Property="Scale"
                            Value="0.8" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ImageButton>

在此範例中，會 PressedVisualState 指定按下時 ImageButton ，其 Scale 屬性會從預設值 1 變更為 0.8。 NormalVisualState 指定當處於正常狀態時 ImageButton ，其 Scale 屬性會設定為 1。因此，整體效果是按下時 ImageButton ，會重新調整為稍微小一點，而釋放時 ImageButton ，它會重新調整為其預設大小。

如需視覺狀態的詳細資訊，請參閱視覺狀態。

停用 ImageButton

有時候應用程式會進入按一下不是有效作業的狀態 ImageButton 。在這些情況下， ImageButton 應該藉由將其 IsEnabled 屬性設定為 false 來停用。

共用方式為