Lập Trình WP7 với Visual Studio 2010 , Blend Express 4 và SliverLight

[Tom_codon]

1.Giới thiệu khái quát và công cụ lập trình :


Windows Phone 7 là hệ điều hành dành cho Mobile mới nhất của Microsoft.
Hệ điều hành này khá mới mẻ so với tất cả chúng ta , xong với những bạn đã có kinh nghiệm lập trình cho Windows Mobile với C# thì việc phát triển ứng dụng cho Windows Phone 7 không những không khó mà các bạn còn cảm thấy thoải mái hơn bao giờ hết về sự nhanh chóng tiện lợi mà NetCF 4.0 , XNA , Sliverlight mang lại cho chúng ta trong nền tảng điều hành này

Sau đây mình xin bắt đầu các hướng dẫn cơ bản nhất cho các bạn bước đầu làm quen với lập trình windows phone 7


1. Các công cụ cần thiết :

• Visual Studio 2010 Express for Windows Phone ( Đây là gói có sẵn từ Windows phone 7 development tool , nếu các bạn đã có cài sẵn Visual Studio 2010 Ultimate trong máy thì phần này sẽ tự động ko cài đặt )
  
• Express Blend 4 for Windows Phone – Là công cụ miễn phí đi kèm trong gói công cụ lập trình windows phone 7 , Express Blend là công cụ hỗ trợ việc thiết kế đồ họa và giao diện một cách trực quan nhất cho Windows phone 7
  
• Silverlight for Windows Phone 7 – Là một framework rất phong phú để hỗ trợ build các ứng dụng Windows Phone 7
  
• XNA Game Studio for Windows Phone 7 - Như các bạn đã biết , XNA là 1 nền tảng mới của microsoft bắt đầu từ năm 2006, để thay thế DirectX , chuyên dùng để lập trình game , đồ họa 2D,3D và giờ đây hỗ trợ trong Windows Phone 7. Điều này chắc chắn hứa hẹn 1 tương lai tươi sáng cho Game của Windows Phone 7
  
• Windows Phone Emulator : Máy giả lập windows phone 7 , giúp chúng ta có thể debug chương trình trên đó mà ko cần đến máy thật
  
• Phone Registration Tool : Đối với máy thật windows phone 7 , thì công cụ này giúp chúng ta có thể đăng ký máy để cho phép debug/chạy ứng dụng mình viết trên máy thật

2. Link Tải Công Cụ :

http://go.microsoft.com/fwlink/?LinkId=185584

Đây là công cụ để cài đặt online tất cả các công cụ mình liệt kê ở trên , các bạn tải về và chạy , phần mềm sẽ tự động download hơn 300mb các công cụ trên về và làm công việc cài đặt vào máy cho chúng ta

 

[Tom_codon]

2. Làm quen với giao diện bộ hỗ trợ lập trình và các phần mềm hỗ trợ lập trình

- Lập trình windows phone 7 với Visual Studio 2010 :

Tạo project mới :

Như hình vẽ các bạn đã thấy , chúng ta có thể tạo class để viết thư viện ,data cơ sở dữ liệu , 1 dự án windows phone 7 thường , 2 dự án với giao diện sẵn là Panorama và Pivot , thông thường các lập trình viên hay viết soft với giao diện panorama và pivot

Đây là 1 ví dụ về panorama , giao diện được chỉnh sửa với định dạng xaml , các bạn có thể thấy sự tương đông giữa xaml và xml

Sau khi tạo dựng xong form bạn có thể ấn F5 để chạy thử phần mềm trên máy ảo windows phone 7


- Lập trình windows phone 7 với Blend Express 4 :

Tạo Project mới :

Để chỉnh sửa giao diện của phần mềm tôi khuyên các bạn dùng Blend Express vì trực quan hơn rất nhiều so với visual studio

 

[Tom_codon]

3. Viết phần mềm đầu tiên cho windows phone 7

OK, bây giờ chúng ta viết một phần mềm vui tạo thư tình , bạn chỉ cần đánh tên của bạn và tên người bạn gái vào , chương trình sẽ tạo ra 1 bức thư tình cực kỳ hài hước , với giao diện Panorama

Giao diện chương trình :

Đầu tiên các bạn tạo project Panorama như bài trên
Và đây là code layout giao diện trong soft

   <controls:Panorama x:Name="pdr" Title="Thư Tình PDAVIET" FontFamily="Lucida Sans Unicode">
            <controls:Panorama.Background>
                <ImageBrush ImageSource="PanoramaBackground.png"/>
            </controls:Panorama.Background>
            <controls:Panorama.TitleTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" FontSize="75" Margin="0,75,0,0" />
                </DataTemplate>
            </controls:Panorama.TitleTemplate>
           
                <!--Panorama item one-->
           
                <!--Panorama item one-->
            <controls:PanoramaItem Header="Khai Thật :)">
                <ScrollViewer VerticalScrollBarVisibility="Auto" Margin="0,0,12,8" >
            	        <StackPanel Margin="0,0,0,-96">
            		        <TextBlock TextWrapping="Wrap" Height="34"><Run Text="Tên của bạn :"/><LineBreak/><Run/></TextBlock>
            		        <TextBox x:Name="tenanh" TextWrapping="Wrap" Height="79" />
            		        <TextBlock TextWrapping="Wrap" Height="33"><Run Text="Tên bạn gái bạn đang định viết thư :"/><LineBreak/><Run/></TextBlock>
            		        <TextBox x:Name="tenem" TextWrapping="Wrap" Height="80" />
            		        <TextBlock TextWrapping="Wrap" Height="57"><Run Text="Thời gian bạn và người đó gặp nhau lần đầu tiên : ( Ngày/Tháng/Năm )"/><LineBreak/><Run/><LineBreak/><Run/></TextBlock>
            		        <TextBox x:Name="thoigian" TextWrapping="Wrap" Height="83" />
            		        <Button x:Name="taothu" Content="Tạo thư tình !" Click="taothu_Click" />
            	        </StackPanel>
                </ScrollViewer>
            </controls:PanoramaItem>
 
            <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
            <controls:PanoramaItem  Header="Thư tình ">
            	<ScrollViewer VerticalScrollBarVisibility="Auto" Margin="0,0,12,8" >
            		<TextBlock Foreground="White" x:Name="myText"  TextWrapping="Wrap" FontSize="24" FontFamily="Lucida Sans Unicode" />
            	</ScrollViewer>
                
                <!--Double line list with image placeholder and text wrapping-->
            </controls:PanoramaItem>
            <controls:PanoramaItem Header="Thông tin">
            	<Grid>
            		<TextBlock TextWrapping="Wrap" VerticalAlignment="Top" Margin="28,92,24,0" Text="Thư tình Windows Phone 7
" Height="39" FontSize="26.667"/>
            		<TextBlock TextWrapping="Wrap" Text="Copyright © 2010, Viet PDA JSC. " Margin="52,156,24,0" Height="40" VerticalAlignment="Top"/>
            		<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="www.pdaviet.net" VerticalAlignment="Top" Margin="140,196,0,0" Width="184"/>
            	</Grid>
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>

Sau đó gán Event cho nút tạo thư tình với đoạn mã sau :

 string a = "Em thân mến! Anh rất hân hạnh thông báo cho em rằng trái tim anh đã thuộc về em kể từ ngày thứ tư, 14/02/2002." + "\r\n" +
                             "Với buổi gặp mặt tổ chức vào ngày hôm ấy lúc 18h, anh xin được tự giới thiệu mình như một người yêu đầy triển vọng. Chuyện tình của chúng ta sẽ trải qua thời gian thử nghiệm trong vòng 3 tháng, sau đó căn cứ vào sự hòa hợp giữa hai ta mà sẽ được quyết định có kéo dài mãi mãi hay không." + "\r\n" +
                             "Tất nhiên khi kết thúc thời gian thử nghiệm, vẫn sẽ có những khoá huấn luyện tiếp theo và những kế hoạch thẩm định để tiến hành thăng chức người yêu lên bạn đời. Thời gian đầu, chi phí phát sinh cho cà phê và giải trí sẽ chia đều cho hai ta. Sau này tùy thuộc vào hiệu quả xử sự của em, anh có thể sẽ gánh phần trăm lớn hơn." + "\r\n" +
                             "Tuy nhiên, nếu chi tiêu bằng tài khoản của em thì anh rất sẵn lòng. Xin em vui lòng trả lời trong vòng 30 ngày kể từ ngày nhận được lá thư này. Bằng không lời tỏ tình này sẽ hết hiệu lực mà không cần thông báo gì thêm và anh sẽ xem xét các ứng cử viên khác." + "\r\n" +
                             "Anh rất biết ơn nếu em gửi chuyển tiếp bức thư này đến chị gái của em trong trường hợp em không nhận lời." + "\r\n" +
                                     "                        Ký Tên Đóng Dấu :" + "\r\n" +
                                         "                              Anh";

                a = a.Replace("Anh", tenanh.Text);
                a = a.Replace("anh", tenanh.Text);
                a = a.Replace("Em", tenem.Text);
                a = a.Replace("em", tenem.Text);
                a = a.Replace("14/02/2002", thoigian.Text);
                myText.Text = a;

Vì chương trình chỉ mang tính minh họa để làm quen với lập trình windows phone 7, code cũng quá dễ dàng để hiểu , nên mình ko giải thích nữa
Code đầy đủ của chương trình :
http://tom.x-files.lv/wp7/HelloPDAVIET.rar

 

[Tom_codon]

Một số thông tin hữu ích liên quan

 

[thegoldfishvn]

hay wa'. e ủng hộ. thời gian này e đang vật vã với php nên chưa có thời gian. vài tháng nữa e quay lại.

 

[ichte]

Ứng dụng trong WP7 hình như chỉ làm việc thông qua kiến trúc SilverLight, XNA cái này gà mờ quá...
Có lẽ bác TOM viết vài bài riêng về Silverlight và XNA tao hứng thú cho anh em.

Không hiểu các ứng dụng native .NET có làm việc được trên WP7 không? ---> Nếu nó vẫn có nền tảng .NET trong WP7 thì cơ hôi cho các phần mềm viết trên .netframwork trước đầy biên dịch lại để làm việc trên WP7 là rất lớn (vì chưa test nên chưa biết có được không)
Mong bác TOM trả lời giúp.

 

[Tom_codon]

Ứng dụng trong WP7 hình như chỉ làm việc thông qua kiến trúc SilverLight, XNA cái này gà mờ quá...
Có lẽ bác TOM viết vài bài riêng về Silverlight và XNA tao hứng thú cho anh em.

Không hiểu các ứng dụng native .NET có làm việc được trên WP7 không? ---> Nếu nó vẫn có nền tảng .NET trong WP7 thì cơ hôi cho các phần mềm viết trên .netframwork trước đầy biên dịch lại để làm việc trên WP7 là rất lớn (vì chưa test nên chưa biết có được không)
Mong bác TOM trả lời giúp.

Không biết anh lập trình cái phương đông lịch trên VB.net hay C#, nếu là c# thì port sang windows phone 7 sẽ dễ hơn , nhưng công việc phải làm cũng nhiều , vì cấu trúc cơ sở dữ liệu của windows phone 7 khá phức tạp .
Add nhiều items vào 1 list cũng phải viết class rồi , khó nhất có lẽ vẫn là giao diện Tom nghĩ vậy

C# native dùng trên windows phone 7 cái thì dùng đc cái không , ví dụ đơn giản , System.xml của windows phone 7 cũng khác system.xml của windows phone 6.x
không support xpath trong system.xml mà nó chuyển sang system.xml.linq mà method dùng cũng khác
Hoặc như httprequest của windows phone 7 cũng khác 6.x , nó dùng hoàn toàn giống sliverlight3

Tom sẽ cập nhật vài ví dụ lập trình sliverlight cho anh em trong nhóm lập trình sau

Thân

Tom

 

[seeo2]

Hic , em hỏi các bác một chút , không biết post vào đâu , đành post lên đây vậy

Em đang làm đồ án thực tập nghiên cứu về viết ứng dụng trên windows phone 7 ( viết ứng dụng chuyển đổi đơn vị như chiều dài , khối lượng .v.v)

Em đã cài xong tất cả bộ công cụ , máy ảo để chạy nhưng còn một số vấn đề thắc mắc cần giải đáp , bác nào biết thì trả lời cho em nhé :

- Cái Express Blend 4 và cái Visual Studio 2010 express cho windows phone 7 khác nhau cái gì vậy ? , em thấy vào đây đều có công cụ để lập trình và viết ứng dụng , vậy khi nào dùng Express Blend 4 và khi nào dùng cái Visual Studio 2010 express , Express Blend 4 chủ yếu để viết ứng dụng gì ?
- Em có thấy bác Tom_codon nói về giao diện Panorama và pivot , vậy nó là gì vậy ? khác gì giao diện bình thường ?
- Silverlight for Windows Phone 7 cần cái này ( Silverlight em cũng ko rõ nó là công nghệ hay là ứng dụng hay là tool nữa ) để làm gì ? tại sao cần có nó cho windows phone 7
- Cái bản Visual Studio 2010 express cho windows phone 7 , em cài xong , khi vào nó đòi key reg rồi báo 19 ngày hết hạn , bác nào biết vấn đề này không ?

