Category / Section
How to set the custom view in Xamarin.Forms shimmer using style
This section explains how to set the custom view and control template properties in the Xamarin.Forms Shimmer using the explicit style.
Shimmer with a custom view style
Define the style for Shimmer with the CustomView property to have desired view as shown in the following code sample.
[XAML] App.Xaml
<Application.Resources>
<ResourceDictionary>
<!--Custom view for Shimmer's CustomView--!>
<Grid Padding="10" x:Key="ShimmerViewKey"
ColumnSpacing="15"
RowSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="10" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<shimmer:ShimmerView Grid.Row="0"
Grid.ColumnSpan="2"
HorizontalOptions="Start"
WidthRequest="300" />
<shimmer:ShimmerView Grid.Row="1"
Grid.ColumnSpan="2"
HorizontalOptions="Start"
WidthRequest="250" />
<shimmer:ShimmerView Grid.Row="2"
Grid.ColumnSpan="2"
HeightRequest="10"
HorizontalOptions="Start"
VerticalOptions="Start"
WidthRequest="280" />
<shimmer:ShimmerView Grid.Row="3"
Grid.ColumnSpan="2"
HeightRequest="10"
HorizontalOptions="Start"
VerticalOptions="Start"
WidthRequest="260" />
<shimmer:ShimmerView Grid.Row="5"
Grid.RowSpan="8" />
<shimmer:ShimmerView Grid.Row="5"
Grid.Column="1"
HeightRequest="10"
HorizontalOptions="Start"
VerticalOptions="Start"
WidthRequest="180" />
</Grid>
<!--Styling by adding ShimmerViewKey to CustomView property of Shimmer-->
<Style TargetType="shimmer:SfShimmer" x:Key="customViewStyle">
<Setter Property="CustomView" Value="{StaticResource ShimmerViewKey}"/>
</Style>
</ResourceDictionary>
</Application.Resources>
[XAML] MainPage.Xaml
<StackLayout BackgroundColor="Red">
<!--custom view adding ShimmerView inside the Grid-->
<shimmer:SfShimmer Style="{StaticResource customViewStyle}"/>
</StackLayout>
Output
Shimmer with control template style
Create an explicit style to add your desired template view to the ControlTemplate property of Shimmer as shown in the following code sample.
[XAML] App.Xaml
<Application.Resources>
<ResourceDictionary>
<!--Template view of Shimmer’s ControlTemplate-->
<ControlTemplate x:Key="controlTemplateKey">
<StackLayout>
<Label />
<Image />
</StackLayout>
</ControlTemplate>
<!--Styling by adding controlTemplateStyle to ControlTemplate property of Shimmer-->
<Style TargetType="shimmer:SfShimmer" x:Key=" controlTemplateStyle">
<Setter Property="ControlTemplate" Value="{StaticResource controlTemplateKey}"/>
</Style>
</ResourceDictionary>
</Application.Resources>
[XAML] MainPage.xaml
<StackLayout BackgroundColor="Red">
<!--Custom template with adding Label and Image inside the StackLayout-->
<shimmer:SfShimmer Style="{StaticResource controlTemplateStyle}"/>
</StackLayout>
Output
See also
How to customize the shimmer using own view
How to customize the shimmer using ShimmerView
How to customization option in ShimmerView
