Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
   
 

Registered : 102,651


HOME > Mobile > Windows Phone Dev - สอนเขียน App บนโปรแกรม Windows Phone 7 , Windows Phone 8 > Windows Phone การใช้งาน Panorama Control ร่วมกับ Pivot Control

Windows Phone การใช้งาน Panorama Control ร่วมกับ Pivot Control

 
 


Bookmark.   
Share
       
Windows Phone การใช้งาน Panorama Control ร่วมกับ Pivot Control บทความการใช้งาน Pivit Controls ร่วมกับ Panorama Controls ซึ่งถ้าเราได้ลองใช้ Conrols ทั้ง 2 ตัวนี้จะเห็นว่าลักษณ์การทำงานจะคล้าย ๆ กัน แต่แตกต่างกันตรงที่ Panorama จะมี Background และ Header รวมทั้ง Header ของ Item มาเกี่ยวข้องด้วย แต่การใช้งาน Items ต่าง ๆ และการกำหนดุณสมบัติของ Controls จะคล้าย ๆ กัน

ในตัวอย่างนี้จะออกแบบ Application เป็น 3 Page คือ MainPage, Panorama Page และ Pivot Page โดยใน Main Page จะทำปุ่ม Button เพื่อคลิกไปยัง Page ที่เป็น Panorama และ Pivot

Windows Phone Panorama  and Pivot

รูปภาพแสดง Main Page , Panorama Page และ Pivot Page และการทำงานของ Page


รู้จักกับ Panorama Control บน Windows Phone Application

รู้จักกับ Pivot Control บน Windows Phone Application



เริ่มต้นการสร้าง Panorama และ Pivot

Windows Phone Panorama  and Pivot

การสร้าง Item Page ของ Panorama ให้เลือกที่ Windows Phone Panorama Page

Windows Phone Panorama  and Pivot

การสร้าง Item Page ของ Pivot ให้เลือกที่ Windows Phone Pivot Page

Windows Phone Panorama  and Pivot

ไฟล์ทั้งหมดของ Project ซึ่งในส่วนของ Panorama จะมี Background สำหรับแสดงผลด้วย

MainPage.xaml

Windows Phone Panorama  and Pivot

ออกแบบหน้าจอดังรูป

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Panorama Experience" Height="168" HorizontalAlignment="Left" Margin="35,82,0,0" Name="btnPanorama" VerticalAlignment="Top" Width="383" Click="btnPanorama_Click" />
            <Button Content="Pivot Experience" Height="168" HorizontalAlignment="Left" Margin="35,297,0,0" Name="btnPivot" VerticalAlignment="Top" Width="383" Click="btnPivot_Click" />

        </Grid>
    </Grid>

XAML Design ของ MainPage

VB.NET
    Private Sub btnPanorama_Click(sender As System.Object, e As System.Windows.RoutedEventArgs)
        NavigationService.Navigate(New Uri("/PanoramaPage1.xaml", UriKind.Relative))
    End Sub

    Private Sub btnPivot_Click(sender As System.Object, e As System.Windows.RoutedEventArgs)
        NavigationService.Navigate(New Uri("/PivotPage1.xaml", UriKind.Relative))
    End Sub

C#
private void btnPanorama_Click(System.Object sender, System.Windows.RoutedEventArgs e)
{
	NavigationService.Navigate(new Uri("/PanoramaPage1.xaml", UriKind.Relative));
}

private void btnPivot_Click(System.Object sender, System.Windows.RoutedEventArgs e)
{
	NavigationService.Navigate(new Uri("/PivotPage1.xaml", UriKind.Relative));
}

คำสั่งของ VB.NET และ C# ในการควบคุมการทำงานของปุ่ม Button

PanoramaPage1.xaml

Windows Phone Panorama  and Pivot

    <!--LayoutRoot contains the root grid where all other page content is placed-->
    <Grid x:Name="LayoutRoot">
        <controls:Panorama Title="my pano">

            <!--Assigns a background image to the Panorama control-->
            <controls:Panorama.Background>
                <ImageBrush ImageSource="Images/samplePhoto.jpg"/>
            </controls:Panorama.Background>


            <!--Panorama item one-->
            <controls:PanoramaItem Header="item1">
                <Grid>
                    <!--This code creates two TextBlock controls and places them in a StackPanel control-->
                    <StackPanel>
                        <TextBlock
                    Text="This is a text added to the first panorama item control"
                    Style="{StaticResource PhoneTextLargeStyle}"
                    TextWrapping="Wrap"/>
                        <TextBlock Text=" "/>
                        <TextBlock
                    Text="You can put any content you want here..."
                    Style="{StaticResource PhoneTextLargeStyle}"
                    TextWrapping="Wrap"/>
                    </StackPanel>
                </Grid>

            </controls:PanoramaItem>

            <!--Panorama item two-->
            <controls:PanoramaItem Header="item2" Orientation="Horizontal">
                <!-- Assigns a border to the PanoramaItem control and background for the content section. -->
                <Grid>
                    <Border
                BorderBrush="{StaticResource PhoneForegroundBrush}"
                BorderThickness="{StaticResource PhoneBorderThickness}"
                Background="#80808080">
                        <TextBlock
                    Text="This content is very wide and can be panned horizontally."
                    Style="{StaticResource PhoneTextExtraLargeStyle}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" >
                        </TextBlock>

                    </Border>
                </Grid>
            </controls:PanoramaItem>


            <!--Panorama item three-->
            <controls:PanoramaItem Header="item3">
                <Grid>
                    <ListBox FontSize="{StaticResource PhoneFontSizeLarge}">
                        <ListBoxItem Content="Item 1" />
                        <ListBoxItem Content="Item 2" />
                        <ListBoxItem Content="Item 3" />
                        <ListBoxItem Content="Item 4" />
                        <ListBoxItem Content="Item 5" />
                        <ListBoxItem Content="Item 6" />
                        <ListBoxItem Content="Item 7" />
                        <ListBoxItem Content="Item 8" />
                        <ListBoxItem Content="Item 9" />
                        <ListBoxItem Content="Item 10" />
                    </ListBox>
                </Grid>

            </controls:PanoramaItem>

        </controls:Panorama>

    </Grid>

XAML Design ของ Page ที่เป็น Panorama Controls


PivotPage1.xaml

Windows Phone Panorama  and Pivot

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--Pivot Control-->
        <controls:Pivot Title="PIVOT CONTROL">
            <!--Pivot item one-->
            <controls:PivotItem Header="item1">
                <Grid>
                    <!--Added textbox control with formatted text-->
                    <TextBlock
       TextWrapping="Wrap"
       Style="{StaticResource PhoneTextLargeStyle}">
       <Run>This is a simple sample for the pivot control adding text.</Run>
       <LineBreak/>
       <LineBreak/>
       <Run>You can put any content you want here...</Run>
                    </TextBlock>
                </Grid>

            </controls:PivotItem>

            <!--Pivot item two-->
            <controls:PivotItem Header="item2">
                <!--Added background image and text content-->
                <Border
        BorderBrush="{StaticResource PhoneForegroundBrush}"
        BorderThickness="{StaticResource PhoneBorderThickness}">
                    <Grid>
                        <Image
                    Source="Images/samplePhoto.jpg"
                    Stretch="UniformToFill"/>
                        <TextBlock
                    Text="Here is some generic content to take up space."
                    TextWrapping="Wrap"
                    Style="{StaticResource PhoneTextExtraLargeStyle}" />
                    </Grid>
                </Border>

            </controls:PivotItem>

            <!--Pivot item three-->
            <controls:PivotItem Header="item3">
                <!--This code is a series of string text values-->
                <Grid>
                    <ListBox FontSize="{StaticResource PhoneFontSizeLarge}">
                        <ListBoxItem Content="Item 1" />
                        <ListBoxItem Content="Item 2" />
                        <ListBoxItem Content="Item 3" />
                        <ListBoxItem Content="Item 4" />
                        <ListBoxItem Content="Item 5" />
                        <ListBoxItem Content="Item 6" />
                        <ListBoxItem Content="Item 7" />
                        <ListBoxItem Content="Item 8" />
                        <ListBoxItem Content="Item 9" />
                        <ListBoxItem Content="Item 10" />
                     </ListBox>
                </Grid>

            </controls:PivotItem>

        </controls:Pivot>
    </Grid>

XAML Design ของ Page ที่เป็น Pivot Controls

Screenshot ทดสอบแสดงผลบน Emulator

Windows Phone Panorama  and Pivot

หน้าแรกของ Application

Windows Phone Panorama  and Pivot

Panorama Page

Windows Phone Panorama  and Pivot

หน้าแรกของ Application ทดสอบคลิกไปยัง Pivot Page

Windows Phone Panorama  and Pivot

Pivot Page

   
Share




ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท

ลองใช้ค้นหาข้อมูล


   
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2012-09-02 23:05:51 / 2012-09-03 11:23:35
  Download : Download  Windows Phone การใช้งาน Panorama Control ร่วมกับ Pivot Control
Sponsored Links
 
 Sponsored Links / Related
 
การสร้าง Page และการ Link แสดงและซ่อน Uri Page Navigation บน Windows Phone
Rating :
 
การเขียนโปรแกรมส่งค่า Parameter ข้าม Page ไปยัง Page ต่าง ๆ บน Windows Phone
Rating :
 
Custom Style เรียกใช้งาน Style บน Windows Phone (Style and StaticResource)
Rating :
 
รู้จักกับ Panorama Control บน Windows Phone Application
Rating :
 
รู้จักกับ Pivot Control บน Windows Phone Application
Rating :



ThaiCreate.Com Forum
Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน Struts การเขียนโปรแกรม Java Struts Framework
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน Yii  Framework การเขียนโปรแกรม ภาษา PHP กับ Yii
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว

สุดยอด Source Code V2.0
 

แจ้งชำระเงิน/โอนเงิน
 

Hit Link
   




Acc : thaicreate@hotmail.com






Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2015 All Rights Reserved.
for Contact Us : [Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 084-715-5121 อัตราราคา คลิกที่นี่

Back to Top