Articles in this section
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

 

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

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied