2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
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 styleDefine 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 styleCreate 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
|
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.