XAML 如何在WinUI中实现适合我类型的样式?

gdx19jrr  于 2023-04-27  发布在  其他
关注(0)|答案(1)|浏览(99)

我为WinUI中的一个控件写了七种样式。我有一个叫做Type的属性。它是一个枚举。
如果我为MainWindow.xaml类型属性指定了一个类型,那么样式应该发布为该类型。
但是我已经提到了与我所写的所有样式的TargetType相同的类。
如何尝试实现我的MainWindow.Xaml中提到的类型的样式。
示例:

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

在上面提到的所有例子中,targettype表示同一个类。
如何尝试实现我的MainWindow.Xaml中提到的类型的样式。
在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>

在我的微光班:

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)); }

有什么解决办法吗?

nzrxty8p

nzrxty8p1#

现在你分享了更多的代码,我们可以看到你有3个针对local:Shimmer的隐式样式。
正在删除这些Style % s:

<Style BasedOn="{StaticResource ShimmerFeedStyle}" TargetType="local:SfShimmer"/>
<Style BasedOn="{StaticResource ShimmerVideoStyle}" TargetType="local:SfShimmer"/>
<Style BasedOn="{StaticResource ShimmerProfileStyle}" TargetType="local:SfShimmer"/>

或者像这样为每个Style设置x:Key应该会使错误消失。

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

通常,你不会从内部应用Style,就像我猜你试图对Type属性所做的那样。你只需要像这样应用Style

<local:Shimmer Style="{StaticResource DefaultShimmerFeedStyle" />

相关问题