Updated "Play" button style. Removed default background image on the main window.
This commit is contained in:
@@ -40,7 +40,7 @@
|
|||||||
<!--<Image Grid.Column="0" x:Name="TitleBarIcon" Source="ms-appx:///Assets/Images/MangaReader.png" Width="20" Height="20" Margin="0 0 10 0" />-->
|
<!--<Image Grid.Column="0" x:Name="TitleBarIcon" Source="ms-appx:///Assets/Images/MangaReader.png" Width="20" Height="20" Margin="0 0 10 0" />-->
|
||||||
<TextBlock Grid.Column="1" x:Name="AppTitle" Text="{x:Bind Title, Mode=OneWay}" Style="{StaticResource CaptionTextBlockStyle}" VerticalAlignment="Center" />
|
<TextBlock Grid.Column="1" x:Name="AppTitle" Text="{x:Bind Title, Mode=OneWay}" Style="{StaticResource CaptionTextBlockStyle}" VerticalAlignment="Center" />
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid Grid.Row="1" Grid.RowSpan="2">
|
<!--<Grid Grid.Row="1" Grid.RowSpan="2">
|
||||||
<Image Source="/Assets/Default.png" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
|
<Image Source="/Assets/Default.png" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
|
||||||
<Canvas Background="#99000000"></Canvas>
|
<Canvas Background="#99000000"></Canvas>
|
||||||
<Border>
|
<Border>
|
||||||
@@ -48,7 +48,7 @@
|
|||||||
<Media:BackdropBlurBrush Amount="20"></Media:BackdropBlurBrush>
|
<Media:BackdropBlurBrush Amount="20"></Media:BackdropBlurBrush>
|
||||||
</Border.Background>
|
</Border.Background>
|
||||||
</Border>
|
</Border>
|
||||||
</Grid>
|
</Grid>-->
|
||||||
<Grid Grid.Row="1">
|
<Grid Grid.Row="1">
|
||||||
<Grid.ColumnDefinitions>
|
<Grid.ColumnDefinitions>
|
||||||
<ColumnDefinition></ColumnDefinition>
|
<ColumnDefinition></ColumnDefinition>
|
||||||
|
|||||||
@@ -156,8 +156,50 @@
|
|||||||
<Button Style="{StaticResource FlatButton}" Command="{Binding StopSongCommand}">
|
<Button Style="{StaticResource FlatButton}" Command="{Binding StopSongCommand}">
|
||||||
<Path Style="{StaticResource FlatButtonPath}" Fill="{StaticResource LightGradientBrush}" Data="{StaticResource StopFillIcon}"></Path>
|
<Path Style="{StaticResource FlatButtonPath}" Fill="{StaticResource LightGradientBrush}" Data="{StaticResource StopFillIcon}"></Path>
|
||||||
</Button>
|
</Button>
|
||||||
<Button Style="{StaticResource FlatButton}" Command="{Binding PlaySongCommand}" BorderBrush="{StaticResource DarkGradientBrush}" BorderThickness="2" CornerRadius="48" Padding="16">
|
<Button Style="{StaticResource FlatButton}" Command="{Binding PlaySongCommand}" Padding="0"
|
||||||
<Path Style="{StaticResource FlatButtonPath}" Fill="{StaticResource DarkGradientBrush}" Data="{StaticResource PlayFillIcon}" Margin="1,0,-1,0"></Path>
|
PointerEntered="PlayButton_PointerEntered" PointerExited="PlayButton_PointerExited">
|
||||||
|
<Button.Resources>
|
||||||
|
<!-- Keep background transparent on hover/press -->
|
||||||
|
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Transparent"/>
|
||||||
|
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="Transparent"/>
|
||||||
|
|
||||||
|
<Storyboard x:Name="PlayHoverEnterStoryboard">
|
||||||
|
<ColorAnimation Storyboard.TargetName="PlayGradientStopTop" Storyboard.TargetProperty="Color"
|
||||||
|
To="#FDF6E2" Duration="0:0:0.15" EnableDependentAnimation="True"/>
|
||||||
|
<ColorAnimation Storyboard.TargetName="PlayGradientStopBottom" Storyboard.TargetProperty="Color"
|
||||||
|
To="#C98B4E" Duration="0:0:0.15" EnableDependentAnimation="True"/>
|
||||||
|
<ColorAnimation Storyboard.TargetName="PlayIconGradientStopTop" Storyboard.TargetProperty="Color"
|
||||||
|
To="#FDF6E2" Duration="0:0:0.15" EnableDependentAnimation="True"/>
|
||||||
|
<ColorAnimation Storyboard.TargetName="PlayIconGradientStopBottom" Storyboard.TargetProperty="Color"
|
||||||
|
To="#C98B4E" Duration="0:0:0.15" EnableDependentAnimation="True"/>
|
||||||
|
</Storyboard>
|
||||||
|
<Storyboard x:Name="PlayHoverExitStoryboard">
|
||||||
|
<ColorAnimation Storyboard.TargetName="PlayGradientStopTop" Storyboard.TargetProperty="Color"
|
||||||
|
To="#F9EBC6" Duration="0:0:0.15" EnableDependentAnimation="True"/>
|
||||||
|
<ColorAnimation Storyboard.TargetName="PlayGradientStopBottom" Storyboard.TargetProperty="Color"
|
||||||
|
To="#A66831" Duration="0:0:0.15" EnableDependentAnimation="True"/>
|
||||||
|
<ColorAnimation Storyboard.TargetName="PlayIconGradientStopTop" Storyboard.TargetProperty="Color"
|
||||||
|
To="#F9EBC6" Duration="0:0:0.15" EnableDependentAnimation="True"/>
|
||||||
|
<ColorAnimation Storyboard.TargetName="PlayIconGradientStopBottom" Storyboard.TargetProperty="Color"
|
||||||
|
To="#A66831" Duration="0:0:0.15" EnableDependentAnimation="True"/>
|
||||||
|
</Storyboard>
|
||||||
|
</Button.Resources>
|
||||||
|
<Border BorderThickness="2" CornerRadius="48" Padding="16">
|
||||||
|
<Border.BorderBrush>
|
||||||
|
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
|
||||||
|
<GradientStop x:Name="PlayGradientStopTop" Color="#F9EBC6" Offset="0"/>
|
||||||
|
<GradientStop x:Name="PlayGradientStopBottom" Color="#A66831" Offset="1"/>
|
||||||
|
</LinearGradientBrush>
|
||||||
|
</Border.BorderBrush>
|
||||||
|
<Path Style="{StaticResource FlatButtonPath}" Data="{StaticResource PlayFillIcon}" Margin="1,0,-1,0">
|
||||||
|
<Path.Fill>
|
||||||
|
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
|
||||||
|
<GradientStop x:Name="PlayIconGradientStopTop" Color="#F9EBC6" Offset="0"/>
|
||||||
|
<GradientStop x:Name="PlayIconGradientStopBottom" Color="#A66831" Offset="1"/>
|
||||||
|
</LinearGradientBrush>
|
||||||
|
</Path.Fill>
|
||||||
|
</Path>
|
||||||
|
</Border>
|
||||||
</Button>
|
</Button>
|
||||||
<Button Style="{StaticResource FlatButton}" Command="{Binding PauseSongCommand}">
|
<Button Style="{StaticResource FlatButton}" Command="{Binding PauseSongCommand}">
|
||||||
<Path Style="{StaticResource FlatButtonPath}" Fill="{StaticResource LightGradientBrush}" Data="{StaticResource PauseFillIcon}"></Path>
|
<Path Style="{StaticResource FlatButtonPath}" Fill="{StaticResource LightGradientBrush}" Data="{StaticResource PauseFillIcon}"></Path>
|
||||||
|
|||||||
@@ -50,6 +50,18 @@ public sealed partial class PlayerView : UserControl
|
|||||||
_viewModel.IsPositionChangeInProgress = false;
|
_viewModel.IsPositionChangeInProgress = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private void PlayButton_PointerEntered(object? sender, PointerRoutedEventArgs e)
|
||||||
|
{
|
||||||
|
PlayHoverExitStoryboard.Stop();
|
||||||
|
PlayHoverEnterStoryboard.Begin();
|
||||||
|
}
|
||||||
|
|
||||||
|
private void PlayButton_PointerExited(object? sender, PointerRoutedEventArgs e)
|
||||||
|
{
|
||||||
|
PlayHoverEnterStoryboard.Stop();
|
||||||
|
PlayHoverExitStoryboard.Begin();
|
||||||
|
}
|
||||||
|
|
||||||
private void VolumeSlider_PointerWheelChanged(object? sender, PointerRoutedEventArgs e)
|
private void VolumeSlider_PointerWheelChanged(object? sender, PointerRoutedEventArgs e)
|
||||||
{
|
{
|
||||||
if (sender is not Slider slider)
|
if (sender is not Slider slider)
|
||||||
|
|||||||
@@ -25,20 +25,33 @@
|
|||||||
<GradientStop Color="#0B0D0F" Offset="1"/>
|
<GradientStop Color="#0B0D0F" Offset="1"/>
|
||||||
</LinearGradientBrush>
|
</LinearGradientBrush>
|
||||||
|
|
||||||
|
<LinearGradientBrush x:Key="ActiveGradientBrush" StartPoint="0,0" EndPoint="0,1">
|
||||||
|
<GradientStop Color="#E1B88A" Offset="0"/>
|
||||||
|
<GradientStop Color="#E9B578" Offset="1"/>
|
||||||
|
</LinearGradientBrush>
|
||||||
|
|
||||||
|
<LinearGradientBrush x:Key="ActiveDarkGradientBrush" StartPoint="0,0" EndPoint="0,1">
|
||||||
|
<GradientStop Color="#F9EBC6" Offset="0"/>
|
||||||
|
<GradientStop Color="#A66831" Offset="1"/>
|
||||||
|
</LinearGradientBrush>
|
||||||
|
|
||||||
<!-- Playlist Icon Path -->
|
<!-- Playlist Icon Path -->
|
||||||
<Style x:Key="PlaylistIconPath" TargetType="PathIcon">
|
<Style x:Key="PlaylistIconPath" TargetType="PathIcon">
|
||||||
<Setter Property="Foreground" Value="{StaticResource PlaylistItemIconBrush}"/>
|
<Setter Property="Foreground" Value="{StaticResource PlaylistItemIconBrush}"/>
|
||||||
|
<Setter Property="Foreground" Value="{StaticResource ActiveDarkGradientBrush}"/>
|
||||||
</Style>
|
</Style>
|
||||||
|
|
||||||
<Style x:Key="SelectedPlaylistIconPath" TargetType="PathIcon" BasedOn="{StaticResource PlaylistIconPath}">
|
<Style x:Key="SelectedPlaylistIconPath" TargetType="PathIcon" BasedOn="{StaticResource PlaylistIconPath}">
|
||||||
<Setter Property="Foreground" Value="{StaticResource AccentTextFillColorPrimaryBrush}"/>
|
<Setter Property="Foreground" Value="{StaticResource AccentTextFillColorPrimaryBrush}"/>
|
||||||
|
<Setter Property="Foreground" Value="{StaticResource ActiveGradientBrush}"/>
|
||||||
|
<Setter Property="Foreground" Value="{StaticResource ActiveDarkGradientBrush}"/>
|
||||||
</Style>
|
</Style>
|
||||||
|
|
||||||
<!-- Playlist Title Text Block -->
|
<!-- Playlist Title Text Block -->
|
||||||
<Style x:Key="PlaylistTitleTextBlock" TargetType="TextBlock">
|
<Style x:Key="PlaylistTitleTextBlock" TargetType="TextBlock">
|
||||||
<Setter Property="Foreground" Value="{StaticResource PlaylistItemTitleBrush}"/>
|
<Setter Property="Foreground" Value="{StaticResource PlaylistItemTitleBrush}"/>
|
||||||
<Setter Property="FontSize" Value="15"/>
|
<Setter Property="FontSize" Value="15"/>
|
||||||
<Setter Property="FontWeight" Value="Medium"/>
|
<Setter Property="FontWeight" Value="Normal"/>
|
||||||
<Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
|
<Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
|
||||||
<Setter Property="VerticalAlignment" Value="Center"/>
|
<Setter Property="VerticalAlignment" Value="Center"/>
|
||||||
<Setter Property="TextTrimming" Value="CharacterEllipsis"/>
|
<Setter Property="TextTrimming" Value="CharacterEllipsis"/>
|
||||||
@@ -47,6 +60,7 @@
|
|||||||
|
|
||||||
<Style x:Key="SelectedPlaylistTitleTextBlock" TargetType="TextBlock" BasedOn="{StaticResource PlaylistTitleTextBlock}">
|
<Style x:Key="SelectedPlaylistTitleTextBlock" TargetType="TextBlock" BasedOn="{StaticResource PlaylistTitleTextBlock}">
|
||||||
<Setter Property="Foreground" Value="{StaticResource AccentTextFillColorPrimaryBrush}"/>
|
<Setter Property="Foreground" Value="{StaticResource AccentTextFillColorPrimaryBrush}"/>
|
||||||
|
<Setter Property="FontWeight" Value="Medium"/>
|
||||||
</Style>
|
</Style>
|
||||||
|
|
||||||
<!-- Playlist Item Subtitle Text Block -->
|
<!-- Playlist Item Subtitle Text Block -->
|
||||||
|
|||||||
Reference in New Issue
Block a user