如何更改“Xamarin.Forms Material Visual”禁用按钮的透明度？

Posted 2023-04-19

【中文标题】如何更改“Xamarin.Forms Material Visual”禁用按钮的透明度？

【英文标题】：How to change transparency of "Xamarin.Forms Material Visual" disabled button?

【发布时间】：2021-01-11 08:30:12

【问题描述】：

我想更改禁用按钮的透明度。

禁用按钮视图

启用按钮视图

[assembly: ExportRenderer(typeof(LabelButton), typeof(SkyRacing.Droid.LabelButtonRenderer))]
namespace SkyRacing.Droid

    public class LabelButtonRenderer : MaterialButtonRenderer
    
        public LabelButtonRenderer(Context ctx) : base(ctx)
        

        

        protected override void OnDraw(android.Graphics.Canvas canvas)
        
            base.OnDraw(canvas);

            if (!Element.IsEnabled)
                Element.Opacity = 0.9;
        

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == nameof(Xamarin.Forms.Button.IsEnabled))
            
                if (!Element.IsEnabled)
                    Element.Opacity = 0.9;
            
        
    

我尝试创建自定义渲染器并将禁用按钮的不透明度更改为 0.9，但它仍然太透明。如何降低按钮的透明度？ （仅供参考，在调试模式下，我检查了 Element 属性。在我设置为 0.9 之前它已经是 1，想知道它是如何透明的）。

【参考方案1】：

如果Button 是disabled，您可以使用Style 自定义任何属性。更改Opacity 的值以更改按钮的透明度。

<ContentPage.Resources>

    <Style x:Key="BaseButton" TargetType="Button">
        <Style.Triggers>
            <Trigger TargetType="Button"
                     Property="IsEnabled"
                     Value="False">
                <Setter Property="TextColor" Value="#5019171c" />
                <Setter Property="BackgroundColor" Value="Red" />
                <Setter Property="Opacity" Value="0.9" />
            </Trigger>
        </Style.Triggers>
    </Style>

</ContentPage.Resources>

<StackLayout>
    <!-- Place new controls here -->
    <Button Text="click" Clicked="Button_Clicked"/>

    <Button Text="sampleButton"  BackgroundColor="Blue" x:Name="sampleButton" Style="StaticResource BaseButton"/>
</StackLayout>

更新代码：

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(LabelButtonRenderer), new[]  typeof(VisualMarker.MaterialVisual) )]
namespace App389.Droid

    public class LabelButtonRenderer : MaterialButtonRenderer
    
        public LabelButtonRenderer(Context ctx) : base(ctx)
        

        


        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        
            base.OnElementChanged(e);
        

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        

            if (e.PropertyName == nameof(Xamarin.Forms.Button.IsEnabled))
            
                if (Element.IsEnabled == false) 
                                       
                    Control.BackgroundTintList = Android.App.Application.Context.Resources.GetColorStateList(Resource.Color.button_normalcolor);
                
                else
                
                    Control.BackgroundTintList = Android.App.Application.Context.Resources.GetColorStateList(Resource.Color.button_disablecolor);
                
            

               
    

并在colors.xml中添加颜色：

<resources>
    <color name="launcher_background">#FFFFFF</color>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
  
    <color name="button_normalcolor">#ff00</color>
    <color name="button_disablecolor">#FF4081</color>

</resources>

更新 ios 代码：

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(LabelButtonRenderer), new[]  typeof(VisualMarker.MaterialVisual) )]
public class LabelButtonRenderer : MaterialButtonRenderer


    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    
        base.OnElementChanged(e);

    

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    

        Console.WriteLine(e.PropertyName.ToString());

        if (e.PropertyName == nameof(Xamarin.Forms.Button.IsEnabled))
        
            Control.BackgroundColor = Element.BackgroundColor.ToUIColor();

        

    

【讨论】：

已经试过了，即使我将不透明度设置为1，按钮仍然是透明的。对于默认视觉效果，它可以正常工作，但对于材质视觉效果，他们正在为透明应用其他东西。

@DragonWarrior 我的解决方案对您有用吗？如果是，请您接受（点击此答案左上角的☑️），以便我们可以帮助更多有相同问题的人:)。

嗨@Jack Hua - MSFT，抱歉回复延迟。我想你可能很接近，但我不想在那里硬编码背景颜色。我想要的是，它应该采用我在 XMAL 代码中设置的任何颜色，并在禁用时删除透明度。感谢您的努力，我真的很感激。

<Button BackgroundColor="Black" Visual="Material" Text="Click Me!" HorizontalOptions="Center" VerticalOptions="Center" IsEnabled="False"/> 您可以使用这个简单的按钮进行检查。请记住，需要安装 Xamarin.Forms.Visual.Material 才能应用材料设计效果。

是的，使用我的代码需要硬编码那里的颜色，因为 Control.BackgroundTintList 使用 Resource.Color 中的颜色。否则，您可以将颜色从表单项目传递到 Android 项目，然后在自定义渲染器中获取并使用该颜色。

【参考方案2】：

@Jack 提供的解决方案对我有用。此外，您可以这样尝试：

<Button x:Name="testButton" Text="Test">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Blue" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Blue" />
                            <Setter Property="Opacity" Value="0.9"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>

如果这也不起作用，请分享有关您的 xaml 的更多详细信息

【讨论】：

不，这对我不起作用，可能适用于默认视觉，但不适用于 Visual="Material"

请分享您的 xaml 详细信息

<Button BackgroundColor="Black" Visual="Material" Text="Click Me!" HorizontalOptions="Center" VerticalOptions="Center" IsEnabled="False"/> 您可以使用这个简单的按钮进行检查。请记住，需要安装 Xamarin.Forms.Visual.Material 才能应用材料设计效果。