Implement IE/Microsoft Edge bottom bar in XAML - xaml

Question

I am a huge fan of the browser on Windows phone and I want to port a similar bottom bar to my app. Right now, I am using a standard CommandBar.
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Icon="Go" Click="Go"/>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Setting" Label="Settings" Click="ShowSettings"/>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
As this wastes screen space, I really want to make use of the remaining space of the bar to add something like app status (in place of the address bar of Edge/IE), something like download/upload progress. Unfortunately, the CommandBar does not allow introducing things like TextBlock or ProgressRing. To make use of those controls, we need to change to an AppBar instead. But then, I cannot use the features of CommandBar like the adding 3 dots buttons to open up the hidden buttons.
Is there an easy way to achieve this i.e. combining the flexibility of AppBar and the 3-dot feature of CommandBar?

Answer 1

CommandBar only accept the control that inherit ICommandBarElement interface.
We can create one UserControl which inherit ICommandBarElement, simply did a small test without optimize the code, take a look to see if it helps:
public sealed partial class MyUserControl1 : UserControl, ICommandBarElement
{
public MyUserControl1()
{
this.InitializeComponent();
}
private bool _IsCompact = true;
bool ICommandBarElement.IsCompact
{
get
{
return _IsCompact;
}
set
{
_IsCompact = value;
}
}
}
Also the UserControl XAML:
<UserControl
x:Class="App10.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignWidth="400" Height="38.027">
<Grid>
<TextBlock Foreground="DarkBlue">asdsadasdasdasdasda</TextBlock>
</Grid>
And then we use the userControl in the CommandBar, here we go:
http://i.stack.imgur.com/Bgug9.png
Note: please further optimize it for instance register some Text dependency properties to enable accept the data binding.

Answer 2

Per the documentation on MSDN you can use the CommandBar.Content property which corresponds to the empty area to the side of any primary commands. To alter the alignment of the content you'd need to change the CommandBar.HorizontalContentAlignment property.
<CommandBar HorizontalContentAlignment="Stretch">
<AppBarButton Icon="Go" Click="Go"/>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Setting" Label="Settings" Click="ShowSettings"/>
</CommandBar.SecondaryCommands>
<CommandBar.Content>
<Grid>
<TextBox HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="12,8"/>
</Grid>
</CommandBar.Content>
</CommandBar>
And as of Win10 the recommendation is to place the CommandBar inline instead of using the Page.TopAppBar or Page.BottomAppBar properties. The one scenario in which you may still want to use the Page.BottomAppBar property is to ensure the CommandBar remains visible when the software keyboard appears.