When using MenuFlyoutSubItem the sub items pane is placed outside visible area on Android:
Android emulator showing sub items not visible :
Here is the code I am using
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Column="1" Grid.Row="0">
<SymbolIcon Symbol="More"/>
<Button.Flyout>
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuFlyoutItem Text="Item 1"/>
<MenuFlyoutSubItem Text="Sub Items">
<ToggleMenuFlyoutItem Text="Sub Item 1"/>
<ToggleMenuFlyoutItem Text="Sub Item 2"/>
<ToggleMenuFlyoutItem Text="Sub Item 2"/>
</MenuFlyoutSubItem>
</MenuFlyout>
</Button.Flyout>
</Button>
</Grid>
This issue has been fixed in the previews of Uno Platform 3.11, where the layout of popups was incorrectly detecting the bounds of the current window.
You can try the preview bits by checking the experimental box in your nuget package managed and install the latest 3.11.0-dev.XX packages.
Related
Say I create the following shared XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Text="One" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Text="Two First" />
<Button Grid.Column="1" Text="Two Second" />
</Grid>
<Button Grid.Row="2" Text="Three" />
</Grid>
I then run this on an Android device and run the TalkBack screen reader. As I swipe forward through the UI, TalkBack moves from button "One", to button "Three", and then to buttons "Two First" and "Two Second". This doesn't match the order in which I've defined the UI, so is this expected? I get what I consider the expected navigation of moving through the buttons in order of "One"->"Two First"->"Two Second"->"Three", when running the same UI as a Xamarin.UWP app and using the Narrator screen reader.
I've found I can avoid the unexpected TalkBack navigation if I update the UI such that certain parts of the UI are balanced in how deep the UI is defined in the XAML hierarchy. For example, if I wrap button "Three" in a Grid, then I get the expected navigation path.
I can also avoid the unexpected TalkBack navigation if I add a TabIndex to everything that I want TalkBack to reach, but that'll need maintaining as the app UI evolves over time, and as I understand things, not all types of Xamarin.Forms control support TabIndex.
not sure if it's a problem from designs of Grid .From shared code , I think Grid maybe set the second Row as the low level of priority .Because the second Row define the Column individually .
If that is the logic about the design of Grid . You can have a try with define the Row and Column at the same level of priority .
Code as follow :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0"
Grid.ColumnSpan="2"
Text="One" />
<Button Grid.Row="1"
Grid.Column="0"
Text="Two First" />
<Button Grid.Row="1"
Grid.Column="1"
Text="Two Second" />
<Button Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
Text="Three" />
</Grid>
I am trying to do a toolbar as this image (app topbar):
I want to add buttons cancel & save as it's shown in the image above. I am trying to do it with ToolbarItems, but I get [...] button, which actually acts as "dropdown".
Is there any way to make it as first image? Thanks.
As sermet mentioned , you could use NavigationPage.TitleView , the usage is pretty simple .
<NavigationPage.TitleView>
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Button Text="Cancel" />
<Label Text="Example Title" FontSize="Large" Grid.Column="1" HorizontalTextAlignment="Center"/>
<Button Text="Save" Grid.Column="2"/>
</Grid>
</NavigationPage.TitleView>
Update
I have loaded the views inside a grid as below,
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Entry x:Name="SearchTextBox"
Grid.Row="0"
HorizontalOptions="Fill"
Placeholder="Search"
VerticalOptions="Fill" />
<ListView x:Name="listView"
Grid.Row="1"
HorizontalOptions="Fill"
VerticalOptions="Fill" />
<local:CustomListView x:Name="customView"
Grid.Row="0"
ItemsSource="{Binding Items}">
</local:CustomListView >
</Grid>
Out of 3 views in the above code snippet, first two views are rendered properly. But the 3rd view(custom view) not rendered. CustomViews are not rendered only if I set RowDefinition as "Auto". So, anyone please tell why the custom view is not loaded if I set "Auto".
your CustomListView probably doesn't request a minimum size correctly, and as the middle row has a height of *, it takes all of the available space minus the minimum size requests.
I want to create a window that I can style its shape (for example close button). Based on my reading I can not style these sections of a windows as they are not client sections and they are handeled by OS.
To create my own winmdows style, I created a border less windows( style=none) and I am trying to place the buttons on window by myself.
In my design the top of window should have an image on left hand side and close/minimize/maximise buttons on right.
I have this xaml which would shows logo on left and a button on right.
<DockPanel>
<DockPanel DockPanel.Dock="Top" Height="50" Background="DarkGray" Width="Auto" cal:Message.Attach="[Event MouseLeftButtonDown] = [Action MoveWindow]">
<Image DockPanel.Dock="left" Height="47" Source="/Resources/Images/Toplogo.png"/>
<Button DockPanel.Dock="Right" Width="16" Height="14" x:Name="CloseWindow" />
</DockPanel>
But when I run the application, I can see that the logo is on left, but close button is not on the right, but it is in the middle and if I change the window size, logo and button move to the middle of window ( the dockpanel is not resize.)
How can I create such behaviour in xaml?
The DockPanel defaults to `LastChildFill="True"' so the final element within the DockPanel (your button) fills the remaining space.
You can fix it by adding HorizontalAlignment="Right" to the button, or LastChildFill="False" to the inner DockPanel.
I would use a Grid and create two rows. One for the "window bar" and the other for the "content".
Example:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</<Grid.ColumnDefinitions>
<!-- Header w/ button -->
<Grid Grid.Row="0" Background="DarkGray" Height="50" Grid.Column="0" HorizontalAlignment="Stretch">
<Image Height="47" Source="/Resources/Images/Toplogo.png" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<Button Width="16" Height="14" x:Name="CloseWindow" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</Grid>
<!-- Body of Window -->
<Grid Grid.Row="1" Grid.Column="0">
</Grid>
</Grid>
I created a project using the default Grid Template with VS2012, and added a button to the upper right hand corner and it is NOT clickable, and if I remove the GridView then it's clickable. Strange to me, could someone point out why this is the case
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
<Button
x:Name="SettingsButton"
Grid.Column="2"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,120,0"
AutomationProperties.Name="Settings"
Content="Settings"
Click="SettingsButton_Click"
/>
</Grid>
<GridView .... />
</Grid>
Your GridView is being drawn on top of your button grid. Move the button grid declaration below the GridView.
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Move the GridView Here -->
<GridView .... />
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
<Button
x:Name="SettingsButton"
Grid.Column="2"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,120,0"
AutomationProperties.Name="Settings"
Content="Settings"
Click="SettingsButton_Click"
/>
</Grid>
</Grid>