如何在 Xamarin（xaml 代码）中创建半透明框架？答案

【问题标题】：How to create a semi-transparent frame in Xamarin (xaml code)?如何在 Xamarin（xaml 代码）中创建半透明框架？
【发布时间】：2021-05-14 14:54:39
【问题描述】：

我根据 Youtube 上的教程制作了一个 BMI 计算器。我在我的应用程序中添加了墙纸。我想在我的背景中添加一个透明框架，所有控件都将放在该框架上。我希望控件完全不透明。我试过这段代码：

 <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>

问题是所有控件的不透明度和填充都继承自父节点。如何在保持框架透明度的同时为控件设置特定的填充和完全不透明度？

【问题讨论】：

标签： xaml xamarin

【解决方案1】：

您可以改用 BoxView，不要忘记在 FlexLayout 中设置相同的 Margin。

 <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>

【讨论】：