Xamarin Forms transparent element with border

Question

I am using a Frame to create a border on various elements (Grid, StackLayout & ContentView) and need to now make the elements transparent; I tried setting the opacity of the Grid etc. but of course the Frame colour impacts the actual background colour.

<ContentPage BackgroundImage="some_image.png">
  <!-- ... -->
  <Frame BackgroundColor="Gray" Opacity="0.7" Padding="1" Margin="10">
    <Grid BackgroundColor="White" Opacity="0.7" Margin="20">
      <Label Text="..."/>
    </Grid>
  </Frame>
  <!-- ... -->
</ContentPage>

The Grid is rendered as expected but now the Frame grey background makes the white grid appear grey. Ideally I would like a white transparent Grid with a solid grey border, is this possible in Xamarin?

(Im using shared Xamarin forms project targeting iOS & Android)

For you lazy keyboard warriors like me who wanted a xaml pasta <BoxView BackgroundColor="White" HeightRequest="1"/> <BoxView BackgroundColor="{StaticResource LightColor}" HeightRequest="1" Opacity=".5"/> <BoxView BackgroundColor="White" MinimumHeightRequest="1"/> — DisplayName

Dennis Schröer Dennis Schröer · Accepted Answer · 2016-12-12T13:40:10

You can set BackgroundColor to "Transparent" and OutlineColor to "Gray":

<ContentPage BackgroundImage="some_image.png">
  <!-- ... -->
  <Frame BackgroundColor="Transparent" OutlineColor="Gray" Opacity="0.7" Padding="1" Margin="10">
    <Grid BackgroundColor="White" Opacity="0.7" Margin="20">
      <Label Text="..."/>
    </Grid>
  </Frame>
  <!-- ... -->
</ContentPage>

Xamarin Forms transparent element with border

1 Answers