在 Xamarin.Forms 处将背景图像显示为图块
Display the background image as tiles at Xamarin.Forms
我正在使用 Xamarin.Forms 为 Android 开发应用程序。
我正在使用 Xamarin。
我想将背景显示为图块。
我准备了一张 100x100 像素的图像。
\Android\MyApp\MyApp.Android\Resources\drawable\background.jpg
<?xml version="1.0" encoding="utf-8" ? >
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewmodels="clr-namespace:MyApp.ViewModels"
x:DataType="viewmodels:LoginViewModel"
mc:Ignorable="d"
x:Class="MyApp.Views.LoginPage"
Shell.NavBarIsVisible="False"
BackgroundImage="background.jpg"
>
这样,background.jpg就会被放大显示。
我想在瓷砖中重复显示它。
You can display it repeatedly in tiles through below steps.
1.Create a drawable xml file on your Android project:
<?xml version="1.0" encoding="utf-8" ?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:tileMode="repeat"
android:src="@drawable/clock" >
</bitmap>
2.After that create below two effect classes on your shared project:
//base class
namespace AppTiles
{
public class BaseEffect : RoutingEffect
{
public const string EffectNamespace = "AppTiles";
public BaseEffect(String effectId) : base($"{EffectNamespace}.
{effectId}")
{
}
}
}
//effect class
namespace AppTiles
{
public class CoverEffect : BaseEffect
{
public CoverEffect() : base(nameof(CoverEffect))
{
}
}
}
3.Create a effect class in your Android project
[assembly: ResolutionGroupName("AppTiles") ]
[assembly: ExportEffect(typeof(AppTiles.Droid.CoverEffect),
nameof(CoverEffect))]
namespace AppTiles.Droid
{
public class CoverEffect : PlatformEffect
{
protected override void OnAttached()
{
UpdateBackground();
}
protected override void OnDetached()
{
}
private void UpdateBackground()
{
Android.Views.View mView = Container as Android.Views.View;
if (mView != null)
{
mView.Background = ContextCompat.GetDrawable(mView.Context, Resource.Drawable.XMLFile1);
}
}
}
}
4.Add below xmal in shared main page code behind:
<StackLayout Orientation="Vertical" Spacing="0">
<StackLayout.Effects>
<effects:CoverEffect/>
</StackLayout.Effects>
</StackLayout>
Below is the screenshot:
我正在使用 Xamarin.Forms 为 Android 开发应用程序。 我正在使用 Xamarin。 我想将背景显示为图块。 我准备了一张 100x100 像素的图像。 \Android\MyApp\MyApp.Android\Resources\drawable\background.jpg
<?xml version="1.0" encoding="utf-8" ? >
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewmodels="clr-namespace:MyApp.ViewModels"
x:DataType="viewmodels:LoginViewModel"
mc:Ignorable="d"
x:Class="MyApp.Views.LoginPage"
Shell.NavBarIsVisible="False"
BackgroundImage="background.jpg"
>
这样,background.jpg就会被放大显示。 我想在瓷砖中重复显示它。
You can display it repeatedly in tiles through below steps.
1.Create a drawable xml file on your Android project:
<?xml version="1.0" encoding="utf-8" ?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:tileMode="repeat"
android:src="@drawable/clock" >
</bitmap>
2.After that create below two effect classes on your shared project:
//base class
namespace AppTiles
{
public class BaseEffect : RoutingEffect
{
public const string EffectNamespace = "AppTiles";
public BaseEffect(String effectId) : base($"{EffectNamespace}.
{effectId}")
{
}
}
}
//effect class
namespace AppTiles
{
public class CoverEffect : BaseEffect
{
public CoverEffect() : base(nameof(CoverEffect))
{
}
}
}
3.Create a effect class in your Android project
[assembly: ResolutionGroupName("AppTiles") ]
[assembly: ExportEffect(typeof(AppTiles.Droid.CoverEffect),
nameof(CoverEffect))]
namespace AppTiles.Droid
{
public class CoverEffect : PlatformEffect
{
protected override void OnAttached()
{
UpdateBackground();
}
protected override void OnDetached()
{
}
private void UpdateBackground()
{
Android.Views.View mView = Container as Android.Views.View;
if (mView != null)
{
mView.Background = ContextCompat.GetDrawable(mView.Context, Resource.Drawable.XMLFile1);
}
}
}
}
4.Add below xmal in shared main page code behind:
<StackLayout Orientation="Vertical" Spacing="0">
<StackLayout.Effects>
<effects:CoverEffect/>
</StackLayout.Effects>
</StackLayout>
Below is the screenshot: