ShrlAlgoToolkit/Melskin/Controls/UploadArea.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:Melskin.Controls"
    xmlns:converters="clr-namespace:Melskin.Converters">

    <Style x:Key="DeleteButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Foreground" Value="{DynamicResource TextPrimaryBrush}" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <controls:IconElement Foreground="{TemplateBinding Foreground}" Symbol="Delete" />

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="{DynamicResource ErrorBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type controls:UploadArea}">
        <Setter Property="AllowDrop" Value="True" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="#bec8e4" />
        <Setter Property="BorderThickness" Value="0" />
        <!--<Setter Property="Padding" Value="8" />-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:UploadArea}">
                    <Grid>
                        <StackPanel>
                            <!--  上传区域  -->
                            <Border
                                x:Name="PART_DropArea"
                                Background="{DynamicResource ControlBackgroundNormalBrush}"
                                Cursor="Hand"
                                SnapsToDevicePixels="True">
                                <Border.InputBindings>
                                    <MouseBinding Command="{Binding SelectCommand, RelativeSource={RelativeSource TemplatedParent}}" MouseAction="LeftClick" />
                                </Border.InputBindings>

                                <Border
                                    x:Name="DropAreaBorder"
                                    Padding="16"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="1"
                                    CornerRadius="4">
                                    <Border.Style>
                                        <Style TargetType="Border">
                                            <Style.Triggers>
                                                <Trigger Property="IsMouseOver" Value="True">
                                                    <Setter Property="BorderBrush" Value="{DynamicResource PrimaryNormalBrush}" />
                                                </Trigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Border.Style>

                                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                                        <controls:IconElement
                                            Padding="-6"
                                            FontSize="80"
                                            Foreground="{DynamicResource PrimaryNormalBrush}"
                                            Symbol="Upload" />
                                        <TextBlock
                                            Margin="0"
                                            HorizontalAlignment="Center"
                                            FontSize="14"
                                            FontWeight="SemiBold"
                                            Foreground="{DynamicResource TextPrimaryBrush}"
                                            Text="{TemplateBinding HintText}" />
                                        <TextBlock
                                            Margin="0,4,0,0"
                                            HorizontalAlignment="Center"
                                            FontSize="12"
                                            Foreground="{DynamicResource TextSecondaryBrush}"
                                            Text="{TemplateBinding Description}"
                                            TextWrapping="WrapWithOverflow" />
                                    </StackPanel>
                                </Border>
                            </Border>

                            <!--  已选列表  -->
                            <ItemsControl
                                x:Name="ItemList"
                                Margin="0,8,0,0"
                                ItemsSource="{TemplateBinding FileList}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate DataType="{x:Type controls:UploadFileItem}">
                                        <Border
                                            x:Name="ItemBorder"
                                            Margin="0,4"
                                            Padding="8"
                                            Background="{DynamicResource ControlBackgroundNormalBrush}"
                                            BorderBrush="{DynamicResource BorderNormalBrush}"
                                            BorderThickness="1"
                                            CornerRadius="4">
                                            <Grid>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="Auto" />
                                                    <ColumnDefinition Width="*" />
                                                    <ColumnDefinition Width="Auto" />
                                                </Grid.ColumnDefinitions>

                                                <!--  文件图标  -->
                                                <controls:IconElement
                                                    Grid.Column="0"
                                                    Margin="0,0,8,0"
                                                    Foreground="{DynamicResource TextSecondaryBrush}"
                                                    Symbol="Files" />

                                                <TextBlock
                                                    Grid.Column="1"
                                                    VerticalAlignment="Center"
                                                    Foreground="{DynamicResource TextPrimaryBrush}"
                                                    Text="{Binding FileName}"
                                                    TextTrimming="CharacterEllipsis" />

                                                <Button
                                                    Grid.Column="2"
                                                    Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type controls:UploadArea}}, Path=RemoveItemCommand}"
                                                    CommandParameter="{Binding}"
                                                    Style="{StaticResource DeleteButtonStyle}" />
                                            </Grid>
                                        </Border>
                                        <DataTemplate.Triggers>
                                            <DataTrigger Binding="{Binding FileList, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={x:Static converters:NullOrEmptyConverter.Instance}}">
                                                <Setter Property="Visibility" Value="Collapsed" />
                                            </DataTrigger>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter TargetName="ItemBorder" Property="Background" Value="{DynamicResource ControlBackgroundHoverBrush}" />
                                            </Trigger>
                                            <!--  可以根据文件状态显示不同样式  -->
                                            <DataTrigger Binding="{Binding Status}" Value="Error">
                                                <!--<Setter Property="Foreground" Value="#ff4d4f"/>-->
                                                <Setter TargetName="ItemBorder" Property="BorderBrush" Value="{DynamicResource ErrorBrush}" />
                                            </DataTrigger>
                                        </DataTemplate.Triggers>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>

                        </StackPanel>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="PART_DropArea"
                                            Storyboard.TargetProperty="Opacity"
                                            To="0.5"
                                            Duration="0:0:0.2" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DragDropStates">
                                <VisualState x:Name="DragLeave" />
                                <VisualState x:Name="DragOver">
                                    <Storyboard>
                                        <ColorAnimation
                                            Storyboard.TargetName="DropAreaBorder"
                                            Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                                            To="#4098FF"
                                            Duration="0:0:0.2" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>