Mong các bác chỉ giáo

 

[Tom_codon]

Hic , em hỏi các bác một chút , không biết post vào đâu , đành post lên đây vậy

Em đang làm đồ án thực tập nghiên cứu về viết ứng dụng trên windows phone 7 ( viết ứng dụng chuyển đổi đơn vị như chiều dài , khối lượng .v.v)

Em đã cài xong tất cả bộ công cụ , máy ảo để chạy nhưng còn một số vấn đề thắc mắc cần giải đáp , bác nào biết thì trả lời cho em nhé :

- Cái Express Blend 4 và cái Visual Studio 2010 express cho windows phone 7 khác nhau cái gì vậy ? , em thấy vào đây đều có công cụ để lập trình và viết ứng dụng , vậy khi nào dùng Express Blend 4 và khi nào dùng cái Visual Studio 2010 express , Express Blend 4 chủ yếu để viết ứng dụng gì ?
- Em có thấy bác Tom_codon nói về giao diện Panorama và pivot , vậy nó là gì vậy ? khác gì giao diện bình thường ?
- Silverlight for Windows Phone 7 cần cái này ( Silverlight em cũng ko rõ nó là công nghệ hay là ứng dụng hay là tool nữa ) để làm gì ? tại sao cần có nó cho windows phone 7
- Cái bản Visual Studio 2010 express cho windows phone 7 , em cài xong , khi vào nó đòi key reg rồi báo 19 ngày hết hạn , bác nào biết vấn đề này không ?

Mong các bác chỉ giáo

- Blend Express 4 và Visual Studio 2010 for wp7 đều là công cụ lập trình , xong Express Blend hỗ trợ xử lý giao diện trực quan hơn rất nhiều , kéo thả + phân lớp giao diện , nên khi thiết kế giao diện cho phần mềm lập trình viên thường dùng Blend Express 4 để thiết kế sau đó code bằng Visual Studio

- Giao diện Panorama và Pivot giống nhau ở chỗ cho phép tạo nhiều trang ứng dụng con bên trong , khác nhau ở chỗ Panorama cho phép đặt hình nền cho toàn bộ ứng dụng còn Pivot thì chỉ cho phép đặt ảnh nền cho từng trang con. Còn ứng dụng thường thì 1 trang thôi

- SliverLight Nó là framework cho windows phone 7 , ngôn ngữ là c# , nhưng hỗ trợ cao hơn về mọi mặt

- Đã là visual express thì miễn phí . Không cần key , chắc vậy . Vì mình đang dùng bản Ultimate ( phải trả phí ) nên ko biết về bản express

Thân

 

[ichte]

- Silverlight for Windows Phone 7 cần cái này ( Silverlight em cũng ko rõ nó là công nghệ hay là ứng dụng hay là tool nữa ) để làm gì ? tại sao cần có nó cho windows phone 7

Silverlight là công nghệ khá mới của MS, để dễ hiểu có thể so sánh nó tương tự Flash của Adobe

 

[seeo2]

Thanks 2 bác Tom_codon và bác Ichte đã giúp em hiểu ra phần nào . Em sẽ nghiên cứu thêm , có gì không hiểu trong quá trình viết ứng dụng , em lại post lên hỏi các bác nhé !

 

[Thuan_1]

Express Blend 4 dùng để thiết kế giao diện cho WP7 đẹp hơn và bắt mắt hơn nhưng viết code trên nó thì còn hạn chế nên phải dùng Visual Studio 2010

 

[NoThingMore]

Express Blend 4 dùng để thiết kế giao diện cho WP7 đẹp hơn và bắt mắt hơn nhưng viết code trên nó thì còn hạn chế nên phải dùng Visual Studio 2010

ở VN mình thì số lượng lập trình Express Blend 4 còn hạn chế lắm, chủ yếu dùng VS2010 cho những việc này thui. cộng đồng ko rộng lớn, muốn đầu tư vào học cũng phải suy nghĩ ít nhiều