Download iPodTouch_UI.zip - 151.72 KB
It's a Media Player that works with transparency effects, also it's play mp3 and wav files, display the tags if present and display the album art image if present.
Original Media Player user interface is impossible to control using your finger. Here I have tried to solve also this problem.
As a sample I used an interface just like the iPod touch one. In this tutorial mostly I continue to explaining a better way to work with transparency on Windows Mobile. For a beginning introduction to this article I suggest to you to read before my previous article on transparency iPhone UI[^].
In this article you can also read about:
I found some problem with sound files in particular for retrieving the tag info and the current position time, after a long search, I choose to use the the Windows Media Player OCX. The article Audio Book Player [^] by brochpirate give you a fast way to use the OCX on Mobile trough the OpenNETCF.org, it's a great working sample. Hereunder I explain a bit how you can play with it.
To use the Windows Media Player only you need to import this dll as reference:
And add the cPlayer to your app. Now you are ready to get control of WMP, really cool, isn't it?
Going deep into the solution you can find
This is the main form of the app. I paint all the form in the method myPaint(Graphics dc). The myPaint can be called from the Paint eventhandler and use the e.Graphics or can be called when a state change and the dc used is the CreateGraphics(). The my paint draw all the screen with all the control inside, begin with the background, the TopBar, the SongBar, LocationBar (if needed), BottomBar, and the various button used.
The bitmapBackImage Bitmap is load as background and the default image of the first image found in the song directory. To choose the image I preferred to display the "Folder.jpg" if exist because is the default used by the default internet CD searching.
this is the code
private void SearchBGImage() { if (FormListScanFiles.lvwSoundFiles.Items.Count != 0) { string path = Player.PlayingPath.Remove(Player.PlayingPath.LastIndexOf(@"\"), Player.PlayingPath.Length - Player.PlayingPath.LastIndexOf(@"\")); String[] ImageFiles = GetImageFiles(path); if (ImageFiles.Length != 0) { foreach (string ImageFile in ImageFiles) { //If you use the internet CD databases you can have more than a picture inside the folder //This method chooses the one that best fit screen if (ImageFile.Remove(0, ImageFile.LastIndexOf(@"\") + 1).ToLower() == "folder.jpg") { bitmapBackImage = new Bitmap(ImageFile); return; } } bitmapBackImage = new Bitmap(ImageFiles[0]); return; } } bitmapBackImage = bitmapBackImageDefault; }
The default image:
If I need to stretch the image I used this code
Rectangle srcRect = new Rectangle(0, 0, bitmapBackImage.Width, bitmapBackImage.Height);
Rectangle destRect = new Rectangle(0, 0, this.Width, this.Height);
gxBuffer.DrawImage(bitmapBackImage, destRect, srcRect, GraphicsUnit.Pixel); else I draw centre & unscaled
int x = (this.Width - this.bitmapBackImage.Width) / 2;
int y = (this.Height - this.bitmapBackImage.Height) / 2;
gxBuffer.DrawImage(this.bitmapBackImage, x, y);This part is similar to the iPhone UI article but here I change the position of the images dimanically. The Topbar is divided in 4 images and the time text:
All the images:
and this two samples of the view:
This part is a stretch of a single bitmap to all the width of the screen and with a fixed height.
This is the original bitmap: 
And these are two stretch samples:
Over it I put two ImageButton one for Exit and one for the files list. The buttons are centred in the middle of the SongTopBar bitmap height, and the exit has the left anchor, the right have the right anchor.
In the middle of the screen I put the Artist name, the song name and the album name. The strings are the tags retrieved from the current file selected.
Here I use my DynamicGraphicTextResizing for a "Dynamic graphic text resize" If the width of the displayed string is much greater than the display width I modify the string with the minimum size that fit the screen weight and i add to the end "..."
private void DynamicGraphicTextResizing(ref string text, ref SizeF size, Font songTitleFont)
{
while (size.Width > this.Width - buttonExit.Image.Width - buttonList.Image.Width)
{
text = text.Remove(text.Length - 4, 4);
text = text + "...";
size = gxBuffer.MeasureString(text, songTitleFont);
}
}
To draw the string I use this code:
string title = Player.GetMediaTAG(eTagNames.TITLE); SizeF sizeTitle = gxBuffer.MeasureString(title, FontsongTitle); DynamicGraphicTextResizing(ref title, ref sizeTitle, FontsongTitle); xSong = this.Width / 2 - (int)sizeTitle.Width / 2 + buttonExit.Image.Width / 2; gxBuffer.DrawString(title, FontSong, BrushWhite, xSong, bitmapTopHeader.Height + sizeTitle.Height - 2);
Info: brochpirate in his article add a way to scroll the text. Take a look there, I think you can find it useful.
This are all the images used:
This is a sample on how it works:
Info: This part is showed only if the users click on the SongBar, it dispaly the current location, the song duration, and a progress bar for the current location.
To show the Location bar I useuser an internal bool value ShowTimeLine and I decide to draw it if you click over the SongBar. When the LocationBar is showed it enable a timer every second to draw the current location and to draw the step for the progress.
private bool SongMouseUp(MouseEventArgs e)
{
if (ClientAreaSong().Contains(e.X, e.Y))
{
ShowTimeLine = !ShowTimeLine;
timerDrawLocation.Enabled = SetTimerDrawLocation();
return true;
}
return false;
}
The LocationBar is divided in 8 parts. Note: Here I’ve not covered everything in algorithm but I believe that you will understand these easily.
The Repeat button is set to the WMP repeat state. The anchor is left and it's not stretched.
The current location time and the duration time are string retrieved from the player Player.LocationString Player.DurationString. The Back ground image are this:
The progress is divided in 2 part the played and not played, I use two image and I calculate the location position on the screen iWidthProgressPlayed. After I draw the PalyedProgress from a fixed start to the iWidthProgressPlayed and the NotPalyedProgress from iWidthProgressPlayed with a dynamic width (all the size possible less than played) iWidthTotal - iWidthProgressPlayed.
All the images used:
These are 3 samples on how it works:
Attention: I tried the app under few devices and sometime I found
it slow, I suggest to you to use the LocationBar only if needed. The
program starts with the LocationBar Hided.If the search doesn't find a file (mp3 or wav) it displays a text in the middle of the screen "No files found".
This is the code:
private void DrawSongNumber(Graphics gx)
{
if (FormListScanFiles.lvwSoundFiles.Items.Count == 0)
{
NoFilesFound = "No files found";
SizeF sizeNoFilesFound = gxBuffer.MeasureString(songname, FontSongNoFilesFound);
int xSong = this.Width / 2 - (int)sizeNoFilesFound.Width / 2;
int ySong = this.Height / 2 - (int)sizeNoFilesFound.Height / 2;
int widthMessage = (int)sizeNoFilesFound.Width ;
int xMessage = (this.Width / 2 - (int)widthMessage / 2 )-10;
int yMessage = this.Height / 2 - (int)bitmapMessage.Height / 2;
DrawAlphaStretchX(gxBuffer, bitmapMessage, 170, xMessage, yMessage, widthMessage);
gxBuffer.DrawString(NoFilesFound, FontSongNoFilesFound, BrushWhite, xSong, ySong);
}
}
and this is a sample
For the bottom I used a large background with the left anchor and the right anchor.
The bitmap is divided in two section (the first half and the second half).
In the first half I put the Player controls: previous, Play/Pause, Next. these images are stored in threeImageButton. Also the player status is over in the Topbar.SlideButton. Here I add a modifyed on the previous posted in the iPphone UI. I add possibily to interact with the progress, and set it with a percentage. When the mouse is moved over the Slide button the volume change and it display the percentage is similar to the used in the location bar.
these are two samples:
I would like to remind that this program is not a complete interface. This article adds some features used in to the iPhone UI and I hope you find useful.
Note: I believe that the article contains some translation errors, please humour me and go ahead reading the article. Soon I'll translate it better.
Minor bug fixing, Hided the LocationBar at the start, added the Message bitmap.
| You must Sign In to use this message board. | |||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
Thanks for the example and the clean code; it will teach me a lot and I will even have fun in the process!
