mirror of
https://github.com/wwiinnddyy/LanMountainDesktop.git
synced 2026-06-20 23:54:26 +08:00
311 lines
15 KiB
XML
311 lines
15 KiB
XML
<UserControl xmlns="https://github.com/avaloniaui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:fi="using:FluentIcons.Avalonia"
|
|
mc:Ignorable="d"
|
|
d:DesignWidth="640"
|
|
d:DesignHeight="320"
|
|
x:Class="LanMontainDesktop.Views.Components.MusicControlWidget">
|
|
|
|
<UserControl.Styles>
|
|
<Style Selector="Button.music-action">
|
|
<Setter Property="Background" Value="#00000000" />
|
|
<Setter Property="BorderBrush" Value="#00000000" />
|
|
<Setter Property="BorderThickness" Value="0" />
|
|
<Setter Property="Padding" Value="0" />
|
|
<Setter Property="CornerRadius" Value="999" />
|
|
<Setter Property="HorizontalContentAlignment" Value="Center" />
|
|
<Setter Property="VerticalContentAlignment" Value="Center" />
|
|
</Style>
|
|
<Style Selector="Button.music-action:pointerover">
|
|
<Setter Property="Background" Value="#20FFFFFF" />
|
|
</Style>
|
|
<Style Selector="Button.music-action:pressed">
|
|
<Setter Property="Background" Value="#30FFFFFF" />
|
|
</Style>
|
|
<Style Selector="Button.music-action:disabled">
|
|
<Setter Property="Opacity" Value="0.85" />
|
|
</Style>
|
|
<Style Selector="Button.music-action-primary">
|
|
<Setter Property="Background" Value="#F2FFFFFF" />
|
|
<Setter Property="BorderBrush" Value="#00FFFFFF" />
|
|
<Setter Property="BorderThickness" Value="0" />
|
|
</Style>
|
|
<Style Selector="Button.music-action-primary:pointerover">
|
|
<Setter Property="Background" Value="#FFFFFFFF" />
|
|
</Style>
|
|
<Style Selector="Button.music-action-primary:pressed">
|
|
<Setter Property="Background" Value="#E6FFFFFF" />
|
|
</Style>
|
|
<Style Selector="Button.music-source">
|
|
<Setter Property="Background" Value="#3AFFFFFF" />
|
|
<Setter Property="BorderBrush" Value="#46FFFFFF" />
|
|
<Setter Property="BorderThickness" Value="1" />
|
|
<Setter Property="Padding" Value="8,4" />
|
|
<Setter Property="MinWidth" Value="62" />
|
|
<Setter Property="Height" Value="32" />
|
|
<Setter Property="CornerRadius" Value="16" />
|
|
<Setter Property="HorizontalContentAlignment" Value="Center" />
|
|
<Setter Property="VerticalContentAlignment" Value="Center" />
|
|
</Style>
|
|
<Style Selector="Button.music-source:pointerover">
|
|
<Setter Property="Background" Value="#46FFFFFF" />
|
|
</Style>
|
|
<Style Selector="Button.music-source:pressed">
|
|
<Setter Property="Background" Value="#55FFFFFF" />
|
|
</Style>
|
|
<Style Selector="Border.music-progress-track">
|
|
<Setter Property="Background" Value="#4AFFFFFF" />
|
|
<Setter Property="CornerRadius" Value="2" />
|
|
</Style>
|
|
<Style Selector="Border.music-progress-fill">
|
|
<Setter Property="Background" Value="#D8FFFFFF" />
|
|
<Setter Property="CornerRadius" Value="2" />
|
|
</Style>
|
|
</UserControl.Styles>
|
|
|
|
<Border x:Name="RootBorder"
|
|
CornerRadius="30"
|
|
ClipToBounds="True"
|
|
BorderThickness="1"
|
|
BorderBrush="#52FFFFFF"
|
|
Padding="0"
|
|
BoxShadow="0 12 28 #29000000">
|
|
<Grid>
|
|
<Grid IsHitTestVisible="False">
|
|
<Border x:Name="DynamicBackgroundBase"
|
|
CornerRadius="30"
|
|
ClipToBounds="True"
|
|
Background="#B89E7B" />
|
|
<Border x:Name="BackdropCoverHost"
|
|
CornerRadius="30"
|
|
ClipToBounds="True">
|
|
<Image x:Name="BackdropCoverImage"
|
|
IsVisible="False"
|
|
Opacity="0.62"
|
|
Stretch="UniformToFill">
|
|
<Image.Effect>
|
|
<BlurEffect Radius="42" />
|
|
</Image.Effect>
|
|
</Image>
|
|
</Border>
|
|
<Border x:Name="DynamicGradientOverlay"
|
|
CornerRadius="30"
|
|
ClipToBounds="True" />
|
|
<Border x:Name="DynamicSoftLightOverlay"
|
|
CornerRadius="30"
|
|
ClipToBounds="True" />
|
|
</Grid>
|
|
|
|
<Border x:Name="ContentPaddingBorder"
|
|
Background="Transparent"
|
|
Padding="14,11,14,11">
|
|
<Grid x:Name="LayoutGrid"
|
|
RowDefinitions="Auto,Auto,Auto"
|
|
RowSpacing="9">
|
|
<Grid x:Name="HeaderRowGrid"
|
|
Grid.Row="0"
|
|
ColumnDefinitions="Auto,*,Auto"
|
|
ColumnSpacing="11">
|
|
<Border x:Name="CoverBorder"
|
|
Width="56"
|
|
Height="56"
|
|
CornerRadius="12"
|
|
ClipToBounds="True"
|
|
BorderThickness="1"
|
|
BorderBrush="#77FFFFFF"
|
|
Background="#3CFFFFFF">
|
|
<Grid>
|
|
<Image x:Name="CoverImage"
|
|
IsVisible="False"
|
|
Stretch="UniformToFill" />
|
|
<fi:SymbolIcon x:Name="CoverFallbackGlyph"
|
|
Symbol="Album"
|
|
IconVariant="Regular"
|
|
FontSize="18"
|
|
Foreground="#F3FFFFFF"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center" />
|
|
</Grid>
|
|
</Border>
|
|
|
|
<StackPanel x:Name="MetaStackPanel"
|
|
Grid.Column="1"
|
|
Spacing="3"
|
|
VerticalAlignment="Top">
|
|
<Grid ColumnDefinitions="*,Auto"
|
|
ColumnSpacing="5">
|
|
<TextBlock x:Name="TitleTextBlock"
|
|
Text="Music"
|
|
FontSize="20"
|
|
FontWeight="SemiBold"
|
|
TextTrimming="CharacterEllipsis"
|
|
MaxLines="1"
|
|
Foreground="#FFFFFFFF" />
|
|
<fi:SymbolIcon x:Name="PlaybackActivityIcon"
|
|
Grid.Column="1"
|
|
Symbol="DeviceEq"
|
|
IconVariant="Regular"
|
|
FontSize="13"
|
|
Foreground="#E5FFFFFF"
|
|
VerticalAlignment="Center"
|
|
IsVisible="False" />
|
|
</Grid>
|
|
<TextBlock x:Name="ArtistTextBlock"
|
|
Text="No active media session"
|
|
FontSize="14"
|
|
FontWeight="SemiBold"
|
|
TextTrimming="CharacterEllipsis"
|
|
MaxLines="1"
|
|
Foreground="#E7FFFFFF" />
|
|
</StackPanel>
|
|
|
|
<Button x:Name="SourceAppButton"
|
|
Grid.Column="2"
|
|
Classes="music-source"
|
|
Click="OnSourceAppButtonClick"
|
|
VerticalAlignment="Top"
|
|
Margin="0,1,0,0">
|
|
<StackPanel Orientation="Horizontal"
|
|
Spacing="6"
|
|
VerticalAlignment="Center">
|
|
<Border x:Name="SourceAppGlyphBadge"
|
|
CornerRadius="999"
|
|
Width="22"
|
|
Height="22"
|
|
Background="#33FFFFFF"
|
|
BorderBrush="#3CFFFFFF"
|
|
BorderThickness="1">
|
|
<fi:SymbolIcon x:Name="SourceAppIcon"
|
|
Symbol="MusicNote1"
|
|
IconVariant="Filled"
|
|
FontSize="13"
|
|
Foreground="#F7FFFFFF" />
|
|
</Border>
|
|
<fi:SymbolIcon x:Name="SourceChevronIcon"
|
|
Symbol="ChevronDown"
|
|
IconVariant="Regular"
|
|
FontSize="12"
|
|
Foreground="#E9FFFFFF" />
|
|
<TextBlock x:Name="SourceAppTextBlock"
|
|
IsVisible="False"
|
|
Text="Open player" />
|
|
</StackPanel>
|
|
</Button>
|
|
</Grid>
|
|
|
|
<Grid x:Name="TimelineRowGrid"
|
|
Grid.Row="1"
|
|
ColumnDefinitions="Auto,*,Auto"
|
|
ColumnSpacing="9"
|
|
VerticalAlignment="Center">
|
|
<TextBlock x:Name="PositionTextBlock"
|
|
Text="00:00"
|
|
FontSize="13"
|
|
FontWeight="SemiBold"
|
|
Foreground="#E9FFFFFF"
|
|
VerticalAlignment="Center" />
|
|
|
|
<Grid x:Name="ProgressTrackHost"
|
|
Grid.Column="1"
|
|
MinWidth="124"
|
|
Height="3"
|
|
VerticalAlignment="Center">
|
|
<Border x:Name="ProgressTrackBorder"
|
|
Classes="music-progress-track" />
|
|
<Border x:Name="ProgressFillBorder"
|
|
Classes="music-progress-fill"
|
|
HorizontalAlignment="Left"
|
|
Width="0" />
|
|
</Grid>
|
|
|
|
<TextBlock x:Name="DurationTextBlock"
|
|
Grid.Column="2"
|
|
Text="00:00"
|
|
FontSize="13"
|
|
FontWeight="SemiBold"
|
|
Foreground="#E9FFFFFF"
|
|
VerticalAlignment="Center" />
|
|
</Grid>
|
|
|
|
<Grid x:Name="ActionRowGrid"
|
|
Grid.Row="2"
|
|
ColumnDefinitions="Auto,Auto,Auto,Auto,Auto"
|
|
ColumnSpacing="12"
|
|
Margin="0,1,0,0"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Bottom">
|
|
<Button x:Name="QueueButton"
|
|
Grid.Column="0"
|
|
Classes="music-action"
|
|
Width="31"
|
|
Height="31">
|
|
<fi:SymbolIcon x:Name="QueueIcon"
|
|
Symbol="List"
|
|
IconVariant="Regular"
|
|
FontSize="16"
|
|
Foreground="#F0FFFFFF" />
|
|
</Button>
|
|
|
|
<Button x:Name="PreviousButton"
|
|
Grid.Column="1"
|
|
Classes="music-action"
|
|
Width="34"
|
|
Height="34"
|
|
Click="OnPreviousButtonClick">
|
|
<fi:SymbolIcon x:Name="PreviousIcon"
|
|
Symbol="ArrowPrevious"
|
|
IconVariant="Regular"
|
|
FontSize="18"
|
|
Foreground="#F8FFFFFF" />
|
|
</Button>
|
|
|
|
<Button x:Name="PlayPauseButton"
|
|
Grid.Column="2"
|
|
Classes="music-action music-action-primary"
|
|
Width="44"
|
|
Height="44"
|
|
Click="OnPlayPauseButtonClick">
|
|
<fi:SymbolIcon x:Name="PlayPauseGlyphIcon"
|
|
Symbol="Play"
|
|
IconVariant="Filled"
|
|
FontSize="23"
|
|
Foreground="#FF6A604F" />
|
|
</Button>
|
|
|
|
<Button x:Name="NextButton"
|
|
Grid.Column="3"
|
|
Classes="music-action"
|
|
Width="34"
|
|
Height="34"
|
|
Click="OnNextButtonClick">
|
|
<fi:SymbolIcon x:Name="NextIcon"
|
|
Symbol="ArrowNext"
|
|
IconVariant="Regular"
|
|
FontSize="18"
|
|
Foreground="#F8FFFFFF" />
|
|
</Button>
|
|
|
|
<Button x:Name="FavoriteButton"
|
|
Grid.Column="4"
|
|
Classes="music-action"
|
|
Width="31"
|
|
Height="31">
|
|
<fi:SymbolIcon x:Name="FavoriteIcon"
|
|
Symbol="Heart"
|
|
IconVariant="Regular"
|
|
FontSize="16"
|
|
Foreground="#F0FFFFFF" />
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</Border>
|
|
|
|
<TextBlock x:Name="StatusTextBlock"
|
|
IsVisible="False"
|
|
Text="--" />
|
|
</Grid>
|
|
</Border>
|
|
</UserControl>
|