Forum Xamarin Xamarin.Android

How to stop button from rendering over a view inside a grid

dan3988dan3988 Member ✭✭

I have a xaml view to show a button with an icon & multiple rows of text, however when it gets pressed the button renders on top of the other views & it stays like that until the something makes the view redraw. It seems to be caused by the ripple effect on the button as I cannot get it to render correctly until the effect has finished animating. I've tried calling InvalidateMeasure & ForceLayout when the button gets clicked, but it doesn't seem to make a difference. Does anyone know how to fix this?

The XAML:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="...">
    <Grid>
        <Button/>

        <Grid InputTransparent="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="3*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Image Source="fileupload" Grid.RowSpan="2"/>

            <Label Grid.Column="1" Grid.Row="0" Text="Text1"/>
            <Label Grid.Column="1" Grid.Row="1" Text="Text2"/>
        </Grid>
    </Grid>
</ContentView>
Before pressing: After pressing:
image image

Best Answer

Answers

  • ZhichaoXiangZhichaoXiang Member ✭✭
    edited March 3

    Hi, you can set BackgroundColor of Button to "Transparent" and set the BackgroundColor of the Grid to gray or other color that it looks like a button

  • dan3988dan3988 Member ✭✭

    @ZhichaoXiang said:
    Hi, you can set BackgroundColor of Button to "Transparent" and set the BackgroundColor of the Grid to gray or other color that it looks like a button

    This does fix it, but you loose the ripple effect & the clipping of the rounded corners

    image

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited March 4

    To display a image and text in Button. You can use ContentLayout property which could help you specify how the Text and** ImageSource** properties are arranged on the Button.

    This property is of type ButtonContentLayout, which is an embedded class in Button. The constructor has two arguments:

    • A member of the ImagePosition enumeration: Left, Top, Right, or Bottom indicating how the bitmap appears relative to the text.
    • A double value for the spacing between the bitmap and the text.
    <Button Text="button text"
            ImageSource="image filename"
            ContentLayout="Left, 20" />
    

    Check the Tutorial:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/button#using-bitmaps-with-buttons

  • dan3988dan3988 Member ✭✭
    edited March 4

    @Jarvan

    This works when I have one line of text, however I have one button which has a bold header and a sub-header with a binding. I don't think there is a way to achieve this without using a separate layout.

    Current layout:
    image

    <Grid HeightRequest="{StaticResource MediaControlHeight}">
        <Button Style="{StaticResource ButtonControlStyle}"
                IsEnabled="{Binding ControlData.ReadOnly, Converter={StaticResource InverseBoolConverter}}"
                Command="{Binding CaptureTimeStampCommand}" x:Name="btn"/>
        <Grid Padding="10" InputTransparent="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="3*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Image Grid.RowSpan="2"
                   Source="clock.png" 
                   Style="{StaticResource ImageFilterStyle}"
                   SizeChanged="Image_SizeChanged">
            </Image>
            <Label Grid.Column="1" Grid.RowSpan="2"
                   Font="{Binding Font, Source={Reference btn}}"
                   TextColor="{Binding TextColor, Source={Reference btn}}"
                   Text="Time Not Captured"
                   FontAttributes="Bold"
                   HorizontalOptions="Center"
                   VerticalOptions="Center">
                <Label.Triggers>
                    <DataTrigger TargetType="Label" Binding="{Binding IsCaptured}" Value="True">
                        <Setter Property="Text" Value="Time Captured:"/>
                        <Setter Property="Grid.RowSpan" Value="1"/>
                        <Setter Property="VerticalOptions" Value="End"/>
                    </DataTrigger>
                </Label.Triggers>
            </Label>
            <Label Grid.Row="1" Grid.Column="1"
                   Font="{Binding Font, Source={Reference btn}}"
                   TextColor="{Binding TextColor, Source={Reference btn}}"
                   Text="{Binding ControlValue, StringFormat={StaticResource DateTimeFormat}, Converter={StaticResource UiValueConverter}, Mode=OneWay}"
                   IsVisible="{Binding IsCaptured}"
                   HorizontalOptions="Center"
                   VerticalOptions="Start"/>
        </Grid>
    </Grid>
    
Sign In or Register to comment.