I'm starting to learn UWP and I've successfully loaded pages and navigated between them using the SHELLPAGE as my MASTER with a NAVIGATIONVIEW in it. I do however have a case where I need to load a single page, but I need to HIDE the NAVIGATIONVIEW when that one page is loaded. Any ideas?
If you want to hide the NavigationView on other page, you could try to set the OpenPaneLength as 0 and hide its backbutton and PaneToggleButton. When you back, you can reset OpenPaneLength and display the buttons. For example:
NavigationViewControl.OpenPaneLength = 0;
NavigationViewControl.IsBackButtonVisible = NavigationViewBackButtonVisible.Collapsed;
NavigationViewControl.IsPaneToggleButtonVisible = false;
Or, the NavigationView was displayed in the ShellPage's Frame and it contained a Frame that used to display pages. If you want to display a single page and hide NavigationView, you can also display the single page in the Root Frame. For example:
.xaml:
<NavigationView x:Name="NavigationViewControl" SelectionChanged="NavigationViewControl_SelectionChanged" >
<NavigationView.MenuItems>
<NavigationViewItem Content="Normal Page" Tag="NormalPage" />
<NavigationViewItemSeparator/>
<NavigationViewItem Content="Hide Navi Page" Tag="SinglePage" />
</NavigationView.MenuItems>
<Frame x:Name="contentFrame"/>
</NavigationView>
.cs:
private void NavigationViewControl_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
{
var selectedItem = (NavigationViewItem)args.SelectedItem;
if ((string)selectedItem.Tag == "SinglePage")
{
this.Frame.Navigate(typeof(SinglePage));
}
else
{
contentFrame.Navigate(typeof(NormalPage));
}
}
Here is a sample you can refer to it.
Related
I have a list with a ForEach loop for items. I would like to place a button on the side of the list that would pull the list to the top if the list is not currently at the top.
The key is that the button should only be visible if the list is currently not at the top position, therefore, I need some way to get the position of the list or track the top element in ForEach loop to know when it is in view to trigger the show button event.
I believe the following gives the behaviour you are looking for. Note that I took the liberty of disabling the "Scroll to Top" button, rather than hiding it, because the hiding causes layout changes that are troublesome.
The gist of it is to use GeometryReaders to compare the top of the list (in the global coordinate system) to the bottom of the first list entry (in the same coordinate system) and enable the button when the list entry is entirely above the top of the list.
The line of the form let _ = { ... }() allows us to inject some code into the declarative code structure SwiftUI uses.
The listProxy.scrollTo(1) call will cause the list to scroll to the position that makes the list item marked with .id(1).
struct ScrollButtonTest: View {
#State private var listTop: CGFloat = 0.0
#State private var firstRowBottom: CGFloat = 0.0
var body: some View {
VStack {
ScrollViewReader { listProxy in
Text("listTop: \(listTop)")
Text("firstRowBottom: \(firstRowBottom)")
Button("Scroll to Top") {
listProxy.scrollTo(1)
}.disabled(listTop < firstRowBottom )
GeometryReader { outerGP in
List {
// We set up the first item manually so that
// we can wrap it in a GeometryReader
GeometryReader { innerGP in
let _ = {
listTop = outerGP.frame(in: .global).origin.y
firstRowBottom = innerGP.frame(in: .global).origin.y + innerGP.frame(in: .global).height
}()
Text("Item 1")
}.id(1)
ForEach(2..<99) { index in
Text("Item \(index)").id(index)
}
}
}
}
}
}
}
So I have two struct views located in different files. The first view is like a home screen. The second view is like a chat dialogue box. There is a button on the first home screen view that when it gets clicked I want the chat box view to appear on top of the home screen view.
Pictures:
Home screen view + Issue discussion button that when clicked it will open chat box view
Issue discussion button clicked and is showing chat box view on top of home screen view
//Home Screen View
var body: some View {
ZStack (alignment: .top){
Button(action: {
self.viewModel.toggleChatBox()
}, label: {
Text("Issue Discussion")
Image(systemName: "message")
})
// ChatBox view that displays the chat box on the home screen
ChatBox(tailNum: viewModel._781formInstance.tailId, issueNum: viewModel._781formInstance.issueNum, Form781aInstance: self)
.background(Color(UIColor.white))
.border(.black, width: 0.7)
.frame(width: 270)
.offset(x: self.viewModel.chatBox ? 0 : UIScreen.main.bounds.width)
}
}
*I've omitted a lot of extra form the home screen view that I believe wasn't needed for this question, so let me know If you have questions or need more info
I need the ChatBox view to appear and disappear when the button is clicked. I'm currently just setting the offset based on a toggle chat box boolean var. When the var is true it will set the offset to the correct location on the screen. When false it will set the offset to be off the screen (so you cant see it). I'm doing this because for some reason Apple decided to make the .hidden() method be unconditional...
My issue is I'm getting weird behavior with the send and text box of the ChatBox. When I test it putting the chatbox in a navigation link then it behaves correctly but the navigation link takes the user to a new screen rather than displaying the chatbox over the home screen.
I'm wondering the correct way to display the chatbox view onto the home screen view
Wrapping everything in an if clause should do the trick. As long as the var that stores the state is in a #Published wrapper and your viewModel is observed:
if viewModel.whatEverYourBoolIsCalled {
ChatBox(tailNum: viewModel._781formInstance.tailId, issueNum: viewModel._781formInstance.issueNum, Form781aInstance: self)
.background(Color(UIColor.white))
.border(.black, width: 0.7)
.frame(width: 270)
.offset(x: self.viewModel.chatBox ? 0 : UIScreen.main.bounds.width)
.zIndex(3000)
}
I have a list of horizontal images. And a little profile/settings button in the navigation bar. When you click the profile button, a sheet view slides up, and when you dismiss it, the list seems to lose it's cells (HStacks of other images basically)
Here's the code that displays the sheet and list
var body: some View {
NavigationView {
List {
ForEach(0..<self.categories.count) {
ExploreRow(title: self.categories[$0])
}
}
.navigationBarTitle("Justview")
.navigationBarItems(trailing: profileButton)
.sheet(isPresented: self.$showingProfile) {
Text("User Profile: \(self.userData.userProfile.username)")
}
}
}
ExploreRow is essentially a horizontal stack in a scroll view that displays images loaded from the web.
Before Sheet image:
After Sheet dismiss image:
I assume there are not many categories in the List (as they should not be many), so the simplest is just force-rebuild list (supposing you don't make anything heavy in ExploreRow.init, like
List {
ForEach(0..<self.categories.count) {
ExploreRow(title: self.categories[$0])
}.id(UUID())
}
.navigationBarTitle("Justview")
*The issue is due to List's caching-reusing row views, it is known.
I have mvc component for displaying XtraReport. Code is like this:
#Html.DevExpress().WebDocumentViewer(settings =>
{
settings.Name = "webDocumentViewer";
settings.Height = 770;
settings.ControlStyle.CssClass = "fullscreen";
}).Bind(Model.Report).GetHtml()
Now I need to hide toolbar and side panel with params. I don't want to show them to user. How can I do this?
I saw post here: kind of mine problem
but there is used another component - DocumentViewer and I need to use WebDocumentViewer
For now, there is no params for hiding sidebar and toolbar.
You can use below css
.dxrd-preview .dxrd-right-panel-collapse, .dxrd-preview .dxrd-right-panel, .dxrd-preview .dxrd-right-tabs {
display: none;
}
And use js to remove the menuitem on toolbar
function OnCustomizeMenu(s, e) {
var actionExportTo = e.Actions.filter(function (action) { return action.text === "Toggle Multipage Mode"; })[0]
var index = e.Actions.indexOf(actionExportTo);
e.Actions.splice(index, 1);
}
#Html.DevExpress().WebDocumentViewer(settings =>{
settings.Name = "WebDocumentViewer";
settings.ClientSideEvents.CustomizeMenuActions = "OnCustomizeMenu";
}).Bind(new WebDocumentViewerCustomExportOptions.Models.XtraReport1()).GetHtml()
Reference
How to hide/remove right tabs on HTML5 Document Viewer
How to remove the multipage mode item from the WebDocumentViewer toolbar
Does any one know about how to create hide and collapse content using vaadin api.
All components inherit the setVisible() method which can trigger visibility on and off. This means all components and component containers at least. This happens without animations, though.
If you like some animations, you have to rely to add-ons, e.g. Henrik Paul's Drawer does some kind of hide and show animations.
Is this what you were thinking about?
I achieved it by using TabSheet functionality of vaadin.I created two tabs '+' and '-' whenever user clicks on '-' Tab It am setting the TabSheet height to 100% and whenever the user clicks on the '+' Tab I am setting the height of the TabSheet to 20% (visible height of the tabsheet) so whatever the content in the TabSheet will be hided in user perspective.
// Create an empty tab sheet.
TabSheet tabsheet = new TabSheet();
// Defining Vertical Layout for Tab 1 content
final VerticalLayout verLayout1 = new VerticalLayout();
// Tab 2 content
VerticalLayout verLayout2 = new VerticalLayout();
verLayout2.setSizeUndefined();
verLayout2.setMargin(true);
tabsheet.addTab(verLayout1, "+", null);
tabsheet.addTab(verLayout2, "-", null);
tabsheet.addListener(listenerForTab());
/**
* Method to handle tab sheet hide/show event
*
* #return TabSheet.SelectedTabChangeListener
*/
public TabSheet.SelectedTabChangeListener listenerForTab() {
_logger.info("Entering in to tabChangeListener of WizardUtil");
// Instance of TabSheet.SelectedTabChangeListener
TabSheet.SelectedTabChangeListener listener = new TabSheet.SelectedTabChangeListener() {
public void selectedTabChange(SelectedTabChangeEvent event) {
TabSheet tabsheet = event.getTabSheet();
Tab tab = tabsheet.getTab(tabsheet.getSelectedTab());
// Tab content displayed on setting height to the tab sheet
if(tab.getCaption().equals("+")) {
tabsheet.setHeight("100%");
} else {
tabsheet.setHeight("33px");
}
}
};
_logger.info("Exiting from tabChangeListener of WizardUtil");
return listener;
}