I have two nested StackLayouts:
<StackLayout>
<StackLayout>
</StackLayout>
</StackLayout>
I would like to add click event on outer StackLayout that will not be triggered when inner StackLayout is clicked. Is it possible in Xamarin Forms? If I can filter click event (with if block) I would also be happy.
I think you can take a look to Rg Plugin popup.
it has this property
CloseWhenBackgroundIsClicked: Close pop-up when click on the background
You can add what you want to this popup because you can add a ContentPage
// Use these methods in PopupNavigation globally or Navigation in your pages
// Open new PopupPage
Task PushAsync(PopupPage page, bool animate = true) // Navigation.PushPopupAsync
// Hide last PopupPage
Task PopAsync(bool animate = true) // Navigation.PopPopupAsync
// Hide all PopupPage with animations
Task PopAllAsync(bool animate = true) // Navigation.PopAllPopupAsync
// Remove one popup page in stack
Task RemovePageAsync(PopupPage page, bool animate = true) // Navigation.RemovePopupPageAsync
Related
.net maui app.
Dragging value element along the slider bar does not work if the the slider put into CarouselView's template like this:
<CarouselView ItemsSource="{Binding Items}">
<CarouselView.ItemTemplate>
<DataTemplate>
<Slider Minimum="0" Maximum="30" WidthRequest="200" />
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
CarouselView takes over the swipe event for scrolling through the items, and Slider does not get the event (DragStarted is not even called). You can actually click along the slider bar to change its value, so it's not completely frozen, but not how it's supposed to work. Drag & drop is main way user deal with slider control.
Could anyone advise any workaround? I want users to be able scroll through carousel view items also. It's just if they swipe inside the control, event should not handed over to its parent container, if it's possible to do so.
If I add it outside of the corouselview, combine both in Grid and use padding to align slider inside the corouselview, it works as expected, but I need to add lots of additional code, calculate the desirable location and redirect all bindings, which ends up to be an awkward workaround.
At first, I don't suggest you use the slider in the CarouselView. Becasue you want the same behavior has two effects. There is a conflict between them.
But for the android, you can use the custom handler to deal with the swipe event.
Put the Handler class in the /Platform/Android:
public class MySliderHander : SliderHandler
{
protected override void ConnectHandler(SeekBar platformView)
{
base.ConnectHandler(platformView);
platformView.SetOnTouchListener(new SliderListener());
// the listener will make the slider deal with the swip event not the CarouselView.
}
}
Put the SliderListener class in the /Platform/Android
public class SliderListener : Java.Lang.Object, IOnTouchListener
{
public bool OnTouch(global::Android.Views.View v, MotionEvent e)
{
if (e.Action == MotionEventActions.Down || e.Action == MotionEventActions.Move)
{
v.Parent.RequestDisallowInterceptTouchEvent(true);
}
else
{
v.Parent.RequestDisallowInterceptTouchEvent(false);
}
return false;
}
}
And in the MauiProgram.cs:
builder
.UseMauiApp<App>()
.ConfigureMauiHandlers(handlers => {
#if ANDROID
handlers.AddHandler(typeof(Slider), typeof(YourProjectName.Platforms.Android.MySliderHander));
#endif
})
In addition, the Slider's height is same as the CarouselView. So you can use a frame to contain the Slider and swipe the CarouselView by swiping the frame.
I have a CarouselView in which I call an object with individual and completely different Views.
The only elements my ContentPage has, are the CarouselView itself, and a bottombar with a gradient above it (notice gradient in following image).
I have done this in a way in which this gradient dissapears when the page's scrolling space becomes 0 (when I have scrolled to the end of the page).
The problem is that when I swipe between items in the CarouselView, the CarouselView always maintains the height of the very first View that is called in.
This means that, in a View with MORE height than the 1st one, when scrolling up (after being at the very bottom, and therefore not showing a gradient) the gradient will only show again once it hits the height value of the 1st page.
In a View with LESS height than the 1st one, the page will allow me to scroll down until I reach the height value of the 1st page, even if there are not enough elements on the page to even need a scroll.
Essentially, what I am asking for, is if there is a way in which I can, in some way, "refresh" the height of the Page every time a scroll is complete to another View in the CarouselView, resolving my height issues in smaller views, and my gradient issues in larger views.
Main ContentPage Code Behind (Gradient)
public double ScrollingSpace
{
get
{
return MainScrollView.ContentSize.Height - MainScrollView.Height;
}
set { }
}
// Removes gradient when scroll is complete
private void OnScrolled(object sender, ScrolledEventArgs e)
{
if (ScrollingSpace <= e.ScrollY) // Touched bottom
EndPageGradient.SetValue(IsVisibleProperty, false); // the view is GONE, not invisible
else
EndPageGradient.SetValue(IsVisibleProperty, true);
}
// Removes gradient if page is not large enough to need scroll
protected override void OnAppearing()
{
if (ScrollingSpace <= 0)
EndPageGradient.SetValue(IsVisibleProperty, false); // the view is GONE, not invisible
}
Main ContentPage CarouselView XAML
<CarouselView
ItemsSource="{Binding ViewList}"
Loop="False">
<CarouselView.ItemTemplate>
<DataTemplate>
<ContentView Content="{Binding .}" />
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Main ContentPage ViewModel (List with Views for CarouselView)
ViewList = new List<ContentView>()
{
new Step1(),
new Step2(),
new Step3(),
new Step4(),
new Step5(),
new Step6(),
new Step7(),
new Step8()
};
Thanks in advance!
It seems as though hiding the FlyoutFooter with IsVisible doesn't cause the scrollview for the Flyout Items to resize to take up the unused space.
Example:
Footer declaration in .xaml:
<Shell.FlyoutFooter>
<StackLayout Spacing="0" BackgroundColor="Pink" HeightRequest="200">
<Button x:Name="btnCloseTip"
Text="X"
Clicked="btnCloseTip_Clicked"/>
</StackLayout>
</Shell.FlyoutFooter>
Click handler:
private void btnCloseTip_Clicked(object sender, EventArgs e)
{
var footer = (StackLayout)this.FlyoutFooter;
footer.IsVisible = false;
}
This hides the pink footer, however the space reserved for the footer is not reallocated to the scrollview that contains the items, leaving a 200 unit high empty space below the scrollable list of flyout items. Is there any way to force the flyout menu to redraw/resize after hiding? I have tried setting the layout bounds to a 0,0,0,0 rectangle as well, which also had the same (no-)effect.
I am working on a Xamarin.forms project which has a ScrollView with a child of a StackLayout, whose child is a Label.
<ScrollView Grid.Row="0" Grid.Column="0"
x:Name="MessageScroll" BackgroundColor="Gainsboro">
<StackLayout BackgroundColor="Beige" Margin="2"
x:Name="MessageStack" Spacing="0">
<Label Text="Messages"/>
</StackLayout>
</ScrollView>
I want this to be a message window.
I will add onto this StackLayout new labels with messages.
I made a label with a new message(e.Message), added it onto Stacklayout, and then, scroll down the ScrollView show the last added label at the bottom of the ScollView.
Label newLabel = new Label();
newLabel.Text = e.Message;
MessageStack.Children.Add(newLabel);
await MessageScroll.ScrollToAsync(newLabel, ScrollToPosition.End, false);
the problem is ScrollToAsync doesn't ensure the last added label to be at the bottom when I added multiple message labels consecutively in a short period of time.
It seems because each call of ScrollToAsync is executed asynchronously so the last call for it wouldn't complete last.
How can I make this to work as what I want?
If you await the ScrollToAsync it will wait for scroll action to be completed. Anyway, here is a solution to scroll to bottom, you can give it a try.
async Task AddLabel(MessageEventArgs e)
{
Label newLabel = new Label();
newLabel.Text = e.Message;
MessageStack.Children.Add(newLabel);
await MessageScroll.ScrollToAsync(0, MessageStack.Height, false);
}
I'm struggling to create the UI I have in my head and to date have been fairly unsuccessful.
I'm trying to create a Main Page which hosts my NavView and inside of by NavView I wish to have a command bar which will control which NavViewItems are visible. I have created a quick image of what I'm trying to achieve.
In my example I have the home button in the command bar activated which displays
Nav Item Header
Navigation Item 1
etc...
I want to be able to click documents and have the indicator switch to documents and hide the navigation items corresponding to Home and show the navigation items corresponding to Documents.
Finally, I want the command bar to collapse when the NavView pane is compact but the user should be able to click the Command bar button and expand the command bar to change between Home, Documents etc.
Really looking for any help/advice for the best places to start.
I'm still learning the UWP controls and Xaml.
I think you should use a SplitView instead of NavigationView outside, and then,
inside the Pane of the Splitview, use a NavigationView with some trick to achieve what you desired.
Key points are:
Keep the NavigationView's PaneDisplayMode LeftComact
don't use the PaneToggleButton in the NavigationView to prevent
user from changing PaneDisplayMode by clicking it, use a custom one instead to open and close pane.
Change the PaneDisplayMode of the NavigationView to Top when
pane opens, and backt to LeftComact again when pane closes.
Here is what I have achieved with NavigationView inside Splitview.Pane:
You can decorate it and make it more visually satisfying, like adding an AutoSuggestBox or Setting button, but that's the basic. Btw, don't use the NavigationView's Setting button, as I have seen it behaving strangely here.
XAML:
<SplitView
x:Name="Split"
DisplayMode="CompactInline"
CompactPaneLength="40">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Button
Click="Button_Click">
<SymbolIcon Symbol="List"/>
</Button>
<NavigationView
Grid.Row="1"
x:Name="NavView"
PaneDisplayMode="LeftCompact"
CompactPaneLength="{x:Bind Split.CompactPaneLength}"
IsBackButtonVisible="Collapsed"
IsPaneToggleButtonVisible="False"
IsSettingsVisible="False"
SelectionChanged="NavView_SelectionChanged">
<NavigationView.MenuItems>
<NavigationViewItem x:Name="HomeItem" Icon="Home" VerticalAlignment="Stretch"/>
<NavigationViewItem x:Name="DocumentItem" Icon="Document" />
<NavigationViewItem x:Name="PeopleItem" Icon="People" />
</NavigationView.MenuItems>
<ContentControl>
<ListView
x:Name="ItemList"/>
</ContentControl>
</NavigationView>
</Grid>
</SplitView.Pane>
</SplitView>
Code behind:
public sealed partial class MainPage : Page
{
public List<string> HomeItemList;
public List<string> DocumentItemList;
public List<string> PeopleItemList;
public MainPage()
{
InitializeComponent();
HomeItemList = new List<string> { "HomeItem1", "HomeItem2", "HomeItem3" };
DocumentItemList = new List<string> { "DocumentItem1", "DocumentItem2", "DocumentItem3" };
PeopleItemList = new List<string> { "PeopleItem1", "PeopleItem2", "PeopleItem3" };
}
private void Button_Click(object sender, RoutedEventArgs e)
{
Split.IsPaneOpen = !Split.IsPaneOpen;
if (Split.IsPaneOpen)
{
NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.Top;
}
else NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.LeftCompact;
}
private void NavView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
{
if (args.SelectedItem != null)
{
Split.IsPaneOpen = true;
NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.Top;
if (sender.SelectedItem == HomeItem)
ItemList.ItemsSource = HomeItemList;
else if(sender.SelectedItem == DocumentItem)
ItemList.ItemsSource = DocumentItemList;
else if(sender.SelectedItem == PeopleItem)
ItemList.ItemsSource = PeopleItemList;
}
}
}
Hope that helps.
First thing is to decide if you want to use NavigationView. In XAML controls are defined by their behavior (properties and methods that they implement), while the visual appearance is irrelevant and can be altered completely. If NavigationView is right for your task then you can alter its style partially or completely - in XAML editor right click on it, then click Edit Template > Edit a Copy. Now you'll get the XAML style definition that defines appearance of NavigationView, that's the place to start.
But it might be very well that you can't use NavigationView and that starting with SplitView might be a better idea as #Muzib said.
Not sure if this is a good idea for learning XAML, but you'll learn one thing - XAML can be customized to the great extent, but doing it may also be a very complex task.
I think there are a few problems from the UX perspective.
Not all the navigation items are shown at once and a used must expand the menu to change between the sets of items.
The positions of the navigation items changes when the navigation pane is expanded. Currently the way the control works it is though the pane is expanding to show the text of the button. With your suggested approach it would like the items jump down on open.
I wonder if would be easier to have a fixed side pane with the controls laid out like you want and no hamburger button etc. This is not so unusual, the Settings app does it.
If you do go with a fixed width pane, I recommend looking at the XAML that defines the NavigationView control, which can be found inside C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.17763.0\Generic\generic.xaml
(according to the version of your SDK). Then you can make sure to use the theme resources used by the Windows so that your custom control has a similar look and feel.