ImageButton

發行項
08/30/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顯示計數器值：

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 視覺狀態

ImageButtonPressed VisualState具有，可在按下時起始視覺效果變更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>
            <VisualState x:Name="PointerOver" />            
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ImageButton>

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

重要

ImageButton若要讓返回其Normal狀態，VisualStateGroup也必須定義PointerOver狀態。如果您使用 .NET MAUI 應用程式項目範本所建立的樣式ResourceDictionary，則您已經有定義狀態的PointerOver隱含ImageButton樣式。

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

停用 ImageButton

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

共用方式為