Is there any way to decrease the height of Bottom AppBar in XAML UWP? I have the below XAML code:
<Page.BottomAppBar>
<CommandBar Height="35">
<CommandBar.SecondaryCommands>
<AppBarButton Label="Share"/>
<AppBarButton Label="Settings"/>
<AppBarButton Label="Settings"/>
<AppBarButton Label="Settings"/>
<AppBarButton Label="Settings"/>
<AppBarButton Label="Settings"/>
<AppBarButton Label="Settings"/>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
Problem is, when I set height to 35 or below 50, I see an extra blank space just above the bottom AppBar. And if I use Black or Blue as background colour, that blank space renders with white colour
The easist way to fix this is to override the corresponding theme resource in the App.xaml.cs file.
<Application
x:Class="MyApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp"
RequestedTheme="Light">
<Application.Resources>
<x:Double x:Key="AppBarThemeCompactHeight">35</x:Double>
</Application.Resources>
</Application>
The way I found this predefined resource is, first I googled up the default Style of the CommandBar, then I basically just went through and found the ones that are related to Height.
Related
This code generates a blank space, a misalignment and a misposition as you can see in the image.
<CommandBar Grid.Row="1" IsOpen="True" VerticalAlignment="Stretch">
<AppBarButton Icon="Add" Label="Nuovo" MinHeight="40" />
</CommandBar>
You can see the blank space, the add icon is too high, the Label is misplaced (more space from the icon is needed).
It seems that bottom gap can be eliminated rather easily by defining some heights in Application.Resources.
App.xaml
<Application.Resources>
<x:Double x:Key="AppBarThemeMinHeight">56</x:Double>
<x:Double x:Key="AppBarThemeCompactHeight">40</x:Double>
</Application.Resources>
MainPage.xaml
<Page.BottomAppBar>
<CommandBar>
<CommandBar.PrimaryCommands>
<AppBarButton Label="New" >
<AppBarButton.Icon>
<FontIcon Glyph="" FontSize="16"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Select">
<AppBarButton.Icon>
<FontIcon Glyph="" FontSize="16"/>
</AppBarButton.Icon>
</AppBarButton>
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>
Fine Alignment (Optional)
AppBarButton (and/or AppBarToggleButton)
To adjust icon position of each button, put a copy of the default AppBarButton style in Application.Resources and alter Margin of ContentePresenter(Name="Content").
<ContentPresenter x:Name="Content" Margin="0,10,0,3" ... />
CommandBar
To adjust ellipsis button's position, similarly make a copy of CommandBar style and alter Padding of Button(Name="MoreButton").
<Button x:Name="MoreButton" Padding="16,17,16,0" ... />
Then,
All the explation here-in-above are based on the default styles defined in generic.xaml ver 10.0.14393.
CommandBar is designed to be used in Page.TopAppBar or Page.BottomAppBar. So if you just want to to show it at bottom of the page, put it in Page.BottomAppBar plainly. Then it will work without any problems.
<Page.BottomAppBar>
<CommandBar IsOpen="True">
<AppBarButton Icon="Add" Label="Nuovo"/>
</CommandBar>
</Page.BottomAppBar>
Or otherwise, if you'd like to manage to use it in the Grid inside Page.Content customizing height or other behaviors, you have to redesign entire Style for CommandBar including Template and Animations, since some important properties are hard-coded in the default Style.
PersonPicture is a control offered in Microsoft's Universal Windows Platform.
It looks great, which is why I'm trying to use it to display a user's initials with a background color.
The problem is that when I set the control's background to a color, the background is not changed on the display.
<PersonPicture Initials="JF"
Background="Red"/>
In the above code, the Background still remains the default, while everything else is updated.
Please if you have been able to set the background color, share how you've done it!
I found the template for the PersonPicture through this question: How to get all Controls' ControlTemplates Programmatically?(UWP)
The PersonPicture ignores its Background property and uses a couple of brushes that make up the colors of the control depending on Dark/Light theme and some hard coded values.
It draws an ellipse/circle and thus shows its container's color in the four corners.
Assuming you want to set the color in the square that contains the picture you could do this:
<Grid Background="Green">
<Grid HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Red">
<PersonPicture />
</Grid>
</Grid>
The first grid represents a page. The second grid tightly wraps around the PersonPicture:
Note how the personpicture is somewhat transparent and shows the color of the grid. The color that the template uses for the ellipse is #77FFFFFF
So you could take it a step further by adding an ellipse:
<Grid Background="Green">
<Grid HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Red">
<Ellipse Fill="White"/>
<PersonPicture />
</Grid>
</Grid>
This allows you to control the color of the picture somewhat by setting the color of the ellipse:
Do note that it still mixes the PersonPicture with the background so you cannot set it to black:
<Grid Background="Green">
<Grid HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Red">
<Ellipse Fill="Black" />
<PersonPicture />
</Grid>
</Grid>
Shows:
And finally, you could copy the template (see: How to get all Controls' ControlTemplates Programmatically?(UWP))
and adjust it to use the Background property.
This question shows how to substitute PivotItem headers text with images, but I wish to have both (plus, the text should be a variable).
The goal is to replicate the following Navigation model:
(source: s-msft.com)
Is it possible to adapt this simple XAML to achieve both text and image? If not, how to do it?
<Page
x:Class="Lenny.Windows.Views.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:Lenny.Windows.Views"
mc:Ignorable="d">
<Page.BottomAppBar>
<CommandBar>
<CommandBar.Content>
<Grid/>
</CommandBar.Content>
<AppBarButton Icon="Accept" Label="appbarbutton"/>
<AppBarButton Icon="Cancel" Label="appbarbutton"/>
</CommandBar>
</Page.BottomAppBar>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Pivot>
<Pivot.HeaderTemplate>
<DataTemplate>
<Image Source="{Binding}"></Image>
</DataTemplate>
</Pivot.HeaderTemplate>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png" >
<Grid />
</PivotItem>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png">
<Grid/>
</PivotItem>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png">
<Grid/>
</PivotItem>
</Pivot>
</Grid>
</Page>
If you are using MVVM you can use a property from your ViewModel and add a textblock in the header template to make a binding with this property and you can change this value from your ViewModel.
I said this because you need the text needs to be variable.
If you are not using MVVM pattern you need to use the Binding Approach
https://msdn.microsoft.com/en-us/library/windows/apps/mt269383.aspx
in xaml you need to add a stackpanel with orientation = horizontal and add your text and your image inside all of them in your header template
I would like to show a ContentDialog on first launch of my app, to show the EULA to the end user.
It seems that if an AppBar is defined in the calling page the two buttons in the dialog are not visible, an empty area with the same size of the command bar area defined in the calling page, is shown instead.
This is the markup on the ContentDialog:
<ContentDialog
x:Class="MyApp.EulaPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp.Pages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="TERMS OF USE"
PrimaryButtonText="i agree"
SecondaryButtonText="cancel"
PrimaryButtonClick="OnAgreeButtonClick"
SecondaryButtonClick="OnCancelButtonClick">
<Grid x:Name="ContentPanel" Margin="0,0,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="524" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Margin="0,0,0,2" >
<RichTextBlock IsTextSelectionEnabled="False" TextAlignment="Left" TextIndent="0" FontSize="14" FontFamily="Segoe WP" >
</RichTextBlock>
</ScrollViewer>
</Grid>
The GridRowDefinition has a fixed hight, because the text in the RichTextBlock needs to be scrolled.
I have prepared a sample project that can be found here. The zip file contains also a screenshot showing how I see the dialog.
I had the same problem and I have solved it by modifying/removing Height/Width and Margins of the Contentdialog
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.