Please i will like to know how to achieve a click effect on a stacklayout. I have my design, i use stacklayout and tap gesture to navigate to other pages. However, when i click it feels static and i need to see a click effect.
Below is my design
I want the effect to show when i click any of these options (falut, outage etc) just like when i click on a button control.
Thanks
There are many solutions which can implement it . For example ,you could set the BackgroundColor of the StackLayout in tap directly .
private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
var stack = sender as StackLayout;
stack.BackgroundColor = Color.Black;
await Task.Delay(100); // delay 0.1s
stack.BackgroundColor = Color.LightBlue; // set it to the default color that you define in xaml
//do something you want
}
Solution 2
You could use the plugin XamEffects from nuget .
Usage
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:XamEffects.Sample"
xmlns:xe="clr-namespace:XamEffects;assembly=XamEffects"
x:Class="xxx.MainPage">
<StackLayout HorizontalOptions="Center"
VerticalOptions="Center"
HeightRequest="100"
WidthRequest="200"
xe:TouchEffect.Color="Red">
//put content of StackLayout here
</StackLayout >
</ContentPage>
Related
How do I create different methods when double-tap vs. single-tap?
How to recreate:
Take the default "New Maui App"
Add the first two code blocks from this documentation: https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/gestures/tap?view=net-maui-7.0
Then add a second function for single-tap
The MainPage.Xaml now looks like this (truncated after image part since the rest is the same):
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp2.MainPage">
<ScrollView>
<VerticalStackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Center">
<Image
Source="dotnet_bot.png"
SemanticProperties.Description="Cute dot net bot waving hi to you!"
HeightRequest="200"
HorizontalOptions="Center" >
<!--******* add gesture recognizers to default app ******-->
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapGestureRecognizerDoubleTapped"
NumberOfTapsRequired="2" />
<TapGestureRecognizer Tapped="OnTapGestureRecognizerSingleTapped"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
<!--******** end add gesture recognizers to default app *******-->
</Image>
<Label
Text="Hello, World!"
...
Then in MainPage.xaml.cs, I've added the two methods:
void OnTapGestureRecognizerDoubleTapped(object sender, TappedEventArgs args)
{
CounterBtn.Text = $"Double tapped image";
}
void OnTapGestureRecognizerSingleTapped(object sender, TappedEventArgs args)
{
CounterBtn.Text = $"Single tapped image";
}
Now, when you run and double-click/tap the image, it goes first to the single-tap method, then the double-tap method, then back to the single-tap method.
What is the best way to prevent calls to the single-tap method?
By default, the Image will respond to single taps. So single-tap method would be triggered at first tap. When the NumberOfTapsRequired property is set to greater than one, the event handler will only be executed if the taps occur within a set period of time. If the second (or subsequent) taps don't occur within that period, they're effectively ignored.
So as Jason suggested, it's better to use a single tap gesture and track if a 2nd tap is received within some time span.
based on these comments, I implemented the double-tap vs single-tap like this:
bool doubleTapped;
bool ignoreNextTap;
void OnTapGestureRecognizerDoubleTapped(object sender, TappedEventArgs args)
{
doubleTapped = true;
}
async void OnTapGestureRecognizerSingleTapped(object sender, TappedEventArgs args)
{
var delay = Task.Delay(555);
await delay;
if (ignoreNextTap)
{
ignoreNextTap = false;
return;
}
if (doubleTapped)
{
doubleTapped = false;
ignoreNextTap = true;
CounterBtn.Text = $"Double tapped image";
}
else
{
CounterBtn.Text = $"Single tapped image";
}
}
It works, but it sure seems hacky. Basically, what single tap method sleeps for half-of-a-second, to see if the doubleTapped flag will be raised. If it is, then it calls the code that should be executed for doubleTap ("CounterBtn.Text = $"Double tapped image";"). Otherwise, it calls the singleTap code ("CounterBtn.Text = $"Single tapped image";").
However, in order to prevent the second single click from registering, I put another Boolean for ignoreNextTap. I saw similar posts from other languages (How to customize singleclick to doubleclick? js) and the general approach is the same as this. I guess there is no other way to do this other than the Delay/Sleep approach to see if a second click happens. This will generally cut into the snappy-ness of the UI.
I'm new to Xamarin, so hopefully this is an easy fix. The problem is simple: I have a ScrollView containing a StackLayout, and adding new children to the StackLayout briefly causes the existing children to squish together causing a jittery visual disturbance. In the application I'm writing, children are being added to the StackLayout as the user scrolls down, so this jitter is also causing some more complicated issues with my scroll events.
The isolated issue is easy to reproduce:
<ScrollView>
<StackLayout>
<Button Clicked="Button_Clicked" Text="Click Me" HeightRequest="80"/>
<StackLayout x:Name="Column1"/>
</StackLayout>
</ScrollView>
private void Button_Clicked(object sender, EventArgs e)
{
for (int i = 0; i < 5; i++)
Column1.Children.Add(new Frame() { BackgroundColor = Xamarin.Forms.Color.Blue, HeightRequest = 100 });
}
Is there any way to create a scrollable view and add content dynamically without disrupting existing content?
Any help would be much appreciated!
It would be much more appropriate to use a view such as a CollectionView or ListView to add children to a scrolling view on the fly. They are both more efficient in terms of only loading what is visible on the screen, and already have built in logic for adding/removing children such that the layout behaves nicely.
With CollectionView/ListView you can still have children that look differently, by using a TemplatSelector.
I'm using a Frame in a Window to display content and I added navigation with
<Frame NavigationUIVisibility="Visible" Name="FrameContent" VerticalAlignment="Stretch" Margin="0,34,-0.8,0.4" Grid.RowSpan="2"/>
And in Window.xsml.cs
FrameContent.Navigate(new HomeView());
And the navigation bar looks like this:
Is there any way of changing the default look of this bar? Or is the only option to create a new one?
In my WPF app I created my own, The simplest version of it was like:
<Grid VerticalAlignment="Top" Height="50" Background="DarkGray">
<StackPanel Orientation="Horizontal">
<Button Content="Back" Click="Back_Btn"/>
<Button Content="Next" Click="Next_Btn"/>
</StackPanel>
</Grid>
In code behind:
private void Next_Btn(object sender, RoutedEventArgs e)
{
if (this.NavigationService.CanGoForward)
NavigationService.GoForward();
else
NavigationService.Navigate(new HomeView());
}
private void Back_Btn(object sender, RoutedEventArgs e)
{
if (this.NavigationService.CanGoBack)
NavigationService.GoBack();
else
NavigationService.Navigate(new HomeView());
}
If you want you can design the buttons with materialdesign package from NuGet for example.
The MVVM version of it is more complex.
There is a way to change the default look of the bar.
Have the xaml file with the frame open.
Open the document outline window.
(From the Visual Studio Toolbar: View => Other Windows => Document Outline)
In the Document Outline window right click on the frame to display a context menu.
Select from the context menu: Edit Template => Edit a Copy...
Press OK on the Create Style Resource window.
Change the contents of Window.Resources to your liking.
I'm using xamarin forms to build android app, and I use navigation page to navigate between pages. I'd like to hide the bar but keep the back button, because I have some else controls to put in the top area. I used HasNavigationBar and HasBackButton for this, but it looks the back button cannot be restored if the bar is hidden. Is there anyway to show the back button?
XAML:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CH.AdDetailPage"
NavigationPage.HasNavigationBar="True"
NavigationPage.HasBackButton="True"
NavigationPage.BackButtonTitle="Back" Title="AdDetail">
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Ad Detail Pages!" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
When HasNavigationBar=True, and HasBackButton=True:
When HasNavigationBar=True, and HasBackButton=False:
Both above works.
But when HasNavigationBar=False, and HasBackButton=True: it does not work.
Back button is a part of navigation bar. You can not show it without showing the navbar.
your only way is to create your back button and assign command with NavigationService.GoBack ...
I'm building a Xamarin.Forms app and I need to set the background of the nav bars to an image. Is this possible without creating something super custom? If not, what's the best way to go about it? Has anyone else done it already?
Here's what I need to do. Note the nav bar area with the back button, messaging icon, and "COMMENTARY" text.
Any ideas?
It's not possible with xamarin to change the navigation background image. You have to do that in native for each platform.
Android :
in Ressources/layout/Toolbar.axml remove background color and add :
android:background="#drawable/yourImage"
2. iOS
in AppDelegate.cs add :
UINavigationBar.Appearance.BarTintColor=UIColor.FromPatternImage(UIImage.FromFile("YOURIMAGE.png"));
// To change Text Colors to white here
UINavigationBar.Appearance.TintColor=UIColor.White;
// To change Title Text colors to white here
UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes() { TextColor = UIColor.White});
Images
Don't forget to put your images in different ressources folders.
Hope this help you !
You can add a background image and buttons to Navigation bar. element can be used to customise the element. You could use AbsoluteLayout to achieve what you want (button, Text ...etc)
<ContentPage 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="MobileApp.Views.PhotoUploadPage">
<NavigationPage.TitleView>
<StackLayout>
<Image Source="background_image.jpg"></Image>
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Multiple Photo Upload!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
https://forums.xamarin.com/discussion/139894/putting-an-image-on-navigation-bar