1.定义骨架屏模板
<UserControl x:Class="Zhaoxi.Controls.SkeletonScreen"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Zhaoxi.Controls"
mc:Ignorable="d"
d:DesignHeight="100" d:DesignWidth="900">
<UserControl.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:1" To="#F7F9FA" Storyboard.TargetName="imgBlock"
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
RepeatBehavior="Forever"
AutoReverse="True"/>
<DoubleAnimation Duration="0:0:1.5" To="1" Storyboard.TargetName="border1"
Storyboard.TargetProperty="Background.GradientStops[1].Offset"
RepeatBehavior="Forever"
AutoReverse="True"/>
<DoubleAnimation Duration="0:0:2" To="1" Storyboard.TargetName="border2"
Storyboard.TargetProperty="Background.GradientStops[1].Offset"
RepeatBehavior="Forever"
AutoReverse="True"/>
<DoubleAnimation Duration="0:0:1.3" To="1" Storyboard.TargetName="border3"
Storyboard.TargetProperty="Background.GradientStops[1].Offset"
RepeatBehavior="Forever"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</UserControl.Triggers>
<Grid Margin="0,8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Background="#DDD" Width="80" Height="65" CornerRadius="10" Name="imgBlock"/>
<StackPanel Grid.Column="1" VerticalAlignment="Center" >
<Border ClipToBounds="True">
<Border Height="16" Width="650" HorizontalAlignment="Left" Name="border1" Margin="-200,0">
<Border.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#DDD" Offset="0"/>
<GradientStop Color="#F7F9FA" Offset="0"/>
<GradientStop Color="#DDD" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
<Border ClipToBounds="True">
<Border Height="16" Margin="-200,6" Name="border2">
<Border.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#DDD" Offset="0"/>
<GradientStop Color="#F7F9FA" Offset="0"/>
<GradientStop Color="#DDD" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
<Border ClipToBounds="True">
<Border Height="16" Width="580" HorizontalAlignment="Left" Name="border3" Margin="-200,0">
<Border.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#DDD" Offset="0"/>
<GradientStop Color="#F7F9FA" Offset="0"/>
<GradientStop Color="#DDD" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
</StackPanel>
</Grid>
</UserControl>
2.骨架屏模板选择器
<DataTemplate x:Key="courseTemplate">
<Grid>
<Grid Name="courseContent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Border Width="90" Height="60" CornerRadius="5" Margin="0,15">
<Border.Effect>
<DropShadowEffect Color="Gray" ShadowDepth="0" BlurRadius="10" Opacity="0.3" Direction="0"/>
</Border.Effect>
<Border.Background>
<ImageBrush ImageSource="{Binding Cover}" Stretch="UniformToFill"/>
</Border.Background>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal" Margin="0,0,0,10">
<TextBlock FontSize="16">
<Hyperlink Foreground="#333"
Command="{Binding DataContext.OpenCourseUrlCommand,RelativeSource={RelativeSource AncestorType=UserControl,Mode=FindAncestor}}"
CommandParameter="{Binding Url}">
<Hyperlink.Style>
<Style>
<Setter Property="TextBlock.TextDecorations" Value="{x:Null}"/>
<Style.Triggers>
<Trigger Property="Hyperlink.IsMouseOver" Value="True">
<Setter Property="TextBlock.TextDecorations">
<Setter.Value>
<TextDecorationCollection>
<TextDecoration Location="Underline"/>
</TextDecorationCollection>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Hyperlink.Style>
<TextBlock Text="{Binding CourseName}"/></Hyperlink>
</TextBlock>
<ItemsControl Margin="15,0" ItemsSource="{Binding Teachers}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="#EEE" Margin="5,0" CornerRadius="5">
<TextBlock Text="{Binding}" Margin="12,3"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<TextBlock Text="{Binding Description}"
TextWrapping="Wrap" LineHeight="23" Foreground="#AAA"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Margin="5,0">
<Hyperlink>详情</Hyperlink>
</TextBlock>
<TextBlock Margin="5,0">
<Hyperlink>删除</Hyperlink>
</TextBlock>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
<DataTemplate x:Key="skeletonTemplate">
<zxc:SkeletonScreen Name="skeleton"/>
</DataTemplate>
public class CourseDataTemplateSelector : DataTemplateSelector
{
public DataTemplate DefaultTempalte {
get; set; }
public DataTemplate SkeletonTemplate {
get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if((item as CourseModel).IsShowSkeleton)
{
return SkeletonTemplate;
}
return DefaultTempalte;
}
}
3.使用
<ItemsControl.ItemTemplateSelector>
<comm:CourseDataTemplateSelector DefaultTempalte="{StaticResource courseTemplate}"
SkeletonTemplate="{StaticResource skeletonTemplate}"/>
</ItemsControl.ItemTemplateSelector>