I've created a tabbedpage to create a horizontal menu at the bottom of the page, but I can't set the scroll property.
This is my code:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GET_SOUND.Views.MenuPage"
xmlns:local="clr-namespace:GET_SOUND.Views"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom"
android:TabbedPage.IsSmoothScrollEnabled="True"
BarBackgroundColor="{StaticResource Primary}"
SelectedTabColor="Orange"
UnselectedTabColor="#95FFFFFF">
<!--Pages can be added as references or inline-->
<local:Dashboard Title="Dashboard" Icon="dashboard" />
<local:Marchi Title="Marchi" Icon="marchi" />
<local:Isrc Title="Isrc" Icon="matrici" />
<local:Documenti Title="Documenti" Icon="documenti" />
<local:Documenti Title="Impostazioni" Icon="imp" />
<local:Anagrafica Title="Anagrafica" Icon="anagrafica" />
<local:OpereTutelate Title="Opere Tutelate" Icon="opere" />
I tried to insert -> App: tabmode = "Scrollable" and the assembly, as suggested in this question, but it gives me an error and I don't understand why
As a suggestion, you can try use
Shell Tab,As it says in documents:
When there are more than five tabs on a TabBar, a More tab will
appear, which can be used to access the additional tabs
And Xamarin.Community is also an option, you can set the scrollable tab on the bottom with TabStripPlacement="Bottom".you can see more in https://github.com/xamarin/XamarinCommunityToolkit/blob/main/samples/XCT.Sample/Pages/Views/TabView/ScrollTabsPage.xaml
Related
I am trying to add a sub menu under my flyout but its placing it on the bottom bar instead for some reason.
addonsflayout.Items.Add(new ShellContent {
Title = "Airliners",
Icon = "tab_about",
Content = new AboutPage()
});
addonsflayout.Items.Add(new ShellContent {
Title = "Piston Planes",
Icon = "tab_about",
Content = new AboutPage()
});
addonsflayout.Items.Add(new ShellContent {
Title = "Turbo Props",
Icon = "tab_about",
Content = new AboutPage()
});
My Main shell flyouts are describe as such
<FlyoutItem Title="Addons" x:Name="addonsflayout" Icon="icon_about.png">
<ShellContent Route="AddonsPage" ContentTemplate="{DataTemplate local:AddonsPage}" />
</FlyoutItem>
<!-- When the Flyout is visible this will be a menu item you can tie a click behavior to -->
<MenuItem Text="Logout" StyleClass="MenuItemLayoutStyle" Clicked="OnMenuItemClicked">
</MenuItem>
But its placing them in the bottom bar so it is.
When I want them here
How does one tell it to show for the side menu and not the bottom bar I am using xamrain forms
Edit 2
While adding FlyoutDisplayOptions="AsMultipleItems" does get it to appear its also adding it to the bottom bar and without indentition in the side menu
<FlyoutItem Title="Addons" FlyoutDisplayOptions="AsMultipleItems" x:Name="addonsflayout" Icon="icon_about.png">
<ShellContent Route="AddonsPage" ContentTemplate="{DataTemplate local:AddonsPage}" />
</FlyoutItem>
Piston planes should be further in. Also doing this has removed my main menu item addons.
we have a few apps where we support android from Version 6 min to 10.
Now I have a bottom Navigation bar (tabbedpage) 5 tabs and when tapping on it , the title gets cut off.
In android 9 I have implemented as recommended https://montemagno.com/control-text-size-on-android-bottom-navigation/
and works ,but it does not work on android 7 as it clearly says "android 9"
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen name="design_bottom_navigation_text_size" tools:override="true">10sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>
</resources>
Can the size of the text be changed on android 7 and how? I am using the latest xamarin.forms
You could set the font size in code behind .
in Resource-> Menu
define the tab item
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<item
android:id="#+id/action_settings_1"
android:orderInCategory="100"
android:title="111"
app:showAsAction="never" />
<item
android:id="#+id/action_settings_2"
android:orderInCategory="100"
android:title="222"
app:showAsAction="never" />
<item
android:id="#+id/action_settings_3"
android:orderInCategory="100"
android:title="333"
app:showAsAction="never" />
</menu>
in Resource-> Layout
Add the following code in content_main.xml
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/bottomNavigationView"
//... other property
app:menu="#menu/menu_main" />
in MainActivity
BottomNavigationView bottomNavigationView = FindViewById<BottomNavigationView>(Resource.Id.bottomNavigationView);
TextView textView = (TextView)bottomNavigationView.FindViewById(Resource.Id.action_settings).FindViewById(Resource.Id.largeLabel);
textView.TextSize=12;
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LeaveManagerApp.UpcomingLeavesPage"
xmlns:controls="clr- namespace:XamForms.Controls;assembly=XamForms.Controls.Calendar"
>
<Grid >
<controls:Calendar
x:Name="MyLeaveCalendar"
ShowNumberOfWeek="false"
StartDay="Sunday"
WeekdaysBackgroundColor="DarkBlue"
TitleLabelTextColor="DarkBlue"
SelectedDate="{Binding Date}"
SpecialDates="{Binding Attendances}"
DateCommand="{Binding DateChosen}"
>
</controls:Calendar>
</Grid>
How to fit calendar to screen size in xamarin form ,
i am using calendar control of xamarin form ,tried HeightRequest but its not working.
This is not a default Xamarin.Forms control, it originates from here: https://github.com/rebeccaXam/XamForms.Controls.Calendar
It looks like the control is rendered with a fixed height. Searching through the issues, I found this one: https://github.com/rebeccaXam/XamForms.Controls.Calendar/issues/54
You can influence the height of a row with this code:
yourCalendar.OnEndRenderCalendar += (sender, e) =>
{
(calendar.Content as StackLayout).Children.Last().HeightRequest = 500;
};
The only thing you need to do is determine the right height, build something yourself for it or open an issue on the repo.
You should post a full XAML code but as per Xamarin standard how to expand full view of child control. Check the below code.
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<controls:Calendar
x:Name="MyLeaveCalendar"
ShowNumberOfWeek="false"
StartDay="Sunday"
WeekdaysBackgroundColor="DarkBlue"
TitleLabelTextColor="DarkBlue"
SelectedDate="{Binding Date}"
SpecialDates="{Binding Attendances}"
DateCommand="{Binding DateChosen}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
</controls:Calendar>
</Grid>
And also it's depend on Xamarin Layout which layout you are using for XAML design. And how to use XAML extensible language in Xamarin form Please check the link.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/
I want to set a background image to my Grid in code behind. I found in internet that we can do using XAML like this.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Pages.PhotoPage">
<Grid >
<Image Source="background.png" Aspect="AspectFit" />
<!-- Place here the rest of the layout for the page. -->
</Grid >
But how can I set this in code behind. I cannot see anyImage or BackgroundImage property for Grid. Please help me.
Thanks
You can just create an empty Image element in the Grid and set it.
<Grid>
<Image x:Name="BackgroundImage" Aspect="AspectFit" />
<!-- Place here the rest of the layout for the page. -->
</Grid>
And now set it in code:
backgroundImage.Source = ...;
If you are building the whole UI in code, you can do this as well:
var myGrid = new Grid();
var backgroundImage = new Image();
backgroundImage.Source = ...;
myGrid.Children.Add( backgroundImage );
If your Grid has multiple rows and columns, you will want to set the Grid.ColumnSpan and Grid.RowSpan properties on the image to make it span the whole grid.
Please note that this question is specific to Silverlight 5. There are lots of similar questions floating around, but often they are about WPF or previous Silverlight versions. Others target Silverlight 5, but are about controls other than DataGrid. I have been unable to find an existing question that asks for exactly the same thing as this one; at least none with an answer that works for me.
Let's assume I have this really simple DataGrid (XAML and C# code further down), which is bound to a collection of a INotifyPropertyChanged type having two properties, Selected and Text:
I would like to bind each row's background color to its data item's Selected property (using some bool-to-Brush converter). The usual row states' (normal, selected, mouse over, etc.) visual effects and transitions should not be affected; that is, normal rows will be colored, alternate rows will be a little lighter, mouse-over-ed rows will be slightly darker, selected rows will be even darker than that, etc.
Some apparent solutions seen elsewhere:
I have searched for a solution for hours, and there are many similar questions floating around, but none of the answers seem to apply to Silverlight 5, or they don't work. There appear to be several approaches to this:
Override the DataGridRow control template and bind its BackgroundRectangle's Background property:
<sdk:DataGrid …>
<sdk:DataGrid.RowStyle>
<Style TargetType="sdk:DataGridRow">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
…
<Rectangle x:Name="BackgroundRectangle" …
Background="{Binding Selected, Converter={StaticResource boolToBrush}}" />
…
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</sdk:DataGrid.RowStyle>
…
</sdk:DataGrid>
This works initially, and visual states are correctly rendered (because the DataGrid visual states only affect opacity of the BackgroundRectangle; see the default control template definition for details).
The problem with this is that row background colors won't change when the bound items' Selected properties change value. It's as if the {Binding} had a Mode=OneTime.
Also, I've read that data bindings in control templates should be avoided. TemplateBindings are fine in a control template, but regular Bindings perhaps don't belong here.
Change all columns to <sdk:DataGridTemplateColumn> and use a data template:
<sdk:DataGrid …>
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn Header="Selected">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Background="{Binding Selected, Converter={StaticResource boolToBrush}}">
<CheckBox IsChecked="{Binding Selected}" />
</Grid>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
… <!-- repeat the above for each column -->
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>
…
</sdk:DataGrid>
This is even worse. The cells get the right background colors, but the data grid's various visual states are no longer properly applied. Also, each column has to be turned into a template column. And third, when the bound properties change value, the background colors are not updated.
Use Expression Blend data triggers (types from the System.Windows.Interactivity and Microsoft.Expression.Interactivity.Core namespaces). To be honest, I haven't been able to work out how this is supposed to work at all.
Question:
I really don't want to resort to imperative code-behind where I do this manually. But how can I do what I want in XAML, in a proper way that also honors the DataGridRow visual states and behavior, and updates the row background when the bound property changes?
Could someone give me a XAML example how to bind each row's background color to one of its bound item's properties in such a way?
XAML and C# code for the above data grid:
<UserControl x:Class="SomeApplication.MainView"
…
xmlns:local="clr-namespace:SomeApplication"
xmlns:sdk="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">
<!-- sample data context -->
<UserControl.DataContext>
<local:MainViewModel>
<local:MainViewModel.Things>
<local:ThingViewModel Text="A" />
<local:ThingViewModel Text="B" />
<local:ThingViewModel Text="C" />
<local:ThingViewModel Text="D" Selected="True" />
<local:ThingViewModel Text="E" />
</local:MainViewModel.Things>
</local:MainViewModel>
</UserControl.DataContext>
<Grid>
<sdk:DataGrid ItemsSource="{Binding Things}" AutoGenerateColumns="False">
<sdk:DataGrid.Columns>
<sdk:DataGridCheckBoxColumn Header="Selected" Binding="{Binding Selected}" />
<sdk:DataGridTextColumn Header="Text" Binding="{Binding Text}" />
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Grid>
</UserControl>
namespace SomeApplication
{
public interface IMainViewModel
{
ObservableCollection<ThingViewModel> Things { get; }
}
public interface IThingViewModel : INotifyPropertyChanged
{
bool Selected { get; set; }
string Text { get; set; }
}
// straightforward implementations, omitted for brevity's sake:
public partial class MainViewModel : IMainViewModel { }
public partial class ThingViewModel : IThingViewModel { }
}
One thing that appears to work is a combination of overriding the control template and putting a Expression Blend data trigger inside the BackgroundRectangle.
Start with the default control template for DataGridRow (which you can find on the MSDN page 'DataGrid Styles and Templates'). The only thing that needs to change is the <Rectangle x:Name="BackgroundRectangle">:
<!--
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:ei="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expressions.Interactions"
-->
<sdk:DataGrid …>
<sdk:DataGrid.RowStyle>
<Style TargetType="sdk:DataGridRow">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
… <!-- use DataGridRow standard control template, except for this: -->
<Rectangle x:Name="BackgroundRectangle" …
Background="{Binding Selected, Converter={StaticResource boolToBrush}}">
<i:Interaction.DataTriggers>
<ei:PropertyChangedTrigger Binding="{Binding Selected}" Value="True">
<ei:PropertyChangedTrigger.Actions>
<ei:ChangePropertyAction TargetName="BackgroundRectangle"
PropertyName="Fill"
Value="{Binding Selected, Converter={StaticResource boolToBrush}}" />
</ei:PropertyChangedTrigger.Actions>
</ei:PropertyChangedTrigger>
</i:Interaction.DataTriggers>
<Rectangle>
…
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</sdk:DataGrid.RowStyle>
…
</sdk:DataGrid>
Since a row's background rectangle is inside the control template, and that background should change with the data, it seems that it's actually unavoidable to put a data binding inside the control template.