I have come across a layout / template problem with CommandBar of which symptoms are seen in several pages:
UWP - CommandBar blank space under Buttons
https://github.com/microsoft/microsoft-ui-xaml/issues/1024
It seems that the UWP CommandBar elements inside the CommandBar have an actual height of 44px, which is cropped in a control of 40px.
When IsOpen="False", the AppBarButtons are vertically centered and the bottom 4px of the CommandBar.Content section is not shown
When IsOpen="Top", the AppBarButtons are shifted up, an ugly gap appears under them and the bottom 4px of the CommandBar.Content section is suddenly shown
Besides the ugly gap, it makes it very difficult to correctly vertically center elements in CommandBar.Content.
About the vertical position of the CommandBar
When the CommandBar is at the top of the Page, the CommandBar itself does not vertically resize.
When the CommandBar is at the bottom of the Page, the CommandBar itself grows vertically with 4px.
In all cases, the other symptoms happen
At bottom of page
The red line visualizes the bottom 4px of the CommandBar.Content section. Also, with the Reveal effect to the left of the mouse cursor you can see that the buttons shift up. The whole CommandBar grows vertically
At top of page
Trying to vertically align the content (hint: does not work)
Question
Is there any way to workaround this issue? Microsoft has qualified this more than a year ago as something they might fix in WinUI 3 which is far away.
Bug repro repository
https://github.com/hansmbakker/CommandBar.BugRepro
Relevant code to reproduce
<Page x:Class="CommandBar.BugRepro.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CommandBar.BugRepro"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.BottomAppBar>
<CommandBar
VerticalContentAlignment="Bottom"
Background="#BB555555"
DefaultLabelPosition="Right">
<AppBarButton Icon="Back"
Label="Back" />
<AppBarButton Icon="Save"
Label="Save" />
<AppBarSeparator />
<AppBarButton Label="Title" />
<AppBarButton Label="Description" />
<AppBarButton Label="Pictures"
Icon="Pictures" />
<CommandBar.Content>
<Rectangle Fill="Red"
Height="4"
Width="200" />
</CommandBar.Content>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Setting"
Label="Settings">
<AppBarButton.KeyboardAccelerators>
<KeyboardAccelerator Modifiers="Control"
Key="I" />
</AppBarButton.KeyboardAccelerators>
</AppBarButton>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
<Grid>
</Grid>
</Page>
UWP CommandBar moves vertically when IsOpen changes
During the testing, AppBarSeparator cause this behavior. Currently there is a work around that could fix this, please give AppBarSeparator specific height less than 40px.
<AppBarSeparator Height="40"/>
Related
I am attempting to make a multipage app and would like to use a common navigation toolbar across all pages. The page includes:
<Page.TopAppBar>
<AppBar >
<StackPanel Orientation="Horizontal">
<Button />
</StackPanel>
</AppBar>
</Page.TopAppBar>
In App.xaml I can define the AppBar that goes into the Page.TopAppBar:
<Application.Resources>
<AppBar x:Key="CommonAppBar" x:Name="AppBarCommon">
<StackPanel Orientation="Horizontal">
<Button />
</StackPanel>
</AppBar>
</Application.Resources>
But how can I use this AppBar defination in the Page xaml?
You can use the Frame control on one page and show another your pages inside that frame. Then you can add an AppBar to this page.
By the way, the AppBarButton is the button that is used inside an AppBar, not StackPanel and Buttons (your approach will still work, but if you expect the same behaviour and look as in other UWP apps, it's easier to use AppBarButtons).
I'm creating a basic application to test some functionality in a XAML based Windows 8 app.
I have created the following structure to simplify my example but in the real app it'll be more complex:
<Page
x:Name="pageRoot"
x:Class="ScrollingTest.Xaml.MainPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ScrollingTest.Xaml"
xmlns:common="using:ScrollingTest.Xaml.Common"
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}">
<ScrollViewer
HorizontalScrollMode="Auto"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Hidden" Margin="0,0,0,10" VerticalContentAlignment="Stretch" BorderBrush="#FF0BC8FF" BorderThickness="1" Grid.Row="1" >
<Frame Content="Frame" Name="theFrame" Margin="100" Width="3000" BorderBrush="Red" BorderThickness="1"
ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.VerticalScrollBarVisibility="Visible" />
</ScrollViewer>
</Grid>
</Page>
The page, which is loaded into the Frame is of variable height (it contains a listview).
The issue is that as the height of the sub-page increases, so does the height of the ScrollViewer, meaning that the content is forced off the bottom of the screen.
What I'd want to achieve is horizontal scrolling for the parent but then use vertical scrolling on the sub-page. In the real application there will be many sub-pages, probably within a grid.
It seems that putting the frame inside a ScrollViewer breaks the frame's internal scrolling capabilities.
If anyone could let me know of either a better way to achieve my end result or of some property I need to change then I'd be very grateful.
I ended up using the solution from the following comment:
XAML: Limiting size of control nested in ScrollViewer (to scroll nested within the ScrollViewer)
Height="{Binding ElementName=scrollViewer, Path=ActualHeight}"
Not really what I wanted as this doesn't cope automatically when changing the orientation but it will have to do.
The other option is to handle the SizeChanged event of the page and update the height from the event handler (theFrame.Height = scrollViewer.ActualHeight). That way it copes with changing the orientation as well.
I am displaying a clipped image (round shape) inside a KinectTileButton. The problem is that I don't know how to change the Selected behavior. By default, when the button gets clicked, the entire area gets darker and I get to see the corners of the square. I want to change the Selected state to transparent so I don't see the corners of the square (as I have a circle inside).
<k:KinectTileButton Background="Transparent" Width="500" Height="500" Click="ContactClick">
<Grid Height="500" Width="500">
<Image Source="/Namespace;component/Resources/Images/Image.png" Width="450" Height="450" x:Name="ContactStream">
<Image.Clip>
<EllipseGeometry RadiusX="220" RadiusY="220" Center="225,225"/>
</Image.Clip>
</Image>
</Grid>
</k:KinectTileButton>
I have a Windows Store app BottomAppBar with a grid. For some reason the AppBar has some left and right margin which I don't want. Is this a bug in metro app or there is some setting missing in below code.
<common:LayoutAwarePage.BottomAppBar>
<AppBar>
<AppBar.Background>
<SolidColorBrush Color="Black" Opacity="0"/>
</AppBar.Background>
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.Background>
<SolidColorBrush Color="Black" Opacity="0.7"/>
</Grid.Background>
<Button Content="Hello"/>
</Grid>
</AppBar>
</common:LayoutAwarePage.BottomAppBar>
If you run the app, you can see that some region on the left and right side is not covered by AppBar( Or Grid). Why?
It seems that the default template of the AppBar control has some left and right padding.
You simply has to set the Padding property of the AppBar to 0.
I assume the left-right padding is there, so that controls are not drawn next to the edges of the screen.
Anyway, as #Mark says, just adjust the padding.
<Page.BottomAppBar>
<AppBar Padding='0'>
<AppBar.Background>
...
It seems like every object that has been added to a page in a Windows 8 App gets this "slide from right to left"-entrance-transition which begins whenever someone navigates to the page.
Is there a possibility to remove single objects from this transition?
Neither
<Object.Transitions>
<TransitionCollection />
</Object.Transitions>
nor this thread helped...
Any ideas?
AFAIK There's no way to exempt a given object from the transitions applied by it's parents. The only thing I can suggest is to structure your xaml in such a way that the transition isn't applied. By this I mean having this special item in a panel that has no children transitions while the rest of the page is in a panel with a child transition. Depending on where this item is it could be very easy or difficult as hell.
As Nigel suggested, the only solution I have found has been to change the page structure and put the elements out of the grid that has the animations:
<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}">
<Grid.Transitions>
<TransitionCollection/>
<!-- Ensure no transitions in background -->
</Grid.Transitions>
<TextBlock FontSize="50" Margin="50">This item is not animated</TextBlock>
<Grid>
<Grid.ChildrenTransitions>
<TransitionCollection>
<!-- add transitions here -->
<EntranceThemeTransition FromVerticalOffset="1500" FromHorizontalOffset="1500"/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<TextBlock Margin="50,100" FontSize="50">This item is animated</TextBlock>
</Grid>
<TextBlock FontSize="50" Margin="50,150">Another not animated item</TextBlock>
</Grid>
</Page>