Wizad like control in xamarin form - xamarin

Hi I am newbie to xamarin.form where I have to include following control as bellow something like wizard to get collection of steps from user to do a operation.
In xamarin forms are there anything like this as out of the box ? if so what it is ? if there is not such a thing how to start to build it ?
When I google that
System.Web.UI.WebControls.Wizard
say it has something like this but I could not understand how to integrate with it.does it possible to do with this.

That looks a lot like a carouselview with indicators, if you don't know how to add indicators to a carouselview: http://chrisriesgo.com/xamarin-forms-carousel-view-recipe/ here is a guide.

Just use a Frame:
<StackLayout>
<Frame x:Name="Step001">
<Label Text="My Stuff" />
</Frame>
<Frame x:Name="Step002">
<Label Text="My Stuff" />
</Frame>
</StackLayout>
private void setupStep001(bool isVisibleStep){
Step001.IsVisible = isVisibleStep;
Step002.IsVisible = !isVisibleStep;
}

Related

Change ToolbarItem Text/Icon parameters

I am new to MAUI. And I haven't done anything complex with Xamarin as well.
The application I am testing with, has Shell navigation. And I can't find a way to change the toolbar items.
I would like to be able to change either the FontSize of the text, or the color of the SVG image. And I do not want those changes to affect the rest of my application, if possible. But if there is no other way, I can live with it.
I have managed to add styling to buttons, Labels etc... If styling is an option to this, it will be even better.
If I am on the wrong path, if you point me out why, I will be also grateful.
Thank you in advance!
If you want to just change a part of pages in your project. You can try to use a <Shell.TitleView> instead of the <Shell.ToolBarItem> in the content pages you want. Such as:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppTest.MainPage">
<Shell.TitleView>
<HorizontalStackLayout Margin="5" HorizontalOptions="End">
<Label Text="hello" TextColor="Red" FontSize="Medium" VerticalOptions="Center" HorizontalOptions="End" />
<Image Source="your image" Margin="10" Background="green"/>
</HorizontalStackLayout>
</Shell.TitleView>
You can change style of TabBar in Style.xaml in path \Resources\Style\. Search in file for Shell.TabBarForegroundColor. You will get TargetType="Shell" and this is style for AppShell.xaml.

Flyout in Xamarin Forms

I am trying to implement Flyout in Xamarin forms. All the references that I have got are of shell.Flyout but none of them are fulfilling my requirements.
I am showing some data in a ListView and on the click of any perticular item I want the Flyout to open as shown in the mockup.
Please suggest any supporting library or control in Xamarin.
You can try and add it for each item then control the IsVisible attribute
something like this in your Listview item template
<FlexLayout Direction="Row" HorizontalOptions="CenterAndExpand">
<StackLayout FlexLayout.Basis="40%">
<Label Text="Item"
HorizontalTextAlignment="Center"/>
</StackLayout>
<StackLayout FlexLayout.Grow="1" Padding="5">
<Frame IsVisible="True">
<!--Your Flyout here-->
</Frame>
</StackLayout>
</FlexLayout>
But that means you have to manage them in the back code your self
changing the IsVisible attribute on the Flyout when an item of the list is clicked

What's the purposed of <Frame.Content> in a Xamarin Forms application?

I have some code that looks like this:
    
<Frame CornerRadius="20" >
<Frame.Content>
    <Grid x:Name="detailRowArea" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
       <xaml:CardWordsFourRowsPlus IsVisible="{Binding FourRowsPlus}" />
         <xaml:CardWordsFourRows IsVisible="{Binding FourRows}" />
         <xaml:CardWordsThreeRows IsVisible="{Binding ThreeRows}" />
         <xaml:CardWordsTwoRows IsVisible="{Binding TwoRows}" />
      </Grid>
   </Frame.Content>
</Frame>
I just now noticed that the developer had used Frame.Content
Can anyone tell me why this is used?  The code seems to work without it so I am wondering what advantage it offers.
There really isn't any advantage other than I guess readability, but the Content tags really aren't needed. The Forms control in xaml will assume that any content that appears between the start and end tags is assumed to be assigned to the Content property.
If you want a more detailed explanation you can check out the Content Properties section in the docs.
If you want to not use the <Frame.Content> tag that is fine, bear in mind that Frame descends from ContentView thus you would ideally define the content of this view in the Content tag. This is more of a semantic decision as opposed to performative decision.
This being said, you would need to use the content tag if you wanted to implement any kind of OnPlatform code in your frame. For example (hand coded, could be wrong)
<Frame>
<Frame.CornerRadius>
<OnPlatform x:TypeArguments="x:Single">
<On Platform="iOS">50</On>
<On Platform="Android">75</On>
</OnPlatform>
</Frame.CornerRadius>
<Frame.Content>
<Label Text="Hello World"/>
</Frame.Content>
</Frame>

Xamarin Forms Search Bar padding

I am using the built in searchbar control in xamarin forms. It works fine for my implementation but I notice there is a small amount of whitespace on each side of the control. I see that i can modify margin to 0 but it does not change the whitespace. Here is what it looks like with a picker above it and a map below it:
Here is my xaml
<Picker x:Name="servicePicker" Title="Test" ios:Picker.UpdateMode="Immediately" HorizontalOptions="FillAndExpand">
</Picker>
<SearchBar Margin="0" Placeholder="Enter a zip code" TextChanged="Handle_TextChanged"></SearchBar>
<maps:Map Margin="0"
x:Name="MyMap"
IsShowingUser="true"
MapType="Hybrid"
/>
</StackLayout>
I dont see any option for padding, how can i get rid of the whitespace?
Maybe try setting your stacklayout spacing to zero?
<StackLayout Spacing="0">
...
</StackLayout>

Loader image in xamarin.forms?

How to display loader image. If service is hitting, I want to display loader image in background in Xamarin.Forms.
Xamarin.Forms has an ActivityIndicator: http://iosapi.xamarin.com/index.aspx?link=T%3AXamarin.Forms.ActivityIndicator
You'll probably find various code examples on how to use it.
If the core problem is how to load something in the background while displaying any "loading" indicator, you might look into this example: http://xforms-kickstarter.com/#asynchronous-web-requests
Use Xamarin.Forms' ActivityIndicator. Click here for details please.
This is how I use it, you just need to create a new property in your view model and call it as IsLoading, if this is set to true, then Activity Indicator will be visible, that is all you need;
// IsLoading property in the viewmodel
public bool IsLoading
{
get
{
return isLoading;
}
set
{
isLoading = value;
OnPropertyChanged();
}
}
//code sample in xaml
<Grid Grid.Row="1"
IsVisible="{Binding IsLoading}"
BackgroundColor="Black"
Opacity="0.25">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<ActivityIndicator Grid.Row="0"
IsVisible="{Binding IsLoading}"
IsRunning="{Binding IsLoading}"
VerticalOptions="End"
HorizontalOptions="Center"/>
<Label Grid.Row="1"
Text="Please wait..."
TextColor="White"
VerticalOptions="Start"
HorizontalOptions="Center"/>
</Grid>
Your Question is not very clear,
I guess you just mean you want to notify the user with a loading animation, while a task running in the background is taking some time?
Check http://developer.xamarin.com/recipes/ios/standard_controls/popovers/display_a_loading_message/
for a quick and easy way to implement that. The code there is quite editable so you can adapt it for your needs.
For a cross platform solution (Xamarin.Forms), you might want to look at:
Xamarin Forms show blocking loading message
For implementation of Loader or ActivityIndicator, Xamarin has provided pretty good components for iOS and android. i.e. btprogresshud for iOS and Andhud for Android. These components can be used through Xamarin.Forms.

Resources