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>
Related
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).
I've got a simple page set up:
<Page ...stuff goes here...>
<Hub>
<Hub.Header>
<views:HubHeaderView />
</Hub.Header>
<HubSection x:Name="PrimaryViewSection">
<DataTemplate>
<views:PrimaryHubView />
</DataTemplate>
</HubSection>
</Hub>
</Page>
Every time I navigate to this page, on first view and when I hit the back button after further navigation, I always get the turnstile animation. It looks really ugly since the Hub control is so wide. The problem is, I've tried clearing all the Transitions and ChildrenTransitions that I can find, and none of them seem to be the right one. What do I have to do to make the Hub not animate like this?
I have a simple xaml page with one TextBox and a RichTextBlock.
Inside that RichTextBlock there are some InlineUIContainers.
But when the user presses a button, I remove through code an InlineUIContainer. This goes well, but each time this is done, the TextBox that is on the page get's focus!
Resulting in the touch keyboard popping up. Anyone an idea why this is happening? Or how I can prevent this?
I can't set the IsTabStop, because the user still has to be able to fill something in if needed.
I'm working on the Windows Phone part of a WinRT Universal app
Some code, but the actual removal is done in the Attached Dependency Property
It's the KeywordsInput textbox that get's the focus after each removal
<TextBox x:Uid="Search_KeywordsInput" x:Name="SearchKeywordsInput"
Text="{Binding KeywordsInput, Mode=TwoWay}" />
<RichTextBlock Grid.Row="4"
Margin="0,9.5,0,0"
IsTextSelectionEnabled="False"
dependencyProperties:RichTextBlockTagCloud.Command="{Binding SelectedTagFilterCommand}"
dependencyProperties:RichTextBlockTagCloud.TagItems="{Binding SelectedFilters, Mode=TwoWay}">
<Paragraph x:Name="TagsFilters" />
foreach (InlineUIContainer container in buttonsToRemove)
tagParagraph.Inlines.Remove(container);
Have you try to set IsTabStop=False on Button, so clicking button doesn't steal RichTextBox focus.
If you remove the focused control then the focus will move to a valid control. In this case, the next control found is your TextBox. If you park the focus on a benign (non-text) control before removing the focussed button then the keyboard won't trigger.
Depending on your overall layout you may be able to set the focus to the page, you may have another button which would make sense, or you could add a non-editable control to the tab order.
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.
So I got a normal AppBar to work in a C# metro app, but the problem is I need the app to display an html page. I create a WebView that takes up 100% of the width and height of the page, and by doing so, the AppBar doesn't show up anymore on right clicks and edge swipes. Is there a way for the AppBar to work with such a WebView in place?
--Resolved--
What I ended up doing was adding a 1px border around the WebView so that swipes could be detected. Since what I included in my WebView dynamically changes with time, WebViewBrush didn't work out for me. Instead I just shrunk the size of the WebView when the AppBar is opened and then expanded it when it was closed.
Not trying to steal Filip's answer, but I think a few more details are necessary to fully answer the question.
Even with a WebView running full-screen, the AppBar tries to show itself when you right-click or swipe. You can prove this by subscribing to the AppBar.Opened event. What's interesting is that the AppBar appears to somehow know it's obscured and automatically closes itself. Even if it didn't close itself, you wouldn't be able to see it because it's obscured under the WebView.
Filip had the right idea about hiding the WebView and using WebViewBrush while the AppBar is open. You can find a good example of doing that here:
http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webviewbrush.aspx
As for when to swap between WebView and WebViewBrush, I'd simply do it on AppBar.Opened and reverse it on AppBar.Closed. AppBar is light dismiss, meaning as soon as you tap anywhere outside of it's client area it will close.
One last word of advice: In my testing it seemed that the swipe gesture was getting swallowed sometimes. That problem seemed to go away when I put a 1 pixel boarder on top and bottom of the WebView. Your mileage may vary.
You need to hide the WebView while displaying XAML UI on top of it and use the WebViewBrush instead.
As suggested above, the 1px border can help with ensuring the top/bottom swipe is honored for the AppBar. However, similar to #matthieu I was still having issues getting the AppBar to open reliably when using the mouse and right-click method.
The issue was that I included the XAML element as a peer to the WebView, rather than as a parent as the MSDN reference for AppBar.Closed suggests:
<Border BorderBrush="Gray" BorderThickness="2" Margin="100,20,100,20">
<Grid>
<WebView x:Name="contentView" Source="http://www.contoso.com"/>
<Rectangle x:Name="contentViewRect"/>
</Grid>
</Border>
If I apply the border this way, the AppBar also reliably opens with the mouse.
One last thing to note is that using a BorderBrush="Transparent" works fine as well, so you don't have to actually see the ugly border. My final XAML was something like:
<Border BorderThickness="0,1,0,1" BorderBrush="Transparent">
<Grid>
<WebView x:Name="WebView"></WebView>
<Rectangle x:Name="RectWebViewBrush"></Rectangle>
</Grid>
</Border>