I have written seven style for a control in WinUI.I have a property called Type. It's a Enum.
If I specify a type for the MainWindow.xaml type property then the style should be published to that type.
But I have mentioned the same class as the TargetType of all the Style that I have written.
How to try to achieve the style of the type mentioned in my MainWindow.Xaml.
Example :
<Style x:Key="ShimmerFeedStyle" TargetType="local:Shimmer">
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Fill" Value="{ThemeResource ShimmerFillColor}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Shimmer">
<StackPanel>
<Grid x:Name="Grid1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Ellipse Grid.Column="0" Grid.Row="0" Height="100" Width="100" Fill="{TemplateBinding Fill}" HorizontalAlignment="Left" />
<Rectangle x:Name="rect1" Margin="120,0,0,40" Grid.Row="0" Grid.Column="0" Height="30" Width="500" Fill="{TemplateBinding Fill}" HorizontalAlignment="Left">
</Rectangle>
<Rectangle x:Name="rect2" Margin="120,50,0,0" Grid.Row="0" Grid.Column="0" Height="30" Width="300" Fill="{TemplateBinding Fill}" HorizontalAlignment="Left">
</Rectangle>
<Rectangle Grid.Row="1" Grid.Column="0" Fill="{TemplateBinding Fill}" Margin="0,30,0,0" Height="200" Width="625" HorizontalAlignment="Left"/>
<Rectangle Grid.Row="2" Grid.Column="0" Fill="{TemplateBinding Fill}" Margin="0,20,0,0" Height="20" Width="625" HorizontalAlignment="Left"/>
<Rectangle Grid.Row="3" Grid.Column="0" Fill="{TemplateBinding Fill}" Margin="0,20,0,0" Height="20" Width="625" HorizontalAlignment="Left"/>
</Grid>
<Grid x:Name="Grid2">
<ContentControl>
<ContentPresenter Content="{TemplateBinding Content}"/>
</ContentControl>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style BasedOn="{StaticResource ShimmerFeedStyle}" TargetType="local:Shimmer"/>
<Style x:Key="ShimmerVideoStyle" TargetType="local:Shimmer">
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Fill" Value="{ThemeResource ShimmerFillColor}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Shimmer">
<StackPanel>
<Grid x:Name="Grid1">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Fill="{TemplateBinding Fill}" Margin="0,20,0,0" Height="250" Width="625" HorizontalAlignment="Left"/>
<Ellipse Grid.Row="1" Grid.Column="0" Height="100" Width="100" Margin="0,40,0,0" Fill="{TemplateBinding Fill}" HorizontalAlignment="Left"/>
<Rectangle Margin="130,30,0,30" Grid.Row="1" Grid.Column="0" Height="28" Width="400" Fill="{TemplateBinding Fill}" HorizontalAlignment="Left">
</Rectangle>
<Rectangle Margin="130,80,0,0" Grid.Row="1" Grid.Column="0" Height="28" Width="400" Fill="{TemplateBinding Fill}" HorizontalAlignment="Left">
</Rectangle>
</Grid>
<Grid x:Name="Grid2">
<ContentControl>
<ContentPresenter Content="{TemplateBinding Content}"/>
</ContentControl>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style BasedOn="{StaticResource ShimmerVideoStyle}" TargetType="local:Shimmer"/>
<Style x:Key="ShimmerProfileStyle" TargetType="local:Shimmer">
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Fill" Value="{ThemeResource ShimmerFillColor}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Shimmer">
<StackPanel>
<Grid x:Name="Grid1">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Ellipse Grid.Row="0" Grid.Column="0" Height="100" Width="100" Fill="{TemplateBinding Fill}" HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<Rectangle Grid.Row="1" Grid.Column="0" Height="30" Width="150" Margin="0,45,0,0" Fill="{TemplateBinding Fill}" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="2" Grid.Column="0" Height="30" Width="300" Margin="0,15,0,0" Fill="{TemplateBinding Fill}" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="3" Grid.Column="0" Height="25" Width="500" Margin="0,40,0,0" Fill="{TemplateBinding Fill}" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="4" Grid.Column="0" Height="25" Width="500" Margin="0,20,0,0" Fill="{TemplateBinding Fill}" HorizontalAlignment="Center"/>
</Grid>
<Grid x:Name="Grid2">
<ContentControl>
<ContentPresenter Content="{TemplateBinding Content}"/>
</ContentControl>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style BasedOn="{StaticResource ShimmerProfileStyle}" TargetType="local:Shimmer"/>
In all of those mentioned above for the example, the targettype represents the same class.
How to try to achieve the style of the type mentioned in my MainWindow.Xaml.
In MainWindow.Xaml:
<shim:Shimmer x:Name="shimmer" IsActive="True" Type="Feed">
<shim:Shimmer.Content>
<Grid>
<Image Height="100" Width="100" Source="D:\WinUI-3 Shimmer control\Syncfusion.Shimmer.WinUI\Shimmer\download.jfif"/>
<TextBlock Text="Content is Loaded!" />
</Grid>
</shim:Shimmer.Content>
</shim:Shimmer>
In my Shimmer Class:
public class Shimmer:Control
{
public Shimmer()
{
this.DefaultStyleKey= typeof(Shimmer);
}
public ShimmerType Type
{
get { return (ShimmerType)GetValue(TypeProperty); }
set { SetValue(TypeProperty, value); }
}
// Using a DependencyProperty as the backing store for Type. This enables animation, styling, binding, etc...
public static readonly DependencyProperty TypeProperty =
DependencyProperty.Register("Type", typeof(ShimmerType), typeof(SfShimmer), new PropertyMetadata(null,OnTypePropertyChanged)); }
Are there any solutions?
Now that you shared more code we can see that you have 3 implicit styles targeting local:Shimmer.
Removing these Styles:
<Style BasedOn="{StaticResource ShimmerFeedStyle}" TargetType="local:SfShimmer"/>
<Style BasedOn="{StaticResource ShimmerVideoStyle}" TargetType="local:SfShimmer"/>
<Style BasedOn="{StaticResource ShimmerProfileStyle}" TargetType="local:SfShimmer"/>
or setting the x:Key for each Style like this should make the error gone.
<Style x:Key="DefaultShimmerFeedStyle" BasedOn="{StaticResource ShimmerFeedStyle}" TargetType="local:SfShimmer"/>
<Style x:Key="DefaultShimmerVideoStyle" BasedOn="{StaticResource ShimmerVideoStyle}" TargetType="local:SfShimmer"/>
<Style x:Key="DefaultShimmerProfileStyle" BasedOn="{StaticResource ShimmerProfileStyle}" TargetType="local:SfShimmer"/>
And usually, you don't apply a Style from inside, like I guess you are trying to do with the Type property. You just apply a Style like this:
<local:Shimmer Style="{StaticResource DefaultShimmerFeedStyle" />