|
佈局管理是從一個整體的角度去把握手機應用的界面設計，一個良好的UI界面，會使用戶得到非凡的體驗。在一個手機應用程序的界面佈局中，主要有Grid，Canvas，StackPanel，並且他的根節點必須是一個容器，然後在容器中才能擺放。我測試了一下，如果把那些容器都給刪掉，那麼最終只能顯示一個控件，其他下層控件都被覆蓋。那麼在windows phone中常見的佈局有哪些呢？ 網絡佈局（Grid容器）：按照行列方式佈局程序的UI，定義一個區域，再次區域內，用戶可以使用相對於Canvas區域的座標顯示子元素； 絕對佈局（Canvas容器）：按照絕對座標來佈局程序的UI界面； 堆放佈局（StackPanel容器）：按照垂直或者水平的方式佈局文件； 樞軸視圖佈局（pivot控件）：通過類似頁面標籤方式在一個頁面展示多個視圖； 全景視圖佈局（panorama控件）:通過左右滑動的方式在一個頁面顯示多個視圖。 用戶可以根據自己應用的實際情況來選擇佈局的容器。也可以使用組合模式。 5.1 網絡佈局（Grid容器）網絡佈局是一個類似於網頁中的table標籤，它定義了一個表格，然後設置表格裏邊的行列，在HTML中時根據tr和td來表示列和行。而Grid通過Grid.Row，Grid.Column，Grid.RowSpan,Grid.ColumnSpan來決定列和行的大小位置. 在silverlight的Grid進行佈局的時候，需要先指定Grid的行和列，它是先指定後使用。 Grid屬性 1.RowDefinitions和ColumnDefinitions 這兩個屬性是用來指定Grid控件的行數和列數，內部嵌套幾個Definition，這就代表這個Grid有幾行幾列。 2. Grid.Row 和Grid.Column 當使用其他控件內置與Grid中時，需要使用Grid.Row和Grid.Column來指定它所在的行和列。 3. Height = “Auto”和Width= “Auto” 這個auto表示的是高度和寬度的自適應，這種情況下，他會根據內部的內容改變而改變，當然也可以設置成絕對的寬高。他的單位是px，像素。 4. VerticalAlignment和horizontalAlignment 根據這個屬性來設置行和列的位置，自動根據Grid容器的大小來自動調整行和列的大小使得整個行和列都鋪滿了Grid的所有空間。 示例代碼 1.使用Grid佈局，兩行三列： <Grid x:Name="ContentPanel" ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <TextBlock Text="第一行第一列" Grid.Row="0" Grid.Column="0"/> <TextBlock Text="第一行第二列" Grid.Row="0" Grid.Column="1"/> <TextBlock Text="第一行第三列" Grid.Row="0" Grid.Column="2"/> <TextBlock Text="第二行第一列" Grid.Row="1" Grid.Column="0"/> <TextBlock Text="第二行第二列" Grid.Row="1" Grid.Column="1"/> <TextBlock Text="第二行第三列" Grid.Row="1" Grid.Column="2"/> </Grid>
2. 實例代碼：VerticalAlignment和horizontalAlignment <Grid x:Name="ContentPanel" ShowGridLines="True" Grid.RowSpan="2"> <TextBlock Text="左上方" VerticalAlignment="Top" HorizontalAlignment="Left"/> <TextBlock Text="中上方" VerticalAlignment="Top" HorizontalAlignment="Center"/> <TextBlock Text="右上方" VerticalAlignment="Top" HorizontalAlignment="Right"/> <TextBlock Text="左中間" VerticalAlignment="Center" HorizontalAlignment="Left"/> <TextBlock Text="中間" VerticalAlignment="Center" HorizontalAlignment="Center"/> <TextBlock Text="右中間" VerticalAlignment="Center" HorizontalAlignment="Right"/> <TextBlock Text="左下方" VerticalAlignment="Bottom" HorizontalAlignment="Left"/> <TextBlock Text="中下方" VerticalAlignment="Bottom" HorizontalAlignment="Center"/> <TextBlock Text="右下方" VerticalAlignment="Bottom" HorizontalAlignment="Right"/> </Grid> 3.簡單計算器的實現 Main.xaml文件： <Grid Name="MyGrid" Height="704" Width="440"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="63*" /> <RowDefinition Height="170*" /> <RowDefinition Height="119*" /> <RowDefinition Height="117*" /> <RowDefinition Height="119*" /> <RowDefinition Height="117*" /> </Grid.RowDefinitions> <!--數字按鍵的佈局--> <Button Name="B7" Click="DigitBtn_Click" Grid.Column="0" Grid.Row="2" Content="7" /> <Button Name="B8" Click="DigitBtn_Click" Grid.Column="1" Grid.Row="2" Content="8" /> <Button Name="B9" Click="DigitBtn_Click" Grid.Column="2" Grid.Row="2" Content="9" /> <Button Name="B4" Click="DigitBtn_Click" Grid.Column="0" Grid.Row="3" Content="4" /> <Button Name="B5" Click="DigitBtn_Click" Grid.Column="1" Grid.Row="3" Content="5" /> <Button Name="B6" Click="DigitBtn_Click" Grid.Column="2" Grid.Row="3" Content="6" /> <Button Name="B1" Click="DigitBtn_Click" Grid.Column="0" Grid.Row="4" Content="1" /> <Button Name="B2" Click="DigitBtn_Click" Grid.Column="1" Grid.Row="4" Content="2" /> <Button Name="B3" Click="DigitBtn_Click" Grid.Column="2" Grid.Row="4" Content="3" /> <Button Name="B0" Click="DigitBtn_Click" Grid.Column="0" Grid.Row="5" Content="0" /> <!--加減乘除操作按鍵的佈局--> <Button Name="Plus" Click="OperationBtn_Click" Grid.Column="3" Grid.Row="2" Content="+" /> <Button Name="Minus" Click="OperationBtn_Click" Grid.Column="3" Grid.Row="3" Content="-" /> <Button Name="Multiply" Click="OperationBtn_Click" Grid.Column="3" Grid.Row="4" Content="*" /> <Button Name="Divide" Click="OperationBtn_Click" Grid.Column="3" Grid.Row="5" Content="/" /> <!--等於和刪除按鍵的佈局--> <Button Name="Del" Grid.Column="2" Grid.Row="5" Content="刪除" Click="Del_Click" /> <Button Name="Result" Grid.Column="1" Grid.Row="5" Content="=" Click="Result_Click" /> <!--OperationResult顯示輸入的數字--> <TextBlock Name="OperationResult" FontSize="120" Grid.Row="1" Margin="6,17,10,17" Grid.ColumnSpan="4" HorizontalAlignment="Right"></TextBlock> <!--InputInformation顯示輸入的公式--> <TextBlock Name="InputInformation" Grid.Row="0" Margin="6,12,10,11" Grid.ColumnSpan="4" HorizontalAlignment="Right"></TextBlock> </Grid> .cs文件 using System; using System.Windows; using System.Windows.Controls; using Microsoft.Phone.Controls;
namespace Calculator { public partial class MainPage : PhoneApplicationPage { //之前一次你按下的運算符 private string Operation=""; //結果 private int num1 = 0; public MainPage() { InitializeComponent(); } //數字按鍵的事件 private void DigitBtn_Click(object sender, RoutedEventArgs e) { //如果之前的操作時按下了等於符號，則清除之前的操作數據 if (Operation == "=") { OperationResult.Text = ""; InputInformation.Text = ""; Operation = ""; num1 = 0; } //獲取你按下的按鈕的文本內容，即你按下的數字 string s = ((Button)sender).Content.ToString(); OperationResult.Text = OperationResult.Text + s; InputInformation.Text = InputInformation.Text + s; } //加減乘除按鍵的事件 private void OperationBtn_Click(object sender, RoutedEventArgs e) { if (Operation == "=") { InputInformation.Text = OperationResult.Text; Operation = "";
} string s = ((Button)sender).Content.ToString(); //公式顯示 InputInformation.Text = InputInformation.Text + s; //運算 OperationNum(s); //情況你之前輸入的數字 OperationResult.Text = ""; } //按下等於運算符的事件 private void Result_Click(object sender, RoutedEventArgs e) { OperationNum("="); //顯示結果 OperationResult.Text = num1.ToString(); } //刪除之前的所有輸入 private void Del_Click(object sender, RoutedEventArgs e) { OperationResult.Text =""; InputInformation.Text = ""; Operation = ""; num1 = 0; }
//通過運算符進行計算 private void OperationNum(string s) { //輸入的數字不爲空，則進行運算，否則只是保存你最後一次按下的運算符 if (OperationResult.Text != "") { switch (Operation) { case "": num1 = Int32.Parse(OperationResult.Text); Operation = s; break; case "+": num1 = num1 + Int32.Parse(OperationResult.Text); Operation = s; break; case "-": num1 = num1 - Int32.Parse(OperationResult.Text); Operation = s; break; case "*": num1 = num1 * Int32.Parse(OperationResult.Text); Operation = s; break; case "/": if (Int32.Parse(OperationResult.Text) != 0) num1 = num1 / Int32.Parse(OperationResult.Text); else num1 = 0; Operation = s; break; default: break; } } else { Operation = s; } }
} } |