XAML 在WinUI中，如何使用(类型)API将shimmer控件中的ControlTemplate放置到不同的控件Template中？

我有枚举类型的API作为微光控制。

public enum ShimmerType  
{
    CirclePersona,
    SquarePersona,
    Profile,
    Article,
    Video,
    Feed,
    Shopping,
}

在我的Shimmer类API中：

我有Type属性。在此属性中，Type是ShimmerType的枚举。

public class SfShimmer:Control
{
    public SfShimmer()                                   
    {
        this.DefaultStyleKey= typeof(SfShimmer);
    }
    public ShimmerType Type
    {
        get { return (ShimmerType)GetValue(TypeProperty); }
        set { SetValue(TypeProperty, value); }
    }
       
    public static readonly DependencyProperty TypeProperty =                                                                                 DependencyProperty.Register("Type", typeof(ShimmerType), typeof(SfShimmer), new             PropertyMetadata(ShimmerType.CirclePersona));
}

In my shimmer XAML：

如何在WinUI中基于枚举属性以微光风格应用不同的控件模板？
我已经创建了一个不同的控制模板的微光类型。我在下面提到了两个控件模板，例如：
控制模板：

<ControlTemplate TargetType="local:SfShimmer" x:Key="ShimmerCirclePersonaTemplate">
    <StackPanel>
        <Grid x:Name="Grid1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Ellipse x:Name="ellipse"  Grid.Row="0" Grid.Column="0" Height="200" Width="200"  Fill="{TemplateBinding Fill}" HorizontalAlignment="Left"/>
            <Rectangle x:Name="rect1" Margin="40,30,50,100" Grid.Row="0" Grid.Column="1" Height="60" Width="800"  Fill="{TemplateBinding Fill}"/>
            <Rectangle x:Name="rect2" Grid.Row="0" Grid.Column="1" Margin="40,90,0,0" Height="60" Width="300" Fill="{TemplateBinding Fill}"  HorizontalAlignment="Left"/>
        </Grid>
        <Grid x:Name="Grid2">
            <ContentControl>
                <ContentPresenter Content="{TemplateBinding Content}"/>
            </ContentControl>
        </Grid>
    </StackPanel>
</ControlTemplate>

<ControlTemplate TargetType="local:SfShimmer" x:Key="ShimmerFeedTemplate">
    <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 x:Name="rect2" Margin="120,50,0,0" Grid.Row="0" Grid.Column="0"  Height="30" Width="300" Fill="{TemplateBinding Fill}" HorizontalAlignment="Left"/>
            <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>

<Style x:Key="SyncfusionSFShimmerStyle" TargetType="local:SfShimmer" >
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="Fill" Value="{ThemeResource ShimmerFillColor}"/>
    <Setter Property="Type" Value="CirclePersona"/>
    <Setter Property="Template"  Value="{StaticResource ShimmerCirclePersonaTemplate}"/>
</Style>
<Style BasedOn="{StaticResource SyncfusionSFShimmerStyle}" TargetType="local:SfShimmer"/>

在MainWindow.XAML中：

在我的mainwindow.xaml页面中，我只需要指定shimmer类型。具体如下：
<shim:SfShimmer x:Name="shimmer" IsActive="True" Type="Feed">
</shim:SfShimmer>
如何在WinUI中基于枚举属性以微光风格应用不同的控件模板？
我试着在下面像：

<Style x:Key="SyncfusionsfShimmerStyle" x:Name="Shimmer" TargetType="local:SfShimmer"       
        <Setter Property="Fill" Value="{ThemeResource ShimmerFillColor}"/>
        <Setter Property="Type" Value="{Binding Type, RelativeSource={RelativeSource Self}}/>
        <Setter Property="VisualStateManager.VisualStateGroups">
            <Setter.Value>
                <VisualStateGroup x:Name="Types">
                    <VisualState x:Name="Feed">
                        <VisualState.Setters>
                            <Setter Target="Shimmer.Template" Value="{StaticResource ShimmerFeedTemplate}"/>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="CirclePersona">
                        <VisualState.Setters>
                            <Setter Target="Shimmer.Template" Value="{StaticResource ShimmerCirclePersonaTemplate}"/> 
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </Setter.Value>
        </Setter>
    </Style>                                                                  


  <ControlTemplate TargetType="local:SfShimmer" x:Key="ShimmerCirclePersonaTemplate"> 
  </ControlTemplate>

<ControlTemplate TargetType="local:SfShimmer" x:Key="ShimmerFeedTemplate">
  </ControlTemplate>

**在我的Shimmer.cs中：**我将在下面的OnTypePropertyChanged方法中更改我的控件模板。

private static void OnTypePropertyChangedMethod(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            SfShimmer sfShimmer = (SfShimmer)d;
            var type = e.NewValue;
            switch (type)
            {
                case ShimmerType.Feed:
                    VisualStateManager.GoToState(sfShimmer, Constants.FEED, true);
                    break;
                case ShimmerType.Video:
                    VisualStateManager.GoToState(sfShimmer, Constants.CIRCLEPERSONA, true);
                    break;
            }
        }

将Styles的Dictionary传递给您的SfShimmer控件如何？
1.您的SfShimmer类：

public class Shimmer : ContentControl
{
    public StringToStyleDictionary ShimmerTypeStringToStyleDictionary { get; set; } = new();

    public ShimmerType ShimmerType
    {
        get => (ShimmerType)GetValue(TypeProperty);
        set => SetValue(TypeProperty, value);
    }

    public static readonly DependencyProperty TypeProperty =
        DependencyProperty.Register(
            nameof(ShimmerType),
            typeof(ShimmerType),
            typeof(Shimmer),
            new PropertyMetadata(null, OnShimmerTypePropertyChanged));

    private static void OnShimmerTypePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is SfShimmer sfShimmerControl &&
            e.NewValue is ShimmerType shimmerType)
        {
            shimmerControl.UpdateShimmerStyle(shimmerType.ToString());
        }
    }

    public void UpdateShimmerStyle(string shimmerType)
    {
        if (ShimmerTypeStringToStyleDictionary .TryGetValue(shimmerType, out var style) is true)
        {
            Style = style;
        }
    }
}

1.创建此字典类。你需要它在XAML中使用Dictionary。

public class StringToStyleDictionary : Dictionary<string, Style>
{
    // It's OK for this to be empty.
}

1.在XAML中声明您的Style。

<Page.Resources>

    <Style x:Key="CirclePersonaStyle">
        blah, blah, blah...
    </Style>
    <Style x:Key="SquarePersonaStyle">
        blah, blah, blah...
    </Style>
    ...etc

    <local:StringToStyleDictionary x:Key="ShimmerTypeStringToStyleDictionary">
        <StaticResource x:Key="CirclePersona" ResourceKey="CirclePersonaStyle"/>
        <StaticResource x:Key="SquarePersona" ResourceKey="SquarePersonaStyle"/>
        ...etc
    </local:StringToStyleDictionary>
</Page.Resources>

1.然后在SfShimmer控件中：

<local:SfShimmer
    ShimmerTypeStringToStyleDictionary={StaticResource ShimmerTypeStringToStyleDictionary}
    ShimmerTYpe="CirclePersona" />

XAML 在WinUI中，如何使用(类型)API将shimmer控件中的ControlTemplate放置到不同的控件Template中？

1条答案

相关问题

热门标签

最新问答