Is it possible to detect where the swipe happens in Net MAUI? - xaml

I'm writing a .Net MAUI application and am using SwipeGestureRecognizer. This is all working great. But what I can seem to find is if you can detect where the swipe occurred.
.xaml
<Grid x:Name="myGrid" >
<Grid.GestureRecognizers>
<SwipeGestureRecognizer Direction="Right" Swiped="SwipeGestureRecognizer_Swiped" />
</Grid.GestureRecognizers>
...
.xaml.cs
private void SwipeGestureRecognizer_Swiped(object sender, SwipedEventArgs e)
{
...
}
But I specifically want to detect if you swipe in from an edge, primarily so I can show a popout menu on the edge. I can see nothing in the event args (of the Swiped event that I could use to detect where the swipe happened.
Consider the image attached. How can I tell (or detect) the difference between the wholly on-screen swipe action (green) from the off-screen swipe action (red). Some location parameters would be perfect, but they don't seem to exist.
I can't see anything in the MAUI docs to suggest this is even possible
Does anyone know if there is any way to achieve this, please?
Thanks?

It's not an elegant solution but you can place an invisible BoxView on the left:
<Grid>
<BoxView
HorizontalOptions="Start"
VerticalOptions="Center"
WidthRequest="40"
Color="Transparent">
<BoxView.GestureRecognizers>
<SwipeGestureRecognizer
Direction="Right"
Swiped="SwipeGestureRecognizer_Swiped"
Threshold="25" />
</BoxView.GestureRecognizers>
</BoxView>
<!-- your content -->
<VerticalStackLayout Margin="15,0,0,0">
<Button />
<Label Text="label" />
</VerticalStackLayout>
</Grid>
I have decreased the value of Threshold because the swipable distance is small.

Related

How to disable a mouse scroll in Avalonia CalendarDatePicker?

I need to disable the mouse scroll functionality of the CalendarDatePicker. So far, I have not found anywhere how I can do this.
<CalendarDatePicker FontWeight="SemiBold" DisplayDateStart="{Binding
Source={x:Static sys:DateTime.Now}, StringFormat=dd/MMM/yyyy}"
SelectedDate="{Binding ExpiredDate}"
IsTodayHighlighted="True" BorderThickness="0"
VerticalContentAlignment="Center" HorizontalAlignment="Center" Background="Transparent"
Watermark="Выберите дату"
IsEnabled="{Binding !Status}"
Grid.Column="1"></CalendarDatePicker>
How can i do this?
I am not aware of the CalendarDatePicker property to disable mouse scroll functionality
Just about to ask the same question! My first approach was to try handling the PointerWheelChanged event, and simply using e.Handled = true; to prevent the event from being fired. For some reason I couldn't get the event to trigger, but this might work for you.
I ended up using a button with a Calender in a flyout, which worked nicely.
<Button Content="{Binding Date, StringFormat='\{0:d\}'}">
<Button.Flyout>
<Flyout>
<Calendar SelectedDate="{Binding Date}"></Calendar>
</Flyout>
</Button.Flyout>
</Button>

Maui framework doesn't display sliders correctly

I have been dipping my toes in the .NET Maui framework, but unfortunately so far it has been quite disappointing. There seem to be multiple errors related to Shell (title view not working properly) and controls themselves. I have the following main page xaml file:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp1.MainPage">
<StackLayout Background="#111111" >
<Frame HasShadow="True" Margin="10" CornerRadius="10" BackgroundColor="#222222">
<StackLayout Spacing="30">
<Grid ColumnDefinitions="30,*">
<Label Text="R" FontSize="Medium" TextColor="White" />
<Slider GridLayout.Column="1" MinimumTrackColor="Red" ThumbColor="Red" MaximumTrackColor="#AAAAAA" />
</Grid>
<Grid ColumnDefinitions="30,*">
<Label Text="G" FontSize="Medium" TextColor="White" />
<Slider GridLayout.Column="1" MinimumTrackColor="#7FFF00" ThumbColor="#7FFF00" MaximumTrackColor="#AAAAAA" />
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</ContentPage>
which is just a stack layout with a single frame that houses two sliders with labels. However, the two sliders seem to have a predefined width, as they are not filling the remaining space:
As soon as I add anything to any of the controls in the xaml while the app is running, for example a green background to the first grid, both sliders resize to the correct size:
However, when I reload the application with this change, the sliders go back to the wrong size:
There are additional issues that I encountered as well, when placing this content page as a flyout item in the shell where android behaviour was as described here, but additionally the Sliders are not interactable in Windows version. In this example with a clean project they do work in Windows version.
Try with any third-party packages like syncfusion, etc. to meet your requirements.

How to resize NavigationView and SplitView in UWP

