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
Related
I am attaching the result of this code.
enter image description here
What I want the layout to look like is that the red stays centered and the yellow goes towards the ends of the Horizontal.
And regardless of the text size of the label inside the yellow, I want the red color to remain centered.
please give me advice
<StackLayout
BackgroundColor="White"
HorizontalOptions="Center"
Orientation="Horizontal">
<Label x:Name="xTitle"
BackgroundColor="Red"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="asdasdasdas"
VerticalOptions="Fill" />
<Label x:Name="xResult"
BackgroundColor="Goldenrod"
HorizontalOptions="End"
HorizontalTextAlignment="Center"
Text="123123123123123"
VerticalOptions="Fill" />
</StackLayout>
I tried to send the yellow part to the far end while keeping the red label in the center.
You can try to use 'Grid' to achieve this, just as ToolmakerSteve mentioned.
Please refer the following code:
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
Grid.Column="1"
x:Name="xTitle"
BackgroundColor="Red"
Text="asdasdasdas"
VerticalOptions="Fill"
HorizontalOptions="Center" />
<Label Grid.Row="0"
Grid.Column="2"
x:Name="xResult"
Text="123123123123123"
BackgroundColor="Goldenrod"
HorizontalTextAlignment="Center"
VerticalOptions="Fill"
HorizontalOptions="End"/>
</Grid>
</StackLayout>
For more information, you can check Xamarin.Forms Grid.
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.
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'm having trouble with Grid Overlays in UWP Apps.
I have the following Control (without ColumnDefinitions for better viewing):
<Grid>
<Grid Grid.Column="1" Background="Transparent" Tapped="doneGrid_Tapped">
<TextBlock Text="fertig" Foreground="Lime" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Column="3" Background="Transparent" Tapped="allGrid_Tapped">
<TextBlock Text="alle" Foreground="Gray" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Column="5" Background="Transparent" Tapped="undoneGrid_Tapped">
<TextBlock Text="ausstehend" Foreground="Red" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Grid>
Which is working nice. I can tap one of the three areas and it triggers the Tapped event from the Grid. Now I want to go a step further and also include a "swiping gesture".
So I put a Grid on top of that:
<Grid Grid.ColumnSpan="7" Background="Transparent" ManipulationMode="TranslateX" ManipulationStarted="..." ManipulationCompleted="..." />
Now I can swipe left and right, but my Tapping does not work anymore, only swiping.
How can I make Tapping AND swiping both work?
I tested it, when you put a Grid use Grid.ColumnSpan = "7" after your other grids, you actually put a Grid on top of the others, so you can only get the focus of this Grid. When you put a Grid use Grid.ColumnSpan = "7" before your other grids, it is on the lower level of the others, it can be manipulate outside gird3, grid5, and grid7, and these 3 grids can be tapped, but when you want to start manipulate from grid3, 5, 7, it can't work. To achieve your expect, youdon't need to add any Gird use Grid.ColumnSpan = "7", you just need to manipulate that like this:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid ManipulationMode="TranslateX" ManipulationStarted="manipulationStarted" ManipulationCompleted="manipulationCompeleted">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" Background="Transparent" Tapped="doneGrid_Tapped">
<TextBlock Text="fertig" Foreground="Lime" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Column="3" Background="Transparent" Tapped="allGrid_Tapped">
<TextBlock Text="alle" Foreground="Gray" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Column="5" Background="Transparent" Tapped="undoneGrid_Tapped">
<TextBlock Text="ausstehend" Foreground="Red" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<!--<Grid Grid.ColumnSpan="7" Background="Transparent" ManipulationMode="TranslateX" ManipulationStarted="manipulationStarted" ManipulationCompleted="manipulationCompeleted" />-->
</Grid>
</Grid>
Now you can tap them or swip the Grid.
Wish this helps you.
When the Complete Survey button on the Expander.Header is clicked, I would like to Navigate to another page and pass along some information from the viewmodel. I have the expander working so that when its selected it expands, and the selecteditem property is properly bound and filled. However if I just click right to the button, the selecteditem does not change and is not even populated if its the first action. How can I trigger the selected item if the button control is pressed before the expander is selected? I would prefer an MVVM solution if possible. Thanks
<ListBox x:Name="SearchList"
Grid.Row="1"
Margin="5,0,5,0"
Grid.Column="0"
Background="Transparent"
BorderThickness="0"
BorderBrush="Transparent"
ItemsSource="{Binding Path=SearchResults}"
SelectedItem="{Binding Path=SelectedResult,Mode=TwoWay,Converter={StaticResource DebugConverter}}"
HorizontalContentAlignment="Stretch"
HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:Expander>
<sb:BindingHelper.Binding>
<sb:RelativeSourceBinding TargetProperty="IsExpanded"
Path="IsSelected"
RelativeMode="FindAncestor"
AncestorType="ListBoxItem" BindingMode="TwoWay" />
</sb:BindingHelper.Binding>
<toolkit:Expander.Header>
<Grid Width="525">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="25" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0"
Grid.Row="0"
Text="{Binding Path=PatientName}" />
<Button Grid.Column="2"
Grid.Row="0"
Content="Complete Survey">
<sb:BindingHelper.Binding>
<sb:RelativeSourceBinding Path="OpenSurveyCommand"
TargetProperty="Command"
RelativeMode="ParentDataContext" />
</sb:BindingHelper.Binding>
</Button>
</Grid>
</toolkit:Expander.Header>
<StackPanel>
<TextBlock Text="{Binding MRN,Converter={StaticResource StringLabelConverter},ConverterParameter=MRN}" />
<TextBlock Text="{Binding OriginalVisitNumber,Converter={StaticResource StringLabelConverter},ConverterParameter='Original Visit Number'}" />
<TextBlock Text="{Binding OriginalAdmitDate,Converter={StaticResource StringLabelConverter},ConverterParameter='Original Admit Date'}" />
<TextBlock Text="{Binding OriginalReason,Converter={StaticResource StringLabelConverter},ConverterParameter='Original Reason'}" />
<TextBlock Text="{Binding ReAdmitVisitNumber,Converter={StaticResource StringLabelConverter},ConverterParameter='ReAdmit Visit Number'}" />
<TextBlock Text="{Binding ReAdmitDate,Converter={StaticResource StringLabelConverter},ConverterParameter='Readmit Date'}" />
<TextBlock Text="{Binding ReAdmitReason,Converter={StaticResource StringLabelConverter},ConverterParameter='ReAdmit Reason'}" />
</StackPanel>
</toolkit:Expander>
</DataTemplate>
</ListBox.ItemTemplate>
I'm not familiar with the BindingHelper class you're using but if it's using the standard commanding in the background then I'd bind the command parameter to the "item".
That way you have access to the bound item in the commands executed event.
Using a collection of viewmodels with the button in the viewmodel solved this. No special magic other than the ObservableCollectionVM