Develop Reference

How to use Acrylic Accent in Windows 10 Creators Update?

I can't find any detailed document to use Acrylic Accent (CreateBackdropBrush). I found a post in StackOverflow which is somewhat useful but it doesn't help to get started. So please create a detailed answer to this post so that everyone can learn.
Update:
Microsoft has released an official Acrylic material document
Note:
If anyone doesn't know about Acrylic Accent. Acrylic Accent is the new feature in Windows 10 Creators Update that allows the app background to be Blurred and Transparent.

CREATOR UPDATE
XAML
You need to use a component that you put on the background of your app, let's say a RelativePanel
<RelativePanel Grid.Column="0" Grid.ColumnSpan="2" MinWidth="40" x:Name="MainGrid" SizeChanged="Page_SizeChanged"/>
<RelativePanel Grid.Column="0" Width="{Binding ElementName=MainGrid,Path=Width}" Background="#28000000"/>
<Grid>
<!--Having content here, for example textblock and so on-->
</Grid>
The second RelativePanel is used to set the shadow color above the Blur.
.CS
And then you can use the following code :
private void applyAcrylicAccent(Panel panel)
{
_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
_hostSprite = _compositor.CreateSpriteVisual();
_hostSprite.Size = new Vector2((float) panel.ActualWidth, (float) panel.ActualHeight);
ElementCompositionPreview.SetElementChildVisual(panel, _hostSprite);
_hostSprite.Brush = _compositor.CreateHostBackdropBrush();
}
Compositor _compositor;
SpriteVisual _hostSprite;
and calling it with applyAcrylicAccent(MainGrid);
You also will need to handle the SizeChanged event :
private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (_hostSprite != null)
_hostSprite.Size = e.NewSize.ToVector2();
}
Of course you will need to be on the Creator Update to run this, the CreateHostBackdropBrush() won't work on a mobile device, or in tablet mode.
Also, consider that the panel or grid that you set with a acrylic color won't be able to display any control (as far I've tested yet). So you need to use your relative panel without any control in it.
Transparent Title bar
The transparency of the title bar could be set using the following code
ApplicationViewTitleBar formattableTitleBar = ApplicationView.GetForCurrentView().TitleBar;
formattableTitleBar.ButtonBackgroundColor = Colors.Transparent;
CoreApplicationViewTitleBar coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
Here a example of what the above code generate (with some other things added too.)
Fall Update 10.0.16190 and above
As Justin XL mention in an answer below, starting from the Build 16190 and above, developers have access to different Acrylic Brushes located at Windows.UI.Xaml.Media (Acrylic API) and the guidelines from Microsoft : Acrylic material guidelines

In the Creators Update Insider Preview 16193 (along with Windows 10 SDK 16190), there's a new AcrylicBrush that you can apply directly onto your element just like a normal SolidColorBrush.
<Page xmlns:media="using:Windows.UI.Xaml.Media" ...>
<Page.Resources>
<media:AcrylicBrush x:Key="HostBackdropBrush"
BackgroundSource="HostBackdrop"
TintColor="LightBlue"
TintOpacity="0.6"
FallbackColor="LightSkyBlue"
FallbackForced="False" />
</Page.Resources>
<Grid Background="{StaticResource HostBackdropBrush}" />
</Page>
Note you can change the BackgroundSource to Backdrop to sample from the app content instead of the content behind the app window. Also make sure you define an appropriate FallbackColor because you will lose the acrylic effect when the app window has lost focus or the device is in battery saver mode.

Manipulating Application Bars in Windows Phone 8.1 XAML from Code Behind

This might be a trivial beginner question and I have found quite a bit of related information for Windows and Silverlight apps but nothing that would directly help me. I'm writing a Windows Phone 8.1/WinRT app in C# and XAML, and I would like to programmatically modify application bars created in XAML. For instance, there is a button I want to include in debug builds only, using preprocessor directives in code behind.
In the following XAML code I'm creating a BottomAppBar with two buttons. How can I create the second button (AppBarAddSampleItemsButton) including all properties in code behind?
<prism:VisualStateAwarePage.BottomAppBar>
<CommandBar >
<CommandBar.PrimaryCommands>
<AppBarButton x:Uid="AppBarNewItemButton"
Label="New item"
Icon="Add" Command="{Binding GoToAddItemPageCommand}" />
</CommandBar.PrimaryCommands>
<CommandBar.SecondaryCommands>
<AppBarButton x:Uid="AppBarAddSampleItemsButton"
Label="Add sample items"
Command="{Binding GoToAddSampleItemssPageCommand}" />
</CommandBar.SecondaryCommands>
</CommandBar>
</prism:VisualStateAwarePage.BottomAppBar>

Here is a sample code creating an AppBarButton in the code behind and adding it to BottomAppBar of the current Page:
private void AddButtonToAppBar()
{
AppBarButton buttonToAdd = new AppBarButton { Label = "Label", Icon = new SymbolIcon(Symbol.Help) };
buttonToAdd.Click += async (sender, e) => await new MessageDialog("Button clicked").ShowAsync();
// add button to Page's BottoAppBar
(BottomAppBar as CommandBar).PrimaryCommands.Add(buttonToAdd);
}
Edit - as for Binding (again from the top of my head, so you will have to check this) this should probably work:
Binding myBind = new Binding();
myBind.Path = new PropertyPath("GoToAddSampleItemssPageCommand");
myBind.Source = DataContext;
buttonToAdd.SetBinding(AppBarButton.CommandProperty, myBind);
More about DataBinding at MSDN.

After some digging around on the Windows Phone dev center, I found this page: How to change app bar icon buttons and menu items dynamically for Windows Phone. Hope it helps!

How do resize a Webbrowser in Windows Phone 8 App

I just try to simulate a resizing event of a webbrowser. It's because some user who are older and are not able to read that good see the conten in a bigger size. Following a simple version of the code:
<Viewbox x:Name="BrowserView" Stretch="None" >
<phone:WebBrowser Source="www.google.ch" x:Name="Minibrowser" IsScriptEnabled="True" height="644" Width="462" >
</phone:WebBrowser>
</Viewbox>
<Button Content="Resize" Click="Resize" />
Xaml.Code
And in the underlying code file a method which just resizes the webbrowser:
private void Resize(object sender, RoutedEventArgs e)
{
Minibrowser.Width = 800;
Minibrowser.Height = 1400;}
What happens is that the browser is resized. However it's not possible to scroll over the whole content because the webbrowser size is now bigger than the viewbox and screen as well.
Thanks a lot for help and I'm open to listen to other solutions

Have a look at this post about managing the browser-viewport and WP7 WebBrowser control zoom.
Plus, you could also look for "accessibility"...

Localization of Application Bar in windows phone 8

I want localize my App Bar which I have made in app.xaml but when i try to bind the text of the bar item it says text cannot be empty , i have tried other examples of localized app bar but none of them is working for a app bar which can be used on all pages..

You can declare a global app bar in App.xaml with some fake Text, for example:
<Application
x:Class="PhoneApp1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">
<!--Application Resources-->
<Application.Resources>
<local:LocalizedStrings xmlns:local="clr-namespace:PhoneApp1" x:Key="LocalizedStrings"/>
<shell:ApplicationBar x:Key="GlobalAppBar">
<shell:ApplicationBarIconButton Text="TEST" IconUri="/Assets/check.png"/>
</shell:ApplicationBar>
</Application.Resources>
<Application.ApplicationLifetimeObjects>
<!--Required object that handles lifetime events for the application-->
<shell:PhoneApplicationService
Launching="Application_Launching" Closing="Application_Closing"
Activated="Application_Activated" Deactivated="Application_Deactivated"/>
</Application.ApplicationLifetimeObjects>
</Application>
In App.xaml.cs apply localization:
var appBar = App.Current.Resources["GlobalAppBar"] as ApplicationBar;
((ApplicationBarIconButton) appBar.Buttons[0]).Text = AppResources.AppBarButtonText;
Now you can use the global AppBar everywhere in the App, just do initializing in a code behind of a PhoneApplicationPage:
public MainPage()
{
InitializeComponent();
ApplicationBar = App.Current.Resources["GlobalAppBar"] as ApplicationBar;
}

The error you're getting comes from the fact that the ApplicationBar is not a DependencyObject so it doesn't support Bindings. A common alternative is to use custom AppBar with DependencyProperties, most notably BindableApplicationBar..
<bar:BindableApplicationBarButton
Text="{Binding IconButtonText}"
IconUri="{Binding IconUri, FallbackValue=/Icons/Dark/appbar.add.rest.png}"
IsEnabled="{Binding ButtonIsEnabled}" />
or CaliburnBindableAppBar:
<bab:BindableAppBarButton
x:Name="Add"
Text="{Binding AddButtonText}"
Visibility="{Binding ShowAddButton, Converter={StaticResource BooleanToVisibilityConverter}}"
IconUri="{Binding ButtonIconUri}"/>
(.xaml samples from documentations)

Or you could go the way the default VS template suggests:
Add the following code to your page's XAML (they say as the last element, but i'm not sure it matters)
Create a private method in the code behind to add and databind menu items and call it from the constructor (or wherever you're calling InitializeComponent):
XAML:
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized" />
</phone:PhoneApplicationPage.ApplicationBar>
C# code behind:
private void BuildLocalizedApplicationBar()
{
// Create a new menu item with the localized string from AppResources.
ApplicationBarMenuItem appBarMenuItem = new ApplicationBarMenuItem(AppResources.AboutMenuItem);
ApplicationBar.MenuItems.Add(appBarMenuItem);
}
Still not an ideal solution, but might be better than referencing non-native components just for such a trivial reason.
A couple of official references a combination of which might be useful as a reference in solving the problem:
How to create an app bar using XAML for Windows Phone - http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh394040(v=vs.105).aspx
How to create an app bar using code for Windows Phone - http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff431786(v=vs.105).aspx
How to build a localized app for Windows Phone - http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff637520(v=vs.105).aspx

Appbar not working in windows phone 7 when using codes to navigate to another page

Appbar works great but when I use
this.Content = new PAGE(Constructor1, Constructor1, Constructor1);
to navigate to other page....App bar doesn't show up....:|
Same Xaml works for other page what I am navigating from UI...(Right click>navigate to) but not for when I use the code.....
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="False">
<shell:ApplicationBarIconButton IconUri="/Images/appbar.cancel.rest.png" Text="Cancel"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>

Wouldn't changing this.Content replace the page's content, including the AppBar, by design?
I use NavigationService to navigate between pages. If I have an AppBar I just recreate it on each page.
Alternately, redesign your layout so that the content you are replacing does not include the AppBar (e.g. use a stackpanel or grid to hold your content with the AppBar higher up in the hierarchy).