Category / Section
How to set the custom view in Xamarin.Forms shimmer using style
2 mins read
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
