Search code examples
xamarinxamarin.formsxamarin.androidxamarin.ios

Is there any way to have such a double border on button in Xamarin?

I have to make a button with double borders as shown on the image bellow. Is there any way to make it with double border without adding additional xaml elements except the button.

enter image description here

Solution

  • On the latest versions of XF that should be fairly easy to do (make sure you optimize this code for your usage):

    Create a border-style:

            <Style TargetType="Border">
            <Setter Property="Padding" Value="10" />
            <Setter Property="Stroke" Value="Black" />
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="HorizontalOptions" Value="Fill"/>
            <Setter Property="StrokeShape">
                <Setter.Value>
                    <RoundRectangle CornerRadius="10" />
                </Setter.Value>
            </Setter>
        </Style>

    Once done use it as below:

    <Border Stroke="Blue" StrokeThickness="5" Padding="8" BackgroundColor="White">
  <Button BackgroundColor="Blue" Text="Submit"/>
</Border>

    To add events to this whole view you might have to set the button's InputTransparent property to True and then add a Gesture to the whole View

    Once done it would look like the image below:

    enter image description here