如何在WinUI中实现适合我类型的风格？

问题描述 投票：0回答：1

我在 WinUI 中为一个控件编写了七种样式。我有一个名为 Type 的属性。这是一个枚举。

如果我为 MainWindow.xaml 类型属性指定一个类型，那么样式应该发布到该类型。

但是我已经提到了与我编写的所有Style的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"/>

在上面提到的所有示例中，目标类型代表相同的类。

如何尝试实现我的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>

在我的 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)); }

有什么解决办法吗？

c# xaml uwp winui-3 winui
1个回答
0
投票

现在您共享了更多代码，我们可以看到您有 3 个隐式样式 目标

local:Shimmer
.

删除这些

Style
：

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

或像这样为每个

x:Key
设置
Style
应该会使错误消失。

<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"/>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.