How to create a semi-transparent frame in xaml?

Question

I have made a BMI calculator based on a tutorial on Youtube. I added wallpaper to my app. I want to add a transparent frame to my background and all the controls would be put on that frame. I want to have full opacity for controls. I tried this code:

 <Frame BackgroundColor="Black"
               CornerRadius="10"
               HasShadow="False"
               Opacity="0.5"
               Margin="30">
    <FlexLayout Direction="Column"
                JustifyContent="SpaceEvenly"
                Padding="5">

        <StackLayout Opacity="1">
            <Label Text="قد شما چند سانتیمتر است؟"
               Style="{StaticResource TitleStyle}"/>
            <Label Text="{Binding Source={x:Reference HeightSlider},
            Path=Value,
            StringFormat='{0:F0} cm'}"
               Style="{StaticResource ValueStyle}"/>
            <Slider x:Name="HeightSlider"
                Maximum="220"
                Minimum="40"
                Value="{Binding Height}"/>
        </StackLayout>
        <StackLayout Opacity="1">
            <Label Text="وزن شما چند کیلوگرم است؟"
               Style="{StaticResource TitleStyle}"/>
            <Label Text="{Binding Source={x:Reference WeightSlider},
            Path=Value,
            StringFormat='{0:F0} kg'}"
               Style="{StaticResource ValueStyle}"/>
            <Slider x:Name="WeightSlider"
                Maximum="150"
                Minimum="5"
                Value="{Binding Weight}"/>
        </StackLayout>
        <StackLayout Opacity="1">
            <Label Text="شاخص توده بدنی شما:"
               Style="{StaticResource LabelStyle}"/>
            <Label Text="{Binding BMI}"
               Style="{StaticResource LabelStyle}"
               FontSize="48"/>
            <Label Text="{Binding Classification}"
               Style="{StaticResource LabelStyle}"
               FontSize="20"/>
        </StackLayout>
    </FlexLayout>
</Frame>

The problem is that opacity and padding of all controls have been inherited from the parent node. How can I have specific padding and full opacity for controls while keeping the transparency of the frame?

Answer 1

You could use BoxView instead and do not forget to set the same Margin in FlexLayout.

 <ContentPage.Resources>
    <ResourceDictionary>
        <Style x:Key="TitleStyle" TargetType="Label">
            <Setter Property="BackgroundColor" Value="Green"></Setter>
        </Style>
        <Style x:Key="ValueStyle" TargetType="Label">
            <Setter Property="BackgroundColor" Value="Red"></Setter>
        </Style>
        <Style x:Key="LabelStyle" TargetType="Label">
            <Setter Property="BackgroundColor" Value="Yellow"></Setter>
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
    <Grid>
        <BoxView x:Name="frame"
           CornerRadius="10"                
           Opacity="0.5"
           Margin="30">

        </BoxView>
        <FlexLayout Margin="30" Direction="Column"
            JustifyContent="SpaceEvenly"
            Padding="5">

            <StackLayout Opacity="1">
                <Label Text="?? ??? ??? ???????? ????"
           Style="{StaticResource TitleStyle}"/>
                <Label Text="{Binding Source={x:Reference HeightSlider},
        Path=Value,
        StringFormat='{0:F0} cm'}"
           Style="{StaticResource ValueStyle}"/>
                <Slider x:Name="HeightSlider"
            Maximum="220"
            Minimum="40"
            Value="{Binding Height}"/>
            </StackLayout>
            <StackLayout Opacity="1">
                <Label Text="??? ??? ??? ??????? ????"
           Style="{StaticResource TitleStyle}"/>
                <Label Text="{Binding Source={x:Reference WeightSlider},
        Path=Value,
        StringFormat='{0:F0} kg'}"
           Style="{StaticResource ValueStyle}"/>
                <Slider x:Name="WeightSlider"
            Maximum="150"
            Minimum="5"
            Value="{Binding Weight}"/>
            </StackLayout>
            <StackLayout Opacity="1">
                <Label Text="???? ???? ???? ???:"
           Style="{StaticResource LabelStyle}"/>
                <Label Text="{Binding BMI}"
           Style="{StaticResource LabelStyle}"
           FontSize="48"/>
                <Label Text="{Binding Classification}"
           Style="{StaticResource LabelStyle}"
           FontSize="20"/>
            </StackLayout>
        </FlexLayout>
    </Grid>
</ContentPage.Content>