ApplicationBar Demo (以XAML的方式建立)
在上一篇，有提到利用程式碼的方式來建立ApplicationBar，是不是感覺有點冗長呢？同樣的功能我們可以很輕易的用XAML Code來做到；其實在專案一建立的時候，預設就會將相關的程式碼加在XAML中，像是下圖的地方
這個時候就可以發現XAML的長處了，先來看看修改後XAML的部分
<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="24,24,0,12"> <TextBlock x:Name="ApplicationTitle" Text="ApplicationBar Demo" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="PageTitle" Text="XAML" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel> <!--ContentPanel - place additional content here--> <Grid x:Name="ContentGrid" Grid.Row="1"> <Grid.RowDefinitions> <RowDefinition Height="84*" /> <RowDefinition Height="87*" /> <RowDefinition Height="446*" /> </Grid.RowDefinitions> <TextBox Height="69" HorizontalAlignment="Left" Margin="16,6,0,0" Name="tbSelectedItem" Text="TextBox" VerticalAlignment="Top" Width="334" /> <Slider Grid.Row="2" Height="31" HorizontalAlignment="Left" Margin="6,21,0,0" Name="sdChangeOpacity" VerticalAlignment="Top" Width="468" Minimum="0" Maximum="100" ValueChanged="sdChangeOpacity_ValueChanged"/> <Button Content="Change Visible" Grid.Row="1" Height="76" HorizontalAlignment="Left" Margin="33,11,0,0" Name="btnShowAppBar" VerticalAlignment="Top" Width="412" Click="btnShowAppBar_Click"/> </Grid> </Grid> <phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> <shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/img0.png" Text="Icon-0" Click="IconButton_Click"></shell:ApplicationBarIconButton> <shell:ApplicationBarIconButton x:Name="appbar_button2" IconUri="/Images/img1.png" Text="Icon-1" Click="IconButton_Click"></shell:ApplicationBarIconButton> <shell:ApplicationBarIconButton x:Name="appbar_button3" IconUri="/Images/img2.png" Text="Icon-2" Click="IconButton_Click"></shell:ApplicationBarIconButton> <shell:ApplicationBarIconButton x:Name="appbar_button4" IconUri="/Images/img3.png" Text="Icon-3" Click="IconButton_Click"></shell:ApplicationBarIconButton> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem x:Name="menuItem1" Text="MenuItem 1"></shell:ApplicationBarMenuItem> <shell:ApplicationBarMenuItem x:Name="menuItem2" Text="MenuItem 2"></shell:ApplicationBarMenuItem> </shell:ApplicationBar.MenuItems> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar>而後置的程式碼也會變得比較單純
namespace ApplicationBarDemo
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
//改變ApplicationBar的透明度
void sdChangeOpacity_ValueChanged(object sender, RoutedPropertyChangedEventArgs e)
{
if (this.ApplicationBar == null)
return;
this.ApplicationBar.Opacity = e.NewValue / 100;
}
void btnShowAppBar_Click(object sender, RoutedEventArgs e)
{
this.ApplicationBar.IsVisible = !this.ApplicationBar.IsVisible;
}
//applicationBar按鈕按下時的動作
void IconButton_Click(object sender, EventArgs e)
{
ApplicationBarIconButton item = sender as ApplicationBarIconButton;
tbSelectedItem.Text = item.Text;
}
}
} 到這邊是不是覺得利用XAML來做會比較方便呢；其實在WPF/Silverlight的開發，利用Blend的工具來開發，絕對是比較有效率而且直覺的，所以大多會利用VS IDE或Blend來做介面(XAML)的部分，但是對於程式碼如何去操作元素或是新增/修改畫面上的控制項也是必須要去了解的，當你要"動態"的去建立畫面或是修改畫面，這個時候就必須要利用程式碼來做了。
留言