Is it possible to add a switch on the toolbar?
<ContentPage.ToolbarItems>
<ToolbarItem>
<Switch x:Name="Switch1" IsToggled="True" Margin="5,0,0,0"/>
</ToolbarItem>
</ContentPage.ToolbarItems>
Does anybody have any ideas?
Thanks!
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TitleViewSample"
x:Class="TitleViewSample.MainPage">
<NavigationPage.TitleView>
<Switch x:Name="Switch1" IsToggled="True" Margin="5,0,0,0"/>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout>
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
I don't think it is possible. You can, however, take the same approach I did when I needed to customise my title bar.
First, you hide the navigation bar, then you can specify your bar at the top, and use the controls you would like.
Related
I make a customize title in the titleview,
and I want to show different content(with other pages) by pressing the tabs I customize.(like pic shows below)
I am wondering how to change the content with different pages...
<ContentPage>
<NavigationPage.TitleView>
<Button x:Name="energy" />
<Button x:Name="history" />
...
</NavigationPage.TitleView>
<ContentPage.Content>
//when I press energy, and content shows the Energy.xaml
//when I press history, and content shows the History.xaml
</ContentPage.Content>
</ContentPage>
You can use TabView from XamarinCommunityToolkit package, here is a sample page you can find it in their sample repo.
<ContentPage xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
...
>
<ContentPage.Content>
<Grid>
<xct:TabView
TabStripBackgroundColor="Blue"
TabStripHeight="40"
TabIndicatorColor="Yellow"
TabContentBackgroundColor="Yellow">
<xct:TabViewItem
Text="Tab 1"
TextColor="White"
TextColorSelected="Yellow"
FontSize="12">
<--Here you define the content of Tab1 -->
</xct:TabViewItem>
<xct:TabViewItem
Text="Tab 2"
TextColor="White"
TextColorSelected="Yellow"
FontSize="12">
<--Here you define the content of Tab2 : it can be the ContentView defined in your Energy.xaml -->
</xct:TabViewItem>
</xct:TabView>
</Grid>
<ContentPage.Content>
</ContentPage>
There is plenty of stuff you can customize take a look at the official documentation.
I have a Xamarin.Forms SearchBar to search for information on a remote server. This data is displayed in a ListView below the searchbar like the following:
Pseudocode:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage ... >
<ContentPage.Content>
<StackLayout>
<SearchBar
x:Name="SearchBar"
Placeholder="Search for a business..."
HorizontalTextAlignment="Start"
SearchCommand="{Binding PerformSearch}"
SearchCommandParameter="{Binding Text, Source={x:Reference SearchBar}}">
</SearchBar>
<ListView
x:Name="SearchResults"
ItemsSource="{Binding Path=SearchResults}"
...
>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Is it possible to disable the autocomplete/autocorrect in the keyboard? I know for a Text.Entry it is possible to set IsTextPredictionEnabled to false but I don't see a way to configure a SearchBar in a similar way.
Yes, according to the SearchBar Properties, the Keyboard for the InputView is exposed. Therefore, similar to this answer, it can be achieved in the XAML by using the x:FactoryMethod attribute:
<SearchBar
x:Name="SearchBar"
Placeholder="Search for a business..."
HorizontalTextAlignment="Start"
SearchCommand="{Binding PerformSearch}"
SearchCommandParameter="{Binding Text, Source={x:Reference SearchBar}}">
<SearchBar.Keyboard>
<Keyboard x:FactoryMethod="Create">
<x:Arguments>
<KeyboardFlags>None</KeyboardFlags>
</x:Arguments>
</Keyboard>
</SearchBar.Keyboard>
</SearchBar>
Can I create a view including Entry Progress bar or others to make a view which I can use in other places?
for example I want to create a card view which I can use to list the lists.
I can only write in the list not to write the card in every list.
Yes, you can create a custom view and use it in the MainPage or other Pages, Views you want.
To create a custom view, add a new item --> ContentView,let's call it CardView:
In .cs of CardView:
public partial class CardView : ContentView
{
public CardView()
{
InitializeComponent();
}
}
In xaml of CardView, add your labels,progressbar, entry there:
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="App35.CardView">
<ContentView.Content>
<StackLayout>
<Label Text="Hello Xamarin.Forms!" />
<ProgressBar Progress="0.5" />
<Entry Placeholder="I'm entry"/>
</StackLayout>
</ContentView.Content>
</ContentView>
To use it in MainPage, in listView or in the page:
<StackLayout>
<projectName:CardView HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
<ListView x:Name="listView" RowHeight="70">
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>mono</x:String>
<x:String>monodroid</x:String>
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<projectName:CardView HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
I upload a sample here and you can check.
Yes you can do that using ContentView, if you want to use it as views
Or you can make ViewCells if you want to use it in ListViews. Its easy and almost every project does that.
You can refer this link :- https://xamarinhelp.com/xamarin-forms-user-control/
Let me know if you have more questions on this. Thanks!
I am new in Xamarin hybrid application. How to apply diagonal cut view in the image?
I have created the diagonal view from the below code.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PEMS.Views.Profile"
xmlns:xamvvm="clr-namespace:Xamvvm;assembly=Xamvvm.Forms"
xmlns:xfShapeView="clr-namespace:XFShapeView;assembly=XFShapeView"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
Title="CornersTransformation" BackgroundColor="White">
<AbsoluteLayout HorizontalOptions="FillAndExpand" BackgroundColor="White" VerticalOptions="FillAndExpand">
<ffimageloading:CachedImage
AbsoluteLayout.LayoutBounds="0,0,1,.5"
AbsoluteLayout.LayoutFlags="All"
Aspect="AspectFill"
Source="profile_background.png"
/>
<xfShapeView:ShapeView
AbsoluteLayout.LayoutBounds="1,.5,400, 1600"
AbsoluteLayout.LayoutFlags="PositionProportional"
HorizontalOptions="Center"
Rotation="-90"
ShapeType="Triangle"
WidthRequest="400"
Color="White" />
<Label
AbsoluteLayout.LayoutBounds=".6,.6,.5,.1"
AbsoluteLayout.LayoutFlags="All"
FontSize="34"
HorizontalOptions="End"
LineBreakMode="WordWrap"
Text="Some content here."
TextColor="White" />
</AbsoluteLayout>
</ContentPage>
What exactly do you mean by diagonal cut view in the image? Can you provide example or mockup?
This library is excellent for all the image transformations and caching, but since its unclear, I am not sure if it can help you.
Actually I am trying to show a Master Detail Page with Menu button on right side. I am not getting any option to present a Page modally from right to left and same dismiss also left to right. Can anyone help me on this.
You can use FlowDirection
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="RTL.MasterDetailPage"
Padding="25"
FlowDirection="RightToLeft">
<MasterDetailPage.Master>
<ContentPage Title=" ">
<StackLayout>
<Button Text="Menu item" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage>
<Label Text="My page"/>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
https://blog.xamarin.com/right-to-left-localization-xamarin-forms/
Better work around is,
Disable Navigation tool bar,
NavigationPage.SetHasNavigationBar(this, false);
Create custom tool bar with Hamburger image,
<StackLayout Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
<Image Source="hamburger" Margin="2,0,0,0" HeightRequest="35" WidthRequest="25">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ToggleMasterCommand}" CommandParameter="1"></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
<Label Text="Header text" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" VerticalOptions="CenterAndExpand" VerticalTextAlignment="Center"/>
<Image Source="notification" HeightRequest="30" WidthRequest="30">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NotificationCommand}"></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
</StackLayout>
Apply FlowDirection for each page. either Xaml or code behind through Visual Element
You can see a demo for setting Visual Element through code behind here