(精华)2020年02月09日 WPF课程管理系统项目实战(内容中心-骨架屏的使用）

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>