Use AppBar as resource on multiple pages in Universal Windows App - xaml

I would like to use a AppBar on multiple pages as a resource.
I found an MSDN document (link) but it's for Windows Phone.
Does anyone know if this is even possible for Universal Apps?
This is how my App.xaml looks like now:
<Application.Resources>
<AppBar x:Key="GlobalBar" ClosedDisplayMode="Minimal">
<!--Controls....-->
</AppBar>
</Application.Resources>
But how do I implement this on, let's say, MainPage.xaml?

The fastest and easiest way to do this is to have a page with the AppBar and a Main Frame.
Create a RootPage.
Add an Appbar.
Add a Frame and name it
something(ex rootFrame)
In the constructor or OnNavigatedTo of
rootPage navigate the rootFrame to your MainPage.
Now you have an AppBar in all pages. In the pages you can use this.Frame.Navigate(...) to navigate. In rootPage where your AppBar is you can use rootFrame.Navigate(...)

Sadly you can't do exactly as you want....But you can implement it with a different approach. Use a single master page - add Frame and a single AppBar. The Frame will take care of Page Navigation. I will also suggest you to use commandBar instead of AppBar in UWP apps.
You can use it in MainPage.xaml as -
<Page
x:Class="App2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.BottomAppBar>
<AppBar>
</AppBar>
</Page.BottomAppBar>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<!--Your Code-->
</Grid>

Related

XamarinForms Pagetypes

I am starting with XamarinForms. I would like to create application which look line Facebook Messanger. The points is I am looking for tip how to achive bottom bar with buttons to navigate throught views.
I was trying to do it with CarouselPage but I dont see option to make static bottom bar. As I see CarouselPage can only contain collection of ContentPages
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:xxx"
x:Name="ThisPage"
x:Class="xxx">
<ContentPage>
<ContentPage.Content>
<Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
<ContentPage>
<ContentPage.Content>
<Grid>
<Label Text="Page1"></Label>
</Grid>
</ContentPage.Content>
</ContentPage>
<ContentPage>
<ContentPage.Content>
<Grid>
<Label Text="Page2"></Label>
</Grid>
</ContentPage.Content>
</ContentPage>
</CarouselPage>
I did also try to make it as it was possible in XAML - create stacklayout at the bottom with navigation buttons and create content presenter to the rest page and dymanically change his content but it did not work as expected.
Can someone give me any tip ?:)
I think you have many ways to do it. I don't use Fb Messenger (sorry) but I have an idea of what you need.
First I will remind you that a "TabbedPage" will give give you this bottom bar on iOS but will be on the top for Android...
Next, you can use a third party component. I've already seen several in the past I think (If you 'DuckDuckGo' 'xamarin forms bottom bar' for instance you should find good things. You can try this one for example that renders the bottom bar on Android pretty well (and the native bar for iOS): Github BottomNavigationBarXF.
Finally, has you mentionned it, you can try to make your own navigation bar. It should not be difficult if you have some design skills. Make your bottom bar control that accepts "navigation buttons", then change the 'ContentPresenter.Content' property (in the page that owns your bottom bar) in response of the button clicks...
Exemple of the Github project (BottomBarNavigationXF):
(Android) (iOS)
Tell me if it's what you was looking for, or mark as answered if it's ok for you !

Is it possible to modify high level UI from code while developing UWP XAML application?

For example in browsers I can manipulate DOM from JS.
Are there any analogue API?
Is it possible at all?
Update:
We define UI using XAML while developing UWP application.
Can I change UI defined by XAML or is it fixed forever?
You can absolutely change the UI at run time.
Add controls, remove controls, change properties, apply transforms or behaviours, restyle things. It's all possible.
As a simple example.
Given this XAML:
<Page
x:Class="SO33419586.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="TheGrid"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock>bye bye</TextBlock>
</Grid>
</Page>
we can do the following in code behind:
this.TheGrid.Background = new SolidColorBrush(Colors.Chartreuse);
this.TheGrid.Children.Clear();
this.TheGrid.Children.Add(new Button {Content = "click me"});
When run this creates a view with a green (chartreuse) background and containing a button but no textblock.
The key part here is the x:Name assigned in XAML as that makes it simple to reference controls created that way.

system tray in xaml windows phone 8

how can i hide this icons,
?
problem is i always have same color background even if theme is black or light and it is not looking good, i know it is possible to hide it. in xaml but i dont know the best way !
i tried this one ! but not working :(
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PuzzleTalk"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
Shell:SystemTray.IsVisiable="False"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
There's a typo in your code - you have Shell:SystemTray.IsVisiable="False" try Shell:SystemTray.IsVisible="False" instead...
Based off your XAML tags, you're trying to do this with Windows Phone 8.1 runtime
<Page> was the dead give away.
The shell:SystemTray.IsVisible="True" is only forWindows Phone 8 Silverlight and Windows Phone 8.1 Silverlight
Code to hide Status Bar
StatusBar statusBar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();
// Hide the status bar
await statusBar.HideAsync();
//Show the status bar
await statusBar.ShowAsync();
Taken from Hide Status bar in Windows Phone 8.1 Universal Apps

How to create Top AppBar similar to built-in apps in Windows 8.1?

The built-in Windows 8.1 apps like Sports, Travel, etc. use cool top multi-level AppBar. It almost looks like it's some kind of standard UserControl to be used in any app, but I haven't found any guide, how to add it simply in my app as well.
Is this really some kind of generic appbar, or custom AppBar used only in Microsoft apps? The basic CommandBar has no such styling I am aware of.
There is AppBar control in WP 8.1 but you may need to set its layout and style. But you can start with default styling. Consider the sample of app bar below where I have added few primary command and one secondary command
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock HorizontalAlignment="Left" Margin="471,258,0,0" TextWrapping="Wrap" Text="Demo AppBar" FontSize="32" VerticalAlignment="Top" Height="64" Width="314"/>
</Grid>
<Page.BottomAppBar>
<CommandBar>
<CommandBar.PrimaryCommands>
<AppBarButton Icon="Accept" Label="Save"/>
<AppBarButton Icon="Cancel" Label="Cancel"/>
<AppBarSeparator />
<AppBarButton Icon="Add" Label="Add New" />
</CommandBar.PrimaryCommands>
<CommandBar.SecondaryCommands>
<AppBarButton Label="About">
<AppBarButton.Icon>
<BitmapIcon UriSource="/Assets/Logo.scale-100.png" />
</AppBarButton.Icon>
</AppBarButton>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
</Page>
You may like to have a look at Windows 8.1 app bar sample
Still trying it out but I guess this is the solution to make it look like the built in apps:
Tutorial for a Top AppBar / NavigationBar
You can place any GUI-elements you wish inside opf an "AppBar", even AppBars that will roll out on rightclick are possible. So you have to rightclick it 2 times to get all menus.
It looks all the same because MS did them all in it's own studio. I don't think there are sources anywhere because the functionality is possible but the looks should differ. They explicitely advice to design the AppBar differently to make an awesome app in their style guide.

AppBar Button Animation on Add/Remove

I have a WinRT app in which an AppBar button can be one of two buttons depending upon what is selected. Changing from one button to another is straightforward, however it is lacking the visual fluidity we strive for with WinRT.
The visual behavior I am looking for is also seen in the Mail app that ships with Windows 8. If you select a message and bring up the bottom AppBar, tapping the "Mark as Read/Unread" buttons results in a nice transform effect between the two buttons.
Does anyone know if this is a pre-rolled animation or do I have to implement it by hand (or even better, is there a solution out there already)?
The available transitions are in the Windows.UI.Xaml.Media.Animation namespace. Check out what is there and if you don't see what you are looking for then you will have to create your own.
The transition that looks most similar to me is AddDeleteThemeTransition, though the effect is only present when app bar items are added/removed and not when the app bar is opened.
Here's an example of its use
<AppBar>
<Grid>
<StackPanel x:Name="LeftPanel" Orientation="Horizontal">
<Button x:Name="Search" Style="{StaticResource SearchAppBarButtonStyle}" />
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
</Grid>
</AppBar>