WPF音乐播放器零基础4个小时左右

前言：winfrom转wpf用久的熟手说得最多的是,转回去做winfrom难。。当时不明白。。做一个就知道了。

WPF音乐播放器

入口主程序

 FontFamily="Microsoft YaHei" FontSize="12" FontWeight="ExtraLight"
居中显示WindowStartupLocation="CenterScreen" ResizeMode="NoResize"Title="音娱乐行音乐播放器" Height="600" Width="1010"

无边框 
<WindowChrome.WindowChrome><WindowChrome GlassFrameThickness="1"/></WindowChrome.WindowChrome>

StackPanel 块  Orientation="Horizontal" 水平显示  HorizontalAlignment="Center" 居中<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"><Border Width="28" Height="28" CornerRadius="10"><Border.Background><ImageBrush ImageSource="../Assets/Images/Logo.png" Stretch="UniformToFill" Viewport="-0.3,-0.3,1.6,1.6"Opacity="0.5"/></Border.Background><TextBlock Text="&#xe600;" FontFamily="{StaticResource FF}" VerticalAlignment="Center" HorizontalAlignment="Left"FontSize="20" Foreground="ForestGreen" Height="19" Width="18" Margin="-14,0,0,0"><TextBlock.Effect><DropShadowEffect BlurRadius="5" Color="ForestGreen" ShadowDepth="0" Opacity="0.5"/></TextBlock.Effect></TextBlock></Border><TextBlock Text="音娱乐行播放器" VerticalAlignment="Center" Margin="10,0,0,0" Foreground="Orange"FontSize="13" FontWeight="Bold"/></StackPanel>

**************

菜单栏目

 <StackPanel Grid.Row="1"><RadioButton Content="首页" Tag="&#xe715;" Style="{StaticResource MenuButtonStyle}" IsChecked="True"/><RadioButton Content="有声动态谱" Tag="&#xe715;" Style="{StaticResource MenuButtonStyle}" IsChecked="True"/><RadioButton Content="精品歌单" Tag="&#xe66a;" Style="{StaticResource MenuButtonStyle}"/><RadioButton Content="歌手推荐" Tag="&#xe895;" Style="{StaticResource MenuButtonStyle}"/><RadioButton Content="单曲排行" Tag="&#xe608;" Style="{StaticResource MenuButtonStyle}"/><Label Content="音乐分类" Tag="&#xe62f;" Style="{StaticResource MenuLabelStyle}"/><UniformGrid Columns="3" Margin="40,0,10,0"><RadioButton Content="流行" Style="{StaticResource ClassButtonStyle}"/><RadioButton Content="民谣" Style="{StaticResource ClassButtonStyle}"/><RadioButton Content="电子" Style="{StaticResource ClassButtonStyle}"/><RadioButton Content="舞曲" Style="{StaticResource ClassButtonStyle}"/><RadioButton Content="说唱" Style="{StaticResource ClassButtonStyle}"/><RadioButton Content="轻音乐" Style="{StaticResource ClassButtonStyle}"/><RadioButton Content="爵士" Style="{StaticResource ClassButtonStyle}"/><RadioButton Content="乡村" Style="{StaticResource ClassButtonStyle}"/><RadioButton Content="更多" Style="{StaticResource ClassButtonStyle}"/></UniformGrid><Label Content="我的音乐" Tag="&#xe645;" Style="{StaticResource MenuLabelStyle}"/><ItemsControl ItemsSource="{Binding SList}" Margin="40,0,10,0"><ItemsControl.ItemTemplate><DataTemplate><RadioButton Content="{Binding Header}" Tag="{Binding Icon}" Style="{StaticResource SheetButtonStyle}"/></DataTemplate></ItemsControl.ItemTemplate></ItemsControl></StackPanel>

样式控件

MenuButtonStyle 样式 
// <Border 没法放两个以上对象 需要<StackPanel  包起来  <TextBlock 图标 <ContentPresente 内容
// <ControlTemplate.Triggers> 控件触发器  <Style.Triggers>样式触发器<Style TargetType="RadioButton" x:Key="MenuButtonStyle"><Setter Property="Foreground" Value="#B1AFBA"/><Setter Property="GroupName" Value="A"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="RadioButton"><Border BorderBrush="Transparent" BorderThickness="2,0,0,0" Name="border" Height="30" Margin="0,3"><StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="20,0,0,0"><TextBlock Text="{TemplateBinding Tag}" FontFamily="{StaticResource FF}"FontSize="18"/><ContentPresenter VerticalAlignment="Center" Margin="10,0,0,0"/></StackPanel></Border><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="True"><Setter TargetName="border" Property="BorderBrush" Value="#AA6063FB"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsChecked" Value="True"><Setter Property="Foreground" Value="#6063FB"/></Trigger></Style.Triggers></Style>
MenuLabelStyle 样式<Style TargetType="Label" x:Key="MenuLabelStyle"><Setter Property="Foreground" Value="#555"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Label"><Border BorderBrush="Transparent" BorderThickness="2,0,0,0" Name="border" Height="30" Margin="0,3"><StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="20,0,0,0"><TextBlock Text="{TemplateBinding Tag}" FontFamily="{StaticResource FF}"FontSize="18"/><ContentPresenter VerticalAlignment="Center" Margin="10,0,0,0"/></StackPanel></Border></ControlTemplate></Setter.Value></Setter></Style>ClassButtonStyle 样式<Style TargetType="RadioButton" x:Key="ClassButtonStyle"><Setter Property="Foreground" Value="#B1AFBA"/><Setter Property="FontSize" Value="11"/><Setter Property="GroupName" Value="A"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="RadioButton"><Border Height="24" Background="#EEE" Margin="1" CornerRadius="3"Name="border"><ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="border" Property="Background" Value="#116063FB"/></Trigger><Trigger Property="IsChecked" Value="True"><Setter TargetName="border" Property="BorderBrush" Value="#AA6063FB"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsChecked" Value="True"><Setter Property="Foreground" Value="#6063FB"/></Trigger></Style.Triggers></Style>

后台绑定数据

指定关系

DataContext = new MainViewModel();

右侧内容

 <!--右侧内容--><Grid Grid.Column="1"><Grid.RowDefinitions><RowDefinition Height="50"/><RowDefinition/></Grid.RowDefinitions><TextBox Height="28" Width="180" HorizontalAlignment="Left"Style="{StaticResource SearchTextBoxStyle}"VerticalContentAlignment="Center" Margin="30,0"/><!--页面内容  VerticalScrollBarVisibility="Hidden" 隐藏滚动条--><ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Hidden"><Grid Margin="30,0"><p:FirstPage/>  fistpage 页面</Grid></ScrollViewer></Grid>

爬虫

数据绑定

 <TextBlock Text="热门专辑" VerticalAlignment="Center" FontWeight="Bold"Foreground="#555"/><ListBox Grid.Row="1" BorderThickness="0" Background="Transparent"ItemsSource="{Binding AlbumList}" ScrollViewer.HorizontalScrollBarVisibility="Hidden"><ListBox.ItemsPanel><ItemsPanelTemplate><VirtualizingStackPanel Orientation="Horizontal"/>  水平显示</ItemsPanelTemplate></ListBox.ItemsPanel><ListBox.ItemContainerStyle>  模板<Style TargetType="ListBoxItem"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ListBoxItem">  关键 控件模板<ContentPresenter Margin="5"/></ControlTemplate></Setter.Value></Setter></Style></ListBox.ItemContainerStyle><ListBox.ItemTemplate><DataTemplate>    数据模板<Grid>
<Grid.RowDefinitions><RowDefinition/><RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Border Width="100" Height="100" CornerRadius="5" ><Border.Background><ImageBrush ImageSource="{Binding Cover}"/></Border.Background><Border.Effect><DropShadowEffect BlurRadius="5" ShadowDepth="0" Color="Gray" Opacity="0.5"/></Border.Effect>
</Border>

数据列表绑定

数据细节处理

ps：学wpf没有个大屏是个阻力哈哈哈

播放控制器

 DataContext.PlayDownloadCommand,RelativeSource
播放命令指向信息<Style TargetType="ListBoxItem"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ListBoxItem"><Grid Background="Transparent" Name="root"><ContentPresenter/><TextBlock Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center"Margin="100,0,0,0"FontSize="11" Name="tb_control" Visibility="Collapsed"><Hyperlink TextDecorations="None" Command="{Binding DataContext.PlayDownloadCommand,RelativeSource={RelativeSource AncestorType=Window}}"CommandParameter="{Binding}">播放</Hyperlink><Hyperlink TextDecorations="None">添加</Hyperlink></TextBlock></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="root" Property="Background" Value="#44ECEAF6"/><Setter TargetName="tb_control" Property="Visibility" Value="Visible"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>

指向信息帮助类有点深入自己看

public class Command<T> : ICommand
{public event EventHandler? CanExecuteChanged;public bool CanExecute(object? parameter){return true;}public void Execute(object? parameter){dynamic param = parameter;DoExecute?.Invoke(param);}public Action<T> DoExecute { get; set; }public Command(Action<T> action){DoExecute = action;}
}public class Command : Command<object>
{public Command(Action action) : base(obj => action?.Invoke()) { }
}

其他类似

小经验

分界线深吭来了

    public async void Play(SongModel song){var options = new LaunchOptions { Headless = true };// 这里有个深坑哈  先要跑一边 下载运行环境 后 注释掉 // await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultChromiumRevision);//注意 两个usingusing (var browser = await Puppeteer.LaunchAsync(options))using (var page = await browser.NewPageAsync()){await page.GoToAsync(song.Url);//请求之后 就是用语法  有就获取srcvar jsSelectAllAnchors = @"Array.from(document.querySellectorAll('audio')).map(a=>a.src);";var urls=await page.EvaluateExpressionAsync<string[]>(jsSelectAllAnchors);if (urls != null&&urls.Length>0){wc.DownloadFile(urls[0],"./songs/"+song.SongName+".mp3");   }}}