In Windows Phone 8.1 I can define my Bottom Command Bar like so:
<Page {...}>
<Grid>
{...}
</Grid>
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
<AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>
<CommandBar.SecondaryCommands>
<AppBarButton Label="Edit" Icon="Edit" Click="AppBarButton_Click"/>
<AppBarButton Label="Remove" Icon="Remove" Click="AppBarButton_Click"/>
<AppBarButton Label="Add" Icon="Add" Click="AppBarButton_Click"/>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
</Page>
This is fine for just one Bar, however, how can I change it to another if the user clicks in the Help button? Just in XAML.
Related
I am trying to add a commandbar to the MasterDetailsView, but I cannot figure out how to add the control using straight XAML.
Here's my code:
<CommandBar Grid.Row="0" Name="CommandBar" >
<AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
<AppBarToggleButton Icon="RepeatAll" Label="Repeat" />
<AppBarSeparator/>
<AppBarButton Icon="Back" Label="Back" />
<AppBarButton Icon="Stop" Label="Stop" />
<AppBarButton Icon="Play" Label="Play" />
<AppBarButton Icon="Forward" Label="Forward" />
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Like" Label="Like" />
<AppBarButton Icon="Dislike" Label="Dislike" />
</CommandBar.SecondaryCommands>
<CommandBar.Content>
<TextBlock Text="Now playing..." Margin="12,14"/>
</CommandBar.Content>
</CommandBar>
<controls:MasterDetailsView MasterCommandBar="{x:Bind CommandBar}"
Grid.Row="1"
x:Name="MasterDetailsViewControl"
ItemsSource="{x:Bind ViewModel.SampleItems, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
ItemTemplate="{StaticResource ItemTemplate}"
DetailsTemplate="{StaticResource DetailsTemplate}"
NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
BorderBrush="Transparent" />
You can set the CommandBar like such:
<controls:MasterDetailsView MasterCommandBar="{x:Bind CommandBar}"
Grid.Row="1"
x:Name="MasterDetailsViewControl"
ItemsSource="{x:Bind ViewModel.SampleItems, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
ItemTemplate="{StaticResource ItemTemplate}"
DetailsTemplate="{StaticResource DetailsTemplate}"
NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
BorderBrush="Transparent">
<controls:MasterDetailsView.MasterCommandBar>
<CommandBar>
<AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
</CommandBar>
</controls:MasterDetailsView.MasterCommandBar>
</controls:MasterDetailsView>
You should also be able to put the CommandBar into your page resources and apply using the resource
<Page.Resources>
<CommandBar x:Key="MasterCommandBar" >
<AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
<AppBarToggleButton Icon="RepeatAll" Label="Repeat" />
<AppBarSeparator/>
<AppBarButton Icon="Back" Label="Back" />
<AppBarButton Icon="Stop" Label="Stop" />
<AppBarButton Icon="Play" Label="Play" />
<AppBarButton Icon="Forward" Label="Forward" />
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Like" Label="Like" />
<AppBarButton Icon="Dislike" Label="Dislike" />
</CommandBar.SecondaryCommands>
<CommandBar.Content>
<TextBlock Text="Now playing..." Margin="12,14"/>
</CommandBar.Content>
</CommandBar>
</Page.Resources>
<controls:MasterDetailsView MasterCommandBar="{StaticResource MasterCommandBar}"
Grid.Row="1"
x:Name="MasterDetailsViewControl"
ItemsSource="{x:Bind ViewModel.SampleItems, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
ItemTemplate="{StaticResource ItemTemplate}"
DetailsTemplate="{StaticResource DetailsTemplate}"
NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
BorderBrush="Transparent" />
For a Windows Store App a requirement says : "Keep the focus on a TextBox when the page is loaded and after user interact with others components".
I solved the Issue when the page is loaded and when the user interact with other components in the same Grid (i.e. Buttons).
MyTextBox.LostFocus += (s,e)=> {
Dispatcher.RunAsync(
CoreDispatcherPriority.Normal, () => SearchBox.Focus(FocusState.Programmatic));
}
The problem is that when when the user interact with components in different view , like the AppBar.
Maybe i can solve the issue comparing the parent views and run the Focus(FocusState.Programmatic) if they are coming from the same view.
But... how ?
Based on your description, you want to keep focus on TextBox. I do a simple demo and you can refer to this.
XAML：
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom">
<TextBox x:Name="textbox1" Width="300" Height="50" HorizontalAlignment="Left" VerticalAlignment="Bottom"></TextBox>
</StackPanel>
<CommandBar>
<AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
<AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
<AppBarSeparator/>
<AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
<AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
<AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
<AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Like" Label="Like" Click="AppBarButton_Click"/>
<AppBarButton Icon="Dislike" Label="Dislike" Click="AppBarButton_Click"/>
</CommandBar.SecondaryCommands>
<CommandBar.Content>
<TextBlock Text="Now playing..." Margin="12,14"/>
</CommandBar.Content>
</CommandBar>
</Grid>
Code Behind:
public MainPage()
{
this.InitializeComponent();
this.LayoutUpdated += MainPage_LayoutUpdated;
}
private void MainPage_LayoutUpdated(object sender, object e)
{
textbox1.Focus(Windows.UI.Xaml.FocusState.Programmatic);
}
I also find one threads you can refer to.
I am working on the project of windows universal platform(UWP).In this Project I have a issued regarding to the bottom Appbar.
I designed a bottom Appbar and add a 7 Appbar Button.which is displayed Properly in desktop and tabulate view, but in mobile view its not properly displayed. I captured a bottom Appbar photo of the both Mobile and Desktop view.
so kindly give a solution for mobile view how i manage all 7 appbar button?
how to reduce appbar button size ? so it will display proper in mobile view.
Code:
<Page.BottomAppBar>
<AppBar x:Name="applicationbar" Background="#FFE45427">
<StackPanel x:Name="bottombar" Orientation="Horizontal" HorizontalAlignment="Center">
<AppBarButton Label="HOME" x:Name="appbarhome" Click="appbarhome_Click">
<AppBarButton.Icon>
<BitmapIcon UriSource="Images/DashboardImages/product-default-small.png" />
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Sales" x:Name="appbarsales" Click="appbarsales_Click">
<AppBarButton.Icon>
<BitmapIcon UriSource="Images/DashboardImages/menu_sales.png"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Product" x:Name="appbarproduct" Click="appbarproduct_Click">
<AppBarButton.Icon>
<BitmapIcon UriSource="Images/DashboardImages/menu_product.png" />
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="POS" x:Name="appbarpos" Click="appbarpos_Click">
<AppBarButton.Icon>
<BitmapIcon UriSource="Images/DashboardImages/menu_pos.png"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Customer" x:Name="customer" Click="customer_Click">
<AppBarButton.Icon>
<BitmapIcon UriSource="Images/DashboardImages/menu_customers.png"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="About US" x:Name="aboutUs" Click="aboutUs_Click">
<AppBarButton.Icon>
<BitmapIcon UriSource="Images/DashboardImages/menu_aboutus.png"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Logout" x:Name="mobile_logout_commandbar" Click="mobile_logout_commandbar_Click">
<AppBarButton.Icon>
<BitmapIcon UriSource="Images/DashboardImages/menu_logout.png"/>
</AppBarButton.Icon>
</AppBarButton>
</StackPanel>
</AppBar>
</Page.BottomAppBar>
Image:
I would recommend change in design. If thats not an option go for horizontal scrollviewer that contains all your appbar buttons.
We can provide Minheight and MaxHeight to reduce button size but it will not look better in Mobile view so we need to use Menuflylaouts.
Code:
<AppBarButton Icon="OpenWith" Label="More.." x:Name="more_item">
<AppBarButton.Flyout>
<MenuFlyout>
<MenuFlyout.MenuFlyoutPresenterStyle>
<Style TargetType="MenuFlyoutPresenter">
<Setter Property="Margin" Value="0,-31,0,0" />
<Setter Property="Background" Value="#FFE45427" />
<Setter Property="FontSize" Value="12" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="MaxWidth" Value="70"/>
</Style>
</MenuFlyout.MenuFlyoutPresenterStyle>
<MenuFlyoutItem Text="Logout" FontSize="13" Padding="8,8,0,8" Click="logout_Click" />
<MenuFlyoutItem Text="About Us" FontSize="13" Padding="8,8,0,8" Click="aboutus_click" />
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>
and this way we can easily add muliple button in app bar and it will look better in mobile view.
I have a commandbar and on one of the appbar buttons I attached a flyout which shows up properly. This flyout again has a command bar with appbar buttons. The problem is that I wanted to open a flyout again on one of these buttons but that does not work. Please help!
<Page.Resources>
<Flyout x:Key="SetBookmarkFlyout">
<Grid Width="250" Height="250">
<TextBlock Grid.Row="0">Name</TextBlock>
<TextBox Grid.Row="1" x:Name="BookmarkName"></TextBox>
<TextBlock Grid.Row="2">Create in</TextBlock>
<ComboBox Grid.Row="3"></ComboBox>
</Grid>
</Flyout>
<Flyout x:Key="SubMenuFlyout">
<CommandBar Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="250" >
<AppBarButton Icon="Bookmarks" ToolTipService.ToolTip="Open Bookmarks"></AppBarButton>
<AppBarButton x:Name="SetBookmark" Icon="Favorite" ToolTipService.ToolTip="Set Bookmark" Click="SetBookmark_Click" FlyoutBase.AttachedFlyout="{StaticResource SetBookmarkFlyout}" ></AppBarButton>
<AppBarButton Icon="Page" ToolTipService.ToolTip="Recent Files"></AppBarButton>
</CommandBar>
</Flyout>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="0,0,0,-10" >
<CommandBar x:Name="Commandbar" Height="70" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<AppBarButton Icon="Back" Label="" ToolTipService.ToolTip="Back" ></AppBarButton>
<AppBarButton Icon="Forward" Label="" ToolTipService.ToolTip="Forward" ></AppBarButton>
<AppBarButton x:Name="SpaceAppBtn"></AppBarButton>
<AppBarButton Icon="Add" Label="" ToolTipService.ToolTip="Add Tab"></AppBarButton>
<AppBarButton Icon="Favorite" Label="" ToolTipService.ToolTip="Favorites (Set Bookmark,open Bookmarks, and see recent files)" Click="AppBarButton_Click" FlyoutBase.AttachedFlyout="{StaticResource SubMenuFlyout}">
</AppBarButton>
<AppBarButton Icon="Find" Label="" ToolTipService.ToolTip="Search"></AppBarButton>
</CommandBar>
</Grid>
I have added your Flyout directly to the Button in my example to test.
<AppBarButton x:Name="FavoriteButton" Icon="Favorite" Label="" ToolTipService.ToolTip="Favorites (Set Bookmark,open Bookmarks, and see recent files)"
Click="AppBarButton_Click">
<AppBarButton.Flyout>
<Flyout>
<CommandBar Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="250" >
<AppBarButton Icon="Bookmarks" ToolTipService.ToolTip="Open Bookmarks"></AppBarButton>
<AppBarButton x:Name="SetBookmark" Icon="Favorite" ToolTipService.ToolTip="Set Bookmark"
Click="SetBookmark_Cick">
</AppBarButton>
<AppBarButton Icon="Page" ToolTipService.ToolTip="Recent Files"></AppBarButton>
</CommandBar>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>
Use a Popup rather than the second Flyout.
After CommandBar add
<CommandBar>...
</CommandBar>
<Popup x:Name="SetBookmarkPopup" HorizontalOffset="200" VerticalOffset="200">
<Grid Width="250" Height="250">
<TextBlock Grid.Row="0">Name</TextBlock>
<TextBox Grid.Row="1" x:Name="BookmarkName"></TextBox>
<TextBlock Grid.Row="2">Create in</TextBlock>
<ComboBox Grid.Row="3"></ComboBox>
</Grid>
</Popup>
and call from your AppBarButton_Click event
private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
FavoriteButton.Flyout.ShowAt(FavoriteButton);
}
finally open the Popup
private void SetBookmark_Cick(object sender, RoutedEventArgs e)
{
SetBookmarkPopup.IsOpen = true;
}
Hope that helps
With this XAML:
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource BrowsePhotosAppBarButtonStyle}" Click="btnOpenImgFiles_Click"/>
<Button Style="{StaticResource OpenAppBarButtonStyle}" Click="btnOpenMap_Click"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource SaveAppBarButtonStyle}" Click="btnSaveMap_Click"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
(which I adapted from markup I found online) I got a "Windows.UI.Xaml.Markup.XamlParseException"
Looking at this, I figured it should be AppBarButton instead of Button, so I changed them to that...but I'm still getting the same err msg. Is it because there's no such thing as "BrowsePhotosAppBarButtonStyle" (I can't find a list of valid values for that) or...???
Yes. It's probably the button styles which are based on legacy Windows 8 code. If you're targeting Windows 8.1 then you should use AppBarButtons rather than Buttons. I'd also put them in a CommandBar rather than layout out your own Grid in an AppBar.
If BrowsePhotosAppBarButtonStyle isn't specific to the sample you got that from it is probably available in the StandardStyles.xaml file included with Windows 8 templates. That file included a large number of commented out button styles for you to uncomment as needed.
Here's how you'd set this up in a Windows 8.1 app. For simplicity I didn't hook up the Click handlers, and you may want to update the Label and Automation names:
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<CommandBar>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="BrowsePhotos" Label="Browse" AutomationProperties.Name="Browse Photos" />
</CommandBar.SecondaryCommands>
<CommandBar.PrimaryCommands>
<AppBarButton Icon="OpenFile" Label="Open" AutomationProperties.Name="Open File"/>
<AppBarButton Icon="Save" Label="Save" AutomationProperties.Name="Save File"/>
</CommandBar.PrimaryCommands>
</CommandBar>
</AppBar>
</Page.BottomAppBar>
See Adding app bars (XAML) for more details.