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.
Related
My XAML code:
<AppBarButton>
<AppBarButton.Flyout>
<Flyout>
<TextBlock Text="Text is not selectable here" IsTextSelectionEnabled="True"/>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>
Despite I set IsTextSelectionEnabled - the text is not selectable in Flyout.
Is it possible to make the text selectable ? I tried RichTextBlock - it doesn't work as well.
You could try to set AllowFocusOnInteraction property as true on the AppBarButton to get focus.
<AppBarButton AllowFocusOnInteraction="True">
<AppBarButton.Flyout>
<Flyout>
<TextBlock Text="Text is not selectable here" IsTextSelectionEnabled="True"/>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>
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.
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.
I have an issue with popup placement and especially the target origin.
I want to apply a Metro UI style to my combobox so there's no border between the textbox and the itemslist.
It works well when the popup is placed at the bottom
Placement="Bottom"
but when it encounters the bottom edge of the screen the target origin becomes the top of the placement target.
I'd like to know when the target origin changes to the top left corner, that way i could change the borderthickness of the control. Unfortunately the placement property is not reset to the new target origin so I'm a bit lost here.
Here's the code of the usercontrol.
The placement is set to custom here, it's the only workaround i've found to have something that suits me. But if I want metro like comboboxes I need to know where the popup really shows up...
<Grid>
<formElement:LabelBoxPC x:Name="NameFilter"
LabelName="{Binding FilterLabel,
ElementName=UCInlineFilterPreSelected}"
TextBoxCommand="{Binding GoToEntityManagementCommand}"
TextBoxValue="{Binding SearchValue,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}">
<formElement:LabelBoxPC.InputBindings>
<KeyBinding Key="F4" Command="{Binding GoToEntityManagementCommand}" />
</formElement:LabelBoxPC.InputBindings>
</formElement:LabelBoxPC>
<Popup x:Name="ResultsGrid"
Placement="Custom"
IsOpen="{Binding ElementName=NameFilter, Path=TextBoxFocus, Mode=OneWay}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="None">
<StackPanel>
<Border Padding="5px" Background="#FFF" BorderBrush="#000000" BorderThickness="2,2,2,0">
<Button HorizontalAlignment="Right" Style="{StaticResource SmallIconButton}" Background="{StaticResource DarkCloseIcon}"></Button>
</Border>
<ListBox x:Name="Results"
Width="220"
Style="{StaticResource InlineFilterListBox}"
Height="150"
ItemsSource="{Binding Results}"
SelectedItem="{Binding SelectedObject, ElementName=UCInlineFilterPreSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
</Popup>
</Grid>
I've created a simple user control for my xaml project, but as you can see from my image i cant seem to be able to do certain things.
Ignore the red line, its the size of the control for illustrate its size.
It's placement should be middle of the screen:
<Client:TileMenu HorizontalAlignment="Center" VerticalAlignment="Center" Name="TileOverlayMenu" Background="Azure" BorderBrush="Aquamarine" BorderThickness="3" />
And as you see its background color should be "Azure" with a blueish border of 3.
Why is this?
In the background I have a Canvas:
<Grid x:Name="ContentPanel" Grid.Row="0" Margin="12,0,12,0">
<Canvas Name="GameCanvas">
<Canvas.RenderTransform>
<CompositeTransform x:Name="CanvasRenderTransform" />
</Canvas.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragStarted="GestureListener_DragStarted" DragDelta="GestureListener_DragDelta" Tap="GestureListener_Tap" PinchStarted="GestureListener_PinchStarted" PinchDelta="GestureListener_PinchDelta"/>
</toolkit:GestureService.GestureListener>
</Canvas>
<Client:TileMenu HorizontalAlignment="Center" VerticalAlignment="Center" Name="TileOverlayMenu" Background="Azure" BorderBrush="Aquamarine" BorderThickness="3" />
</Grid>
As for my third problem, having the events in the canvas causes the Move slider to be interrupted, making me only able to push it a little each time :-/
In case TileMenu is a UserControl you would have to set these properties on the top level container in the UserControl's XAML as this defines the entire visual structure of the control.
You could bind to the appropriate values in the UserControl, however:
<UserControl x:Class="YourNamespace.TileMenu" ...
x:Name="tileMenu">
<Border BorderBrush="{Binding BorderBrush, ElementName=tileMenu}"
BorderThickness="{Binding BorderThickness, ElementName=tileMenu}">
<Grid>
...
</Grid>
</Border>
</UserControl>