Using ControlTemplates or Style to set Shimmer CustomView

[Mark]

Hi,

I'm struggling to work out how to go about setting the CustomView of a shimmer using a template or style. I was hoping I could do something like this:

<ResourceDictionary>

<Style TargetType="shimmer:SfShimmer">

                <Setter Property="CustomView" Value="my pre-definied customview" />

</Sylte>

</ResourceDictionary>

I've tried a few variations of styles/control templates but can't find the way to get it to work. Can anyone provide a sample if it's possible/

Cheers,

Mark

[Hemalatha Marikumar]

Hi Mark, 

 

Greetings from Syncfusion.  

 

We would like to let you know that we have achieved your requirement by using both CustomView and ControlTemplate support with Shimmer view and update that through style by defining that common custom view in globally with Global style as per in below code snippet 

 

App. Xaml: Defining its custom view 

              <Application.Resources> 

 

        <ResourceDictionary> 

            <ControlTemplate x:Key="controlTemplateKey"> 

                <StackLayout> 

                    <Label /> 

                    <Image /> 

                </StackLayout> 

            </ControlTemplate> 

            <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> 

 

            <Style TargetType="shimmer:SfShimmer" x:Key="customViewStyle"> 

                <Setter Property="CustomView" Value="{StaticResource ShimmerViewKey}"/> 

            </Style> 

 

            <Style TargetType="shimmer:SfShimmer" x:Key="controlTemplateStye"> 

                <Setter Property="ControlTemplate" Value="{StaticResource controlTemplateKey}"/> 

            </Style> 

        </ResourceDictionary> 

              </Application.Resources> 

 

And my sample with applied style 

 

<StackLayout> 

        <syncEffectsView:SfShimmer Style="{StaticResource customViewStyle}"/> 

        <syncEffectsView:SfShimmer Style="{StaticResource controlTemplateStye}"/> 

    </StackLayout> 

 

 Its corresponding output 

 

Regards,
Hemalatha M. 

[Mark]

Awesome, thanks!

[Sridevi Sivakumar]

Hi Mark, 

 

Thanks for your update.  

 

 Please let us know if you need any further assistance 

 

Regards, 

Sridevi S.