We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to set the custom view in Xamarin.Forms shimmer using style

Platform: Xamarin.Forms |
Control: SfShimmer |
Published Date: August 10, 2020 |
Last Revised Date: August 10, 2020

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

 

Custom view adding in shimmer view.

 

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

 

Custom template in shimmer Xamarin.Forms

 

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.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile