Thiết kế giao diện app nghe nhạc MP3

App nghe nhạc MP3 crawl data từ mp3.zing.vn

5.0 (2 đánh giá)
Tạo bởi Kteam Cập nhật lần cuối 16:48 03-01-2019 8.006 lượt xem 36 bình luận
Học nhanh

Danh sách bài học

Thiết kế giao diện app nghe nhạc MP3

Chúng ta cùng nhau tìm hiểu cách để làm ra một app nghe nhạc nhé. Đầu tiên là thiết kế giao diện cho ứng dụng.

 

MainStyle.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MusicAppMP3">
    <Style TargetType="TextBlock">
        <Setter Property="HorizontalAlignment" Value="Center"></Setter>
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
    </Style>
</ResourceDictionary>

 

MainWindow.xaml

<Window x:Class="MusicAppMP3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:uc="clr-namespace:MusicAppMP3"
        xmlns:local="clr-namespace:MusicAppMP3"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        FontFamily="Arial"
        Title="MainWindow" Height="650" Width="525">
    <Window.Resources>
        <ResourceDictionary Source="MainStyle.xaml"></ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Grid x:Name="gridTop10">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <Grid Grid.Column="0">
                    <ToggleButton IsChecked="{Binding IsCheckVN}">BXH Việt Nam</ToggleButton>
                </Grid>
                <Grid Grid.Column="1">
                    <ToggleButton IsChecked="{Binding IsCheckEU}">BXH Âu Mỹ</ToggleButton>
                </Grid>
                <Grid Grid.Column="2">
                    <ToggleButton IsChecked="{Binding IsCheckKO}">BXH Hàn Quốc</ToggleButton>
                </Grid>
            </Grid>

            <Grid Grid.Row="1">
                <ListBox x:Name="lsbTopSongs" HorizontalContentAlignment="Stretch">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border VerticalAlignment="Stretch" Height="50" BorderThickness="2" BorderBrush="Black">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="50"></ColumnDefinition>
                                        <ColumnDefinition></ColumnDefinition>
                                        <ColumnDefinition Width="50"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>

                                    <Grid>
                                        <TextBlock HorizontalAlignment="Center" 
                               VerticalAlignment="Center">01</TextBlock>
                                    </Grid>

                                    <Grid Grid.Column="1">
                                        <Grid.RowDefinitions>
                                            <RowDefinition></RowDefinition>
                                            <RowDefinition></RowDefinition>
                                        </Grid.RowDefinitions>

                                        <Grid>
                                            <TextBlock HorizontalAlignment="Left">Tên bài hát</TextBlock>
                                        </Grid>

                                        <Grid Grid.Row="1">
                                            <TextBlock HorizontalAlignment="Left">Tên ca sỹ</TextBlock>
                                        </Grid>
                                    </Grid>

                                    <Grid Grid.Column="2">
                                        <Button Click="Button_Click">Play</Button>
                                    </Grid>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
        </Grid>
        <uc:SongInfoUC x:Name="ucSongInfo" Visibility="Hidden"></uc:SongInfoUC>
    </Grid>    
</Window>

 

MainWindow.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MusicAppMP3
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private bool isCheckVN;
        private bool isCheckEU;
        private bool isCheckKO;
        public bool IsCheckVN { get => isCheckVN; set { isCheckVN = value; isCheckEU = false; isCheckKO = false; OnPropertyChanged("IsCheckVN"); OnPropertyChanged("IsCheckEU"); OnPropertyChanged("IsCheckKO"); } }
        public bool IsCheckEU { get => isCheckEU; set { isCheckEU = value; isCheckVN = false; isCheckKO = false; OnPropertyChanged("IsCheckVN"); OnPropertyChanged("IsCheckEU"); OnPropertyChanged("IsCheckKO"); } }
        public bool IsCheckKO { get => isCheckKO; set { isCheckKO = value; isCheckEU = false; isCheckVN = false; OnPropertyChanged("IsCheckVN"); OnPropertyChanged("IsCheckEU"); OnPropertyChanged("IsCheckKO"); } }

        public MainWindow()
        {
            InitializeComponent();
            ucSongInfo.BackToMain += UcSongInfo_BackToMain;

            lsbTopSongs.ItemsSource = new List<string>() {"","","","","", "", "", "", "", "" };

            this.DataContext = this;

            IsCheckVN = true;
        }      

        private void UcSongInfo_BackToMain(object sender, EventArgs e)
        {
            gridTop10.Visibility = Visibility.Visible;
            ucSongInfo.Visibility = Visibility.Hidden;
        }
        
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            gridTop10.Visibility = Visibility.Hidden;
            ucSongInfo.Visibility = Visibility.Visible;
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string newName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(newName));
            }
        }
    }
}

 

SongInfoUC.xaml

<UserControl x:Class="MusicAppMP3.SongInfoUC"
             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:MusicAppMP3"
             mc:Ignorable="d" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="200"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Grid>
            <Button Click="Button_Click">Back</Button>
        </Grid>

        <Grid Grid.Row="1">
            <Button>Play song</Button>
        </Grid>

        <Grid Grid.Row="2">
            <TextBlock>Lyric</TextBlock>
        </Grid>
    </Grid>
</UserControl>

 

SongInfoUC.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MusicAppMP3
{
    /// <summary>
    /// Interaction logic for SongInfoUC.xaml
    /// </summary>
    public partial class SongInfoUC : UserControl
    {
        public SongInfoUC()
        {
            InitializeComponent();
        }

        private event EventHandler backToMain;
        public event EventHandler BackToMain
        {
            add { backToMain += value; }
            remove { backToMain -= value; }
        }


        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (backToMain != null)
                backToMain(this, new EventArgs());
        }
    }
}

 

 

Download full project

xNet

Reg Test


Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

Nội dung bài viết

Tác giả

Khóa học

App nghe nhạc MP3 crawl data từ mp3.zing.vn

App nghe nhạc MP3 crawl data từ mp3.zing.vn

Đánh giá

Sơn Hoàng Nhật đã đánh giá 18:07 09-04-2019

hay và rất hữu ích ạ <3

Võ Trường Phúc đã đánh giá 19:38 01-03-2019

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
17520487 đã bình luận 15:10 22-12-2018

cghgh

quocphuong91_bk đã bình luận 17:07 12-12-2018

Minh share mà sao khong được công điểm. Đang thiếu điểm học khóa này.

MinhNT đã bình luận 17:01 13-11-2018

mình đang nghéo quá, đang thất nghiệp nữa, cho nên ko thể ủng hộ web dc, lấy tháng lương đầu tiên sẽ ủng hộ hì 

MinhNT đã bình luận 17:00 13-11-2018

vote cho mình mình sẽ up lên youtube để mọi người cùng học hehe

vutran03699 đã bình luận 18:22 13-10-2018

Ai đó vote cho mình đủ điểm học vs mọi người -_-

Không có video.