Awesome
Sharpnado Acrylic
Where Sharpnado is experimenting Acrylic effects. This repository is now the official sample app for the Sharpnado.MaterialFrame.
Installation
You should clone the Sharpnado.MaterialFrame repo, and then this repository will be available as a sub-module.
Always open the Sharpnado.Acrylic.sln
file from the Sharpnado.MaterialFrame\Samples\Sharpnado.Acrylic
folder.
Or you could clone this repository, remove the references towards the MaterialFrame
projects and then add MaterialFrame
as a nuget package.
Acrylic Styles
MaterialFrame.xaml
file:
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:rv="clr-namespace:Sharpnado.MaterialFrame;assembly=Sharpnado.MaterialFrame">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Colors.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="rv:MaterialFrame">
<Setter Property="Margin" Value="5, 5, 5, 10" />
<Setter Property="Padding" Value="20,15" />
<Setter Property="CornerRadius" Value="10" />
<Setter Property="LightThemeBackgroundColor" Value="{StaticResource AcrylicFrameBackgroundColor}" />
<Setter Property="MaterialTheme" Value="{DynamicResource DynamicMaterialTheme}" />
<Setter Property="MaterialBlurStyle" Value="{DynamicResource DynamicBlurStyle}" />
</Style>
</ResourceDictionary>
Color.xaml
file:
<?xml version="1.0" encoding="UTF-8" ?>
<?xaml-comp compile="true" ?>
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<Color x:Key="AcrylicSurface">#E6E6E6</Color>
<Color x:Key="AcrylicFrameBackgroundColor">#F1F1F1</Color>
<Color x:Key="AccentColor">#00E000</Color>
<Color x:Key="PrimaryColor">Black</Color>
<Color x:Key="SecondaryColor">#60000000</Color>
<Color x:Key="TernaryColor">#30000000</Color>
<Color x:Key="PrimaryDarkColor">White</Color>
<Color x:Key="SecondaryDarkColor">#80FFFFFF</Color>
<Color x:Key="TernaryDarkColor">#50FFFFFF</Color>
<Color x:Key="TextPrimaryColor">Black</Color>
<Color x:Key="TextSecondaryColor">#60000000</Color>
<Color x:Key="TextTernaryColor">#40000000</Color>
<Color x:Key="TextPrimaryDarkColor">White</Color>
<Color x:Key="TextSecondaryDarkColor">#80FFFFFF</Color>
<Color x:Key="TextTernaryDarkColor">#50FFFFFF</Color>
</ResourceDictionary>
ResourcesHelper.cs
public static void SetAcrylic(bool isBlurEnabled)
{
if (isBlurEnabled)
{
SetDynamicResource(DynamicMaterialTheme, MaterialFrame.MaterialFrame.Theme.AcrylicBlur);
SetDynamicResource(DynamicBackgroundColor, Color.Transparent);
return;
}
SetDynamicResource(DynamicMaterialTheme, MaterialFrame.MaterialFrame.Theme.Acrylic);
SetDynamicResource(DynamicBackgroundColor, "AcrylicSurface");
SetDynamicResource(DynamicBackgroundImageSource, new FileImageSource());
SetLightColors(false);
}
...
public static void SetBlurStyle(MaterialFrame.MaterialFrame.BlurStyle blurStyle)
{
switch (blurStyle)
{
case MaterialFrame.MaterialFrame.BlurStyle.Light:
SetDarkColors(false);
SetDynamicResource(
DynamicBackgroundImageSource,
new FileImageSource
{
File = Device.RuntimePlatform == Device.iOS ? "catalina_dark.jpg" : "bing_dark.jpg"
});
break;
case MaterialFrame.MaterialFrame.BlurStyle.Dark:
SetDarkColors(true);
SetDynamicResource(
DynamicBackgroundImageSource,
new FileImageSource
{
File = Device.RuntimePlatform == Device.iOS
? "catalina_light.jpg"
: "milky_light.jpg"
});
break;
case MaterialFrame.MaterialFrame.BlurStyle.ExtraLight:
SetLightColors(true);
SetDynamicResource(
DynamicBackgroundImageSource,
new FileImageSource
{
File = Device.RuntimePlatform == Device.iOS
? "undersea_light.jpg"
: "bing_light.jpg"
});
break;
}
SetDynamicResource(DynamicBlurStyle, blurStyle);
}
...
public static void SetLightColors(bool darkBackground)
{
SetDynamicResource(DynamicHeaderTextColor, "TextPrimaryColor");
SetDynamicResource(DynamicPrimaryOnBackgroundColor, darkBackground ? "PrimaryDarkColor" : "PrimaryColor");
SetDynamicResource(DynamicSecondaryOnBackgroundColor, darkBackground ? "SecondaryDarkColor" : "SecondaryColor");
SetDynamicResource(DynamicPrimaryColor, "PrimaryColor");
SetDynamicResource(DynamicSecondaryColor, "SecondaryColor");
SetDynamicResource(DynamicTextPrimaryColor, "TextPrimaryColor");
SetDynamicResource(DynamicTextSecondaryColor, "TextSecondaryColor");
SetDynamicResource(DynamicTextTernaryColor, "TextTernaryColor");
SetDynamicResource(DynamicLabelAppsColor, "LabelAppsColor");
}
public static void SetDarkColors(bool lightBackground)
{
SetDynamicResource(DynamicHeaderTextColor, "TextPrimaryDarkColor");
SetDynamicResource(DynamicPrimaryOnBackgroundColor, lightBackground ? "PrimaryColor" : "PrimaryDarkColor");
SetDynamicResource(DynamicSecondaryOnBackgroundColor, lightBackground ? "SecondaryColor" : "SecondaryDarkColor");
SetDynamicResource(DynamicPrimaryColor, "PrimaryDarkColor");
SetDynamicResource(DynamicSecondaryColor, "SecondaryDarkColor");
SetDynamicResource(DynamicTextPrimaryColor, "TextPrimaryDarkColor");
SetDynamicResource(DynamicTextSecondaryColor, "TextSecondaryDarkColor");
SetDynamicResource(DynamicTextTernaryColor, "TextTernaryDarkColor");
SetDynamicResource(DynamicLabelAppsColor, "LabelAppsDarkColor");
}
Component used: