I've been looking at Xamarin.Forms Shell. The flyout available in Shell by default allows a slide from the left side of the screen or a tap on the toolbar menu button to have the flyout appears on the left side of the screen.
I've also seen a variation of this, where the toolbar and flyout are flipped, so the toolbar button and flyout are on the right side of the screen.
My question is - I want to have multiple flyouts available on the screen. Shell works, but it APPEARS that I can only have one flyout if I use Shell (either the left or the right, but not both). Is there a way to use multiple flyouts with Shell?
Or, is there a better solution using something else?
You can use SideMenuViewPage from Xamarin.CommunityToolkit package, it is already available but not documented yet.
You may find the full sample of the code below in SideMenuViewPage.xaml
Sample
<xct:SideMenuView x:Name="SideMenuView">
<!-- MainView -->
<StackLayout BackgroundColor="Gold">
<Label Text="This is the Main view" VerticalOptions="Center" HorizontalOptions="Center"/>
</StackLayout>
<!-- LeftMenu -->
<StackLayout
xct:SideMenuView.Position="LeftMenu"
xct:SideMenuView.MenuWidthPercentage=".5"
xct:SideMenuView.MainViewScaleFactor=".95"
BackgroundColor="Orange">
<Label Text="This is the left menu view"/>
</StackLayout>
<!-- RightMenu -->
<StackLayout
xct:SideMenuView.Position="RightMenu"
xct:SideMenuView.MenuWidthPercentage=".3"
xct:SideMenuView.MenuGestureEnabled="False"
BackgroundColor="LightGreen">
<Label Text="This is the Right menu view"/>
</StackLayout>
</xct:SideMenuView>
Available properties
Property
Description
MenuWidthPercentage
Set the width percentage of your menu relative to it parent.
MainViewScaleFactor
Set the scale percentage which MainView will be scaled to when a side menu (left or right) is opened.
Position
Specifies position whether it is right or left or main, if not specified it will be considered as the MainView.
MenuGestureEnabled
Enable/Disable side swipe gesture option to open/close menu/view.
Open/close side menu views (flyout)
From code
Left and right menus/views are opened either by swiping gesture or by setting the property State of the SideMenuView that you defined in your xaml:
SideMenuView.State = SideMenuState.MainViewShown; //show main view and close both left and right menu view
SideMenuView.State = SideMenuState.RightMenuShown; //Open right menu view
SideMenuView.State = SideMenuState.LeftMenuShown; //Open left menu view
From xaml
By default left and right menus are closed (default value of State property is MainViewShown), if you want initially to have a menu opened, change it value in your xaml:
<xct:SideMenuView x:Name="SideMenuView" State="LeftMenuShown">
A mixed approach would be to bind State to a property and change it in your code according to your logic.
Note
For now it is supported for iOS and Android only (not supported for uwp).
Related
i have searchbar on top of my page.
by default it's showing in left side of input box as shown in image.
i want to put it in right side of input box
how to achieve this..?
Here is my code
<SearchBar x:Name="searchBar" HorizontalOptions="CenterAndExpand" Placeholder="Search text"/>
From your image, I think the search icon you have highlighted can only be altered using custom renderers. See
How to move search icon of search bar at right hand side in xamarin forms
But, to ignore the search icon and create your own search button beside the searchbar, you can use this:
<StackLayout Orientation="Horizontal">
<SearchBar x:Name="searchBar" HorizontalOptions="CenterAndExpand" Placeholder="Search text"/>
<Button Text="search"/>
</StackLayout>
By Default, the icon lies on the left side. If you want it on right side , you may have to use a custom search bar
I am starting with XamarinForms. I would like to create application which look line Facebook Messanger. The points is I am looking for tip how to achive bottom bar with buttons to navigate throught views.
I was trying to do it with CarouselPage but I dont see option to make static bottom bar. As I see CarouselPage can only contain collection of ContentPages
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:xxx"
x:Name="ThisPage"
x:Class="xxx">
<ContentPage>
<ContentPage.Content>
<Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
<ContentPage>
<ContentPage.Content>
<Grid>
<Label Text="Page1"></Label>
</Grid>
</ContentPage.Content>
</ContentPage>
<ContentPage>
<ContentPage.Content>
<Grid>
<Label Text="Page2"></Label>
</Grid>
</ContentPage.Content>
</ContentPage>
</CarouselPage>
I did also try to make it as it was possible in XAML - create stacklayout at the bottom with navigation buttons and create content presenter to the rest page and dymanically change his content but it did not work as expected.
Can someone give me any tip ?:)
I think you have many ways to do it. I don't use Fb Messenger (sorry) but I have an idea of what you need.
First I will remind you that a "TabbedPage" will give give you this bottom bar on iOS but will be on the top for Android...
Next, you can use a third party component. I've already seen several in the past I think (If you 'DuckDuckGo' 'xamarin forms bottom bar' for instance you should find good things. You can try this one for example that renders the bottom bar on Android pretty well (and the native bar for iOS): Github BottomNavigationBarXF.
Finally, has you mentionned it, you can try to make your own navigation bar. It should not be difficult if you have some design skills. Make your bottom bar control that accepts "navigation buttons", then change the 'ContentPresenter.Content' property (in the page that owns your bottom bar) in response of the button clicks...
Exemple of the Github project (BottomBarNavigationXF):
(Android) (iOS)
Tell me if it's what you was looking for, or mark as answered if it's ok for you !
This is the XAML code for a simple toggle button in Windows Phone 8.1.
<ToggleButton Content="Text_Here" />
How can we show an icon for the same Toggle Button??
ToggleButton has ContentPresenter inside - you can put most of things into it for example icon:
<ToggleButton>
<SymbolIcon Symbol="Message"/>
</ToggleButton>
or Image if you want:
<ToggleButton>
<Image Source="image.jpg"/>
</ToggleButton>
or any Panel, Button another ToggleButton and so on.
You can also play with its Style and Enabled/Disabled Content.
First you can try if the AppBarToggleButton fits your needs. It toggles an Icon.
Else, you have to edit the ControlTemplate for the ToggleButton. (In Designer: Right click it, got Edit Template -> Edit a Copy).
The default Template features two content presenters for enabled and disabled content, which you can replace to display your icons.
Unlike default "Back" button, I want to have "Add" button to the right side of the Hub header. Also that button should remain at its place like how header do. (so that it can be accessible from any HubSection)
Expected result:
Currently getting:
The solution is very simple. Instead of placing the button inside <Hub.HeaderTemplate> tag, place it in the Grid that contains the Hub itself.
for example,
<Grid>
<Hub>
....
</Hub>
<Button>
....
</Button>
</Grid>
How do I change a button's background image in a Metro Style app using VS 2012?
In Windows Forms, a button has a BackgroundImage property that you can set.
Is this feature available for Metro Style apps?
In Windows Forms, I can do the following in C#:
btnImage.BackgroundImage = System.Drawing.Image.FromFile("...\Pictures\flower.png");
How can you programmatically change the button's background image in Metro Style apps ?
Pretty straightforward, actually, just modify the Button's XAML to include a closing tag, and drop an image control in between, like so:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button HorizontalAlignment="Left" Margin="532,285,0,0" VerticalAlignment="Top" Height="135" Width="283">
<Image Source="Assets/Logo.png" />
</Button>
</Grid>
In the snippet above, I'm pointing the image source to the Logo.png file that is part of the built-in templates for C#/XAML apps.
Another way to do it is to open the project in Blend for Visual Studio, drag the image from the Assets tab onto the design surface (making sure you have the desired container selected in the Objects and Timeline pane), and then right-click the image and select Make into Control..., and choose the Button control.
The only downside to this technique is that you don't get the default VisualStates that the built-in Button control has. Instead, Blend defines a style for you with empty VisualStates which you can style as desired.
Hope that helps.