Localizing ApplicationBar with Binding
When I learned how to develop applications based on MVVM I didn’t like it terribly, that many articles show how ApplicationBar is created in ViewModel. In the same place, buttons and menu items are filled with localized strings. I was looking for a solution for a long time, and it was found.
Attention! The article describes only the solution to the problem of localization of the application panel and implies that readers are familiar with the basics of XAML, MVVM, data binding and application localization.
Meet the library to localize the application panel: http://appbarutils.codeplex.com/
To try it in work, we will create an application page and add a usual application panel in it, with buttons and, if necessary, menu items. For example, such:
Note: the Text property must be without spaces. Performance in the presence of Cyrillic is not tested.
Add the AppBarUtils package to the application with the Install-Package AppBarUtils command or via the package manager. Add to the page markup link to build this package:
And we also need an assembly to set the behaviors:
After these preparations, we set the behavior for the page on which the application bar is located. I did it like this:
A behavior is associated with an element to which it is assigned, it occurs by an ID with a value equal to the Text property of the menu item or button. In addition, the type of the menu item is set, which sets the behavior: for the button - Button, for the menu item - MenuItem. I don’t need to explain the meaning of the other properties
After all the manipulations, I got a page in a real application, which is published in the windows phone store:
At the end of the article I will once again point to a link to the AppBarUtils project page, there are also many references to examples of using this library, the source code is not laid out.
I hope that this small article will help novice developers in localizing applications, and experienced developers will get rid of the common misconception that the application panel cannot be localized using data binding.
Attention! The article describes only the solution to the problem of localization of the application panel and implies that readers are familiar with the basics of XAML, MVVM, data binding and application localization.
Meet the library to localize the application panel: http://appbarutils.codeplex.com/
To try it in work, we will create an application page and add a usual application panel in it, with buttons and, if necessary, menu items. For example, such:
<shell:ApplicationBar> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem IsEnabled="True" Text="lookscreen"/> </shell:ApplicationBar.MenuItems> <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/save.png" IsEnabled="True" Text="save"/> </shell:ApplicationBar> Note: the Text property must be without spaces. Performance in the presence of Cyrillic is not tested.
Add the AppBarUtils package to the application with the Install-Package AppBarUtils command or via the package manager. Add to the page markup link to build this package:
xmlns:AppBarUtils="clr-namespace:AppBarUtils;assembly=AppBarUtils" And we also need an assembly to set the behaviors:
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" After these preparations, we set the behavior for the page on which the application bar is located. I did it like this:
<i:Interaction.Behaviors> <AppBarUtils:AppBarItemCommand Id="save" Type="Button" Command="{Binding SaveCommand}" Text="{Binding LocalizedResources.SaveButton, Mode=OneWay, Source={StaticResource LocalizedStrings}}"/> <AppBarUtils:AppBarItemCommand Id="lookscreen" Type="MenuItem" Command="{Binding LookScreenCommand}" Text="{Binding LocalizedResources.ScreenItem, Mode=OneWay, Source={StaticResource LocalizedStrings}}"/> </i:Interaction.Behaviors> A behavior is associated with an element to which it is assigned, it occurs by an ID with a value equal to the Text property of the menu item or button. In addition, the type of the menu item is set, which sets the behavior: for the button - Button, for the menu item - MenuItem. I don’t need to explain the meaning of the other properties
After all the manipulations, I got a page in a real application, which is published in the windows phone store:
XAML
<phone:PhoneApplicationPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP8" xmlns:AppBarUtils="clr-namespace:AppBarUtils;assembly=AppBarUtils" x:Class="CatDay.MainPage" mc:Ignorable="d" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations ="PortraitOrLandscape" shell:SystemTray.IsVisible="True" DataContext="{Binding Main, Mode=OneWay, Source={StaticResource Locator}}"> <shell:SystemTray.ProgressIndicator> <shell:ProgressIndicator IsIndeterminate="true" IsVisible="{Binding ProgressBarValue}" Text="{Binding ProgressBarText}" /> </shell:SystemTray.ProgressIndicator> <phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem IsEnabled="True" Text="donate"/> <shell:ApplicationBarMenuItem IsEnabled="True" Text="lookscreen"/> <shell:ApplicationBarMenuItem IsEnabled="True" Text="skydrive"/> <shell:ApplicationBarMenuItem IsEnabled="True" Text="feedback"/> </shell:ApplicationBar.MenuItems> <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/transport.rew.png" IsEnabled="True" Text="previus"/> <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/save.png" IsEnabled="True" Text="save"/> <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/share.png" IsEnabled="True" Text="share"/> <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/transport.ff.png" IsEnabled="True" Text="next"/> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar> <i:Interaction.Behaviors> <AppBarUtils:AppBarItemCommand Id="next" Type="Button" Text="{Binding LocalizedResources.NextButton, Mode=OneWay, Source={StaticResource LocalizedStrings}}" Command="{Binding NextImageCommand}"/> <AppBarUtils:AppBarItemCommand Id="share" Type="Button" Command="{Binding ShareCommand}" Text="{Binding LocalizedResources.ShareButton, Mode=OneWay, Source={StaticResource LocalizedStrings}}"/> <AppBarUtils:AppBarItemCommand Id="previus" Type="Button" Command="{Binding PreviusImageCommand}" Text="{Binding LocalizedResources.PreviusButton, Mode=OneWay, Source={StaticResource LocalizedStrings}}"/> <AppBarUtils:AppBarItemCommand Id="save" Type="Button" Command="{Binding SaveCommand}" Text="{Binding LocalizedResources.SaveButton, Mode=OneWay, Source={StaticResource LocalizedStrings}}"/> <AppBarUtils:AppBarItemCommand Id="lookscreen" Type="MenuItem" Command="{Binding LookScreenCommand}" Text="{Binding LocalizedResources.ScreenItem, Mode=OneWay, Source={StaticResource LocalizedStrings}}"/> <AppBarUtils:AppBarItemCommand Id="skydrive" Type="MenuItem" Command="{Binding SkyDriveCommand}" Text="{Binding LocalizedResources.SkydriveItem, Mode=OneWay, Source={StaticResource LocalizedStrings}}" /> <AppBarUtils:AppBarItemCommand Id="donate" Type="MenuItem" Text="{Binding LocalizedResources.DonateMenuItem, Mode=OneWay, Source={StaticResource LocalizedStrings}}" Command="{Binding DonateCommand }"/> <AppBarUtils:AppBarItemCommand Id="feedback" Type="MenuItem" Text="{Binding LocalizedResources.FeedbackAppBarButton, Mode=OneWay, Source={StaticResource LocalizedStrings}}" Command="{Binding FeedbackCommand}"/> </i:Interaction.Behaviors> <!--LayoutRoot , --> <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock Text="{Binding LocalizedResources.ApplicationTitle, Mode=OneWay, Source={StaticResource LocalizedStrings}}" Style="{StaticResource PhoneTextGroupHeaderStyle}" Margin="12,0"/> </StackPanel> </Grid> </phone:PhoneApplicationPage> At the end of the article I will once again point to a link to the AppBarUtils project page, there are also many references to examples of using this library, the source code is not laid out.
I hope that this small article will help novice developers in localizing applications, and experienced developers will get rid of the common misconception that the application panel cannot be localized using data binding.
')
Source: https://habr.com/ru/post/206962/
All Articles