I want to enable user to resize the NavigationView in my UWP app. Couldn't find any resources how I could do that.
I see some of the apps have "Resizable splitView" but for SplitView also, I cannot see any such resize property exposed to set by default.
Pls help.
Thanks in Advance
There are no such property can resize SplitView and NavigationView, you need to custom layout to implement a similar effect. You could use Slider control and bind the OpenPaneLength Property of SplitView to Slider.Value to do this. Please refer to the following code.
<Grid>
<SplitView Name="CoreSplitView"
DisplayMode="Inline"
IsPaneOpen="True"
OpenPaneLength="{Binding Value, ElementName=MasterSlider, Mode=OneWay}">
<SplitView.Pane>
<Grid Name="PaneGrid" Background="Gray">
<Slider Name="MasterSlider"
MinWidth="480"
VerticalAlignment="Stretch"
Maximum="480"
Minimum="10"
Opacity="0"
Value="150"
/>
<StackPanel Name="PaneStackPanel"
Margin="0,0,10,0" Background="LightGray">
<TextBlock TextWrapping="Wrap" Text="Use a slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).A slider is a good choice when you know that users think of the value as a relative quantity" />
</StackPanel>
</Grid>
</SplitView.Pane>
<Grid Name="ContentGrid" Background="LightSteelBlue">
</Grid>
</SplitView>
</Grid>
The StackPanel that is directly under our slider, acts like a cover for our Slider. Notice the StackPanel has Margin="0,0,10,0", this translates to a 10px distance from the right wall, which allows the Slider area to be exposed as a gray strip that is used to drag the Pane, again the 10px is arbitrary but it has to match the Minimum of the Slider.

Buttons in an AbsoluteLayout overlap other objects on Android

So I have an odd thing happening with last Xamarin update and I am not sure what to do about it.
I have a view
<ContentView.Content>
<AbsoluteLayout WidthRequest="100" HeightRequest="100">
<Button x:Name="BackgroundButton" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
<Image x:Name="Icon" InputTransparent="True" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Margin="20,15,20,25"/>
<Label x:Name="CountLabel" Style="{StaticResource HubButtonLabel}" HorizontalTextAlignment="End" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
<Label x:Name="ButtonLabel" Style="{StaticResource HubButtonLabel}" HorizontalTextAlignment="Center" VerticalTextAlignment="End" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
</AbsoluteLayout>
</ContentView.Content>
</ContentView>
Is basically just a button wrapper, with some extra icons, and text. I have a few of these in the project of different layouts and styles. Until the last update they worked fine. Now the button renders overtop of everything else. I can confirm that by setting the button color to something semi transparent.
This only happens on Android, it still works as expected on ios
Anyone have a fix for that? or do I need to rework all these views?
Update - So while this isn't really a fix, but also kind of is. If I swap out the Button for an ImageButton - they work again as expected on both platforms.
Bug perhaps with button on Android?
Got an answer on another forum. - Apparently it is a known bug with an easy fix, https://forums.xamarin.com/discussion/comment/394729
Put
global::Xamarin.Forms.Forms.SetFlags("UseLegacyRenderers");
Before the xamarin init in Main Activity Oncreate.

Add Map to Master detail Page returns Exception

i am using xamarin forms(PCL) and execute the App using Windows phone emulator
i created a master detail page
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<StackLayout Orientation="Vertical">
<Button Text="buttonOne"/>
<Button Text="ButtonTwo"/>
<Button Text="ButtonThree"/>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:MasterPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
the details page is
<StackLayout>
<Label Text="Hello World"/>
<StackLayout>
<maps:Map WidthRequest="320" HeightRequest="200" />
</StackLayout>
</StackLayout>
it stops at
#if DEBUG && !DISABLE_XAML_GENERATED_BREAK_ON_UNHANDLED_EXCEPTION
UnhandledException += (sender, e) =>
{
if (global::System.Diagnostics.Debugger.IsAttached)
global::System.Diagnostics.Debugger.Break();
};
#endif
and return this exception( Native View = Unable to evaluate the expression. Operation not supported. Unknown error: 0x80070057.)
Note:
if i remove the WidthRequest and HeightRequest of the map it works
but the map would not appear.
And this Exception Takes place only when navigate to the master
detail page.
So this resolves to not being a problem with the Maps part specifically but an issue with Navigating to Master Detail pages, since PushModalAsync(...) puts the Master Detail Page on top of a new Navigation stack instead of pushing it onto the top of the current Navigation stack which is what PushAsync(...) does.
Here's a link to a Xamarin Forms Forum question that appears to have the same problem:
https://forums.xamarin.com/discussion/21461/navigation-pushasync-not-working
Apparently MasterDetail pages do not like being navigated to, and both Android and iOS prefer to have it as the root page. That isn't to say this is impossible to do, I believe it just has to be done a little differently. Some dependecy injection/custom rendering might help here.
I found this Xamarin Forms article very useful when learning about Navigation, might help you out as well:
https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/hierarchical/