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)

Solution

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>

Comments

[Anth12]

Great solution, I was not aware of the OutlineColor property. Thank you