Csharp 毛伊岛.NET 8图片不再适合按钮

您的注释表明您的自定义控件try 的手势识别器出现了一些问题.我想提供一种替代使用点击手势识别器的方式，如我链接的答案中所示.我个人的 idea 是使用一个实际的按钮作为底层，这样你就可以同时拥有Clicked和Pressed个活动.然后，作为定制按钮的一部分，XAML只需在按钮顶部覆盖Image和Label即可.

Label和Image控件可能对截取按钮手势不感兴趣，但出于谨慎考虑，我将InputTransparent="True"设置为两者.内部控件将绑定到Frame的两个标准属性(例如，按钮将跟踪Frame.CornerRadius)，但我们也可以在后面的代码中引入自定义的可绑定属性，例如框架通常不会公开的ImageMargin和ImageSource.

ButtonEx个

这段代码(分为两部分)将生成一个定制的扩展<controls:ButtonEx>，它可以(例如)替换为毛伊岛默认MainPage中的<Button>，具有Clicked和Pressed个事件，并展示了公开定制的可绑定属性(如ImageMargin)如何帮助"拨入"您想要的行为.

<?xml version="1.0" encoding="utf-8" ?>
<Frame 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:controls="clr-namespace:net_8_image_buttons.Controls"
    x:Class="net_8_image_buttons.Controls.ButtonEx"
    Padding="0"
    CornerRadius="10">
    <Grid
        ColumnDefinitions="Auto,*">
        <!--Pull properties down from the wrapper for individual controls-->
        <Button         
            x:Name="GestureRecognizerEx"
            Grid.ColumnSpan="2"
            HorizontalOptions="Fill"
            VerticalOptions="Fill"
            BackgroundColor="Transparent"
            CornerRadius="{Binding Path=CornerRadius, Source={RelativeSource AncestorType={x:Type controls:ButtonEx}}}"
            BorderColor="{Binding Path=BorderColor, Source={RelativeSource AncestorType={x:Type controls:ButtonEx}}}"
            BorderWidth="{Binding Path=BorderWidth, Source={RelativeSource AncestorType={x:Type controls:ButtonEx}}}"/>
        <Image 
            WidthRequest="50"
            Source="{Binding Path=ImageSource, Source={RelativeSource AncestorType={x:Type controls:ButtonEx}}}"
            Margin="{Binding Path=ImageMargin, Source={RelativeSource AncestorType={x:Type controls:ButtonEx}}}"
            InputTransparent="True"/>   
        <Label         
            Grid.Column="0"
            Grid.ColumnSpan="2"
            Text="{Binding Path=Text, Source={RelativeSource AncestorType={x:Type controls:ButtonEx}}}"         
            TextColor="{Binding Path=TextColor, Source={RelativeSource AncestorType={x:Type controls:ButtonEx}}}"        
            VerticalOptions="Center" 
            HorizontalOptions="Center"
            InputTransparent="True"/>
    </Grid>
</Frame>

Custom Bindable Properties个

您可以使ButtonEx的行为更像(或更少)Button，具体取决于您 Select 公开的自定义属性.

public partial class ButtonEx : Frame
{
    public ButtonEx()
    {
        InitializeComponent();
        GestureRecognizerEx.Clicked += (sender, e) => Clicked?.Invoke(this, e);
        GestureRecognizerEx.Pressed += (sender, e) => Pressed?.Invoke(this, e);
    }
    public static readonly BindableProperty TextProperty =
        BindableProperty.Create(nameof(Text), typeof(string), typeof(ButtonEx), default(string));

    public string Text
    {
        get => (string)GetValue(TextProperty);
        set => SetValue(TextProperty, value);
    }

    public static readonly BindableProperty ImageSourceProperty =
        BindableProperty.Create(nameof(ImageSource), typeof(ImageSource), typeof(ButtonEx), default(ImageSource)); 
    
    public static readonly BindableProperty TextColorProperty =
        BindableProperty.Create(nameof(TextColor), typeof(Color), typeof(ButtonEx), default(Color));

    public Color TextColor
    {
        get => (Color)GetValue(TextColorProperty);
        set => SetValue(TextColorProperty, value);
    }

    public static readonly BindableProperty BorderWidthProperty =
        BindableProperty.Create(nameof(BorderWidth), typeof(double), typeof(ButtonEx), default(double));

    public double BorderWidth
    {
        get => (double)GetValue(BorderWidthProperty);
        set => SetValue(BorderWidthProperty, value);
    }

    public ImageSource ImageSource
    {
        get => (ImageSource)GetValue(ImageSourceProperty);
        set => SetValue(ImageSourceProperty, value);
    }
    public static readonly BindableProperty ImageMarginProperty =
        BindableProperty.Create(nameof(ImageMargin), typeof(Thickness), typeof(ButtonEx), default(Thickness));

    public Thickness ImageMargin
    {
        get => (Thickness)GetValue(ImageMarginProperty);
        set => SetValue(ImageMarginProperty, value);
    }
    public event EventHandler? Clicked;
    public event EventHandler? Pressed;
}

MAUI MainPage个

<VerticalStackLayout
    Padding="30,0"
    Spacing="25">
    <Image
        Source="dotnet_bot.png"
        HeightRequest="185"
        Aspect="AspectFit"
        SemanticProperties.Description="dot net bot in a race car number eight" />

    <Label
        Text="Hello, World!"
        Style="{StaticResource Headline}"
        SemanticProperties.HeadingLevel="Level1" />

    <Label
        Text="Welcome to &#10;.NET Multi-platform App UI"
        Style="{StaticResource SubHeadline}"
        SemanticProperties.HeadingLevel="Level2"
        SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

    <controls:ButtonEx
        x:Name="CounterBtn"
        SemanticProperties.Hint="Counts the number of times you click"
        HorizontalOptions="Fill"
        Text="Click me" 
        TextColor="{StaticResource Primary}"
        BackgroundColor="{StaticResource Secondary}"
        Clicked="OnCounterClicked"
        ImageSource="dotnet_bot.png"
        ImageMargin="10,0,0,0"
        BorderColor="Fuchsia"
        BorderWidth="1"/>
</VerticalStackLayout>