Xamarin - 如何使背景透明?
Xamarin - how to make background transparent?
我有一个黑色背景的简单页面。我想让它透明,以便下面的页面可见但模糊。
Someone 建议:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:NameSpace"
x:Class="NameSpace.MainPage"
BackgroundColor="Transparent"> </ContentPage>
Another one建议:
<StackLayout VerticalOptions="End" HorizontalOptions="FillAndExpand" BackgroundColor="#80000000" Opacity="0.5" HeightRequest="160" Grid.Row="2" >
所以两者都适用于平板电脑,但不适用于移动设备。有人可以向我解释为什么和/或建议我如何解决吗?提前致谢
您可以使用 AbsoluteLayout 并设置“浮动”视图的透明度。
<AbsoluteLayout>
<!--below view-->
<StackLayout BackgroundColor="Red" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Button Text="111111" />
</StackLayout>
<!--float view-->
<StackLayout BackgroundColor="Gray" Opacity="0.5" AbsoluteLayout.LayoutBounds="0.5,0,1,0.5" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
</StackLayout>
</AbsoluteLayout>
更新
使用Navigation是无法实现的。因为仅仅设置 Page 的 backgroundColor 是不够的。 ContentPage中有Rendering层。
作为解决方法,我们可以模拟导航(打开新页面)。
<AbsoluteLayout>
<!--below view-->
<StackLayout BackgroundColor="Red" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Button Text="open new page" Clicked="Button_Clicked_1"/>
</StackLayout>
<!--float view-->
<StackLayout x:Name="FloatView" BackgroundColor="Gray" Opacity="0.5" AbsoluteLayout.LayoutBounds="1,1,0.01,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label Text="this is a transparent view" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="Back" Clicked="Button_Clicked"/>
</StackLayout>
</AbsoluteLayout>
private void Button_Clicked_1(object sender, EventArgs e)
{
//show
Device.BeginInvokeOnMainThread(async () =>
{
var xPosition = 0;
var currentPosition = 0.9;
while (currentPosition >xPosition)
{
await Task.Delay(1);
currentPosition -= 0.04;
AbsoluteLayout.SetLayoutBounds(FloatView, new Rectangle(currentPosition,0, 1, 1));
}
});
}
private void Button_Clicked(object sender, EventArgs e)
{
//hide
Device.BeginInvokeOnMainThread(async () =>
{
AbsoluteLayout.SetLayoutBounds(FloatView, new Rectangle(1, 0, 0.01, 0.01));
});
}
我有一个黑色背景的简单页面。我想让它透明,以便下面的页面可见但模糊。
Someone 建议:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:NameSpace"
x:Class="NameSpace.MainPage"
BackgroundColor="Transparent"> </ContentPage>
Another one建议:
<StackLayout VerticalOptions="End" HorizontalOptions="FillAndExpand" BackgroundColor="#80000000" Opacity="0.5" HeightRequest="160" Grid.Row="2" >
所以两者都适用于平板电脑,但不适用于移动设备。有人可以向我解释为什么和/或建议我如何解决吗?提前致谢
您可以使用 AbsoluteLayout 并设置“浮动”视图的透明度。
<AbsoluteLayout>
<!--below view-->
<StackLayout BackgroundColor="Red" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Button Text="111111" />
</StackLayout>
<!--float view-->
<StackLayout BackgroundColor="Gray" Opacity="0.5" AbsoluteLayout.LayoutBounds="0.5,0,1,0.5" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
</StackLayout>
</AbsoluteLayout>
更新
使用Navigation是无法实现的。因为仅仅设置 Page 的 backgroundColor 是不够的。 ContentPage中有Rendering层。
作为解决方法,我们可以模拟导航(打开新页面)。
<AbsoluteLayout>
<!--below view-->
<StackLayout BackgroundColor="Red" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Button Text="open new page" Clicked="Button_Clicked_1"/>
</StackLayout>
<!--float view-->
<StackLayout x:Name="FloatView" BackgroundColor="Gray" Opacity="0.5" AbsoluteLayout.LayoutBounds="1,1,0.01,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label Text="this is a transparent view" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="Back" Clicked="Button_Clicked"/>
</StackLayout>
</AbsoluteLayout>
private void Button_Clicked_1(object sender, EventArgs e)
{
//show
Device.BeginInvokeOnMainThread(async () =>
{
var xPosition = 0;
var currentPosition = 0.9;
while (currentPosition >xPosition)
{
await Task.Delay(1);
currentPosition -= 0.04;
AbsoluteLayout.SetLayoutBounds(FloatView, new Rectangle(currentPosition,0, 1, 1));
}
});
}
private void Button_Clicked(object sender, EventArgs e)
{
//hide
Device.BeginInvokeOnMainThread(async () =>
{
AbsoluteLayout.SetLayoutBounds(FloatView, new Rectangle(1, 0, 0.01, 0.01));
});
}