Windows Store 8.1. XAML Progress Bar between pages - c#

I am having a problem with a page in my Windows 8.1 Store App that is taking a long time to render - it is a grid with a number of columns and rows that gets bound to data on loading of the page.
It is not the loading of the data that is slow but the actual binding of the data to the grid.
I ideally want to display a dialog bar to indicate to the user that something is loading and they have clicked on the previous navigate button okay.
I saw someone mention the possibility of having a "loading page" which only has a progress bar in it - and I thought this solution might work but I can't work out in what event of the loading page should I navigate to the actual page.
i.e.
User clicks button which calls
this.Frame.Navigate(typeof(LoadingPage));
Loading Page displays a progress bar
I know need to be able to call
this.Frame.Navigate(typeof(ActualPage));
The user sees the progress bar whilst ActualPage loads.
Any suggestions would be greatly appreciated thanks!

Thanks to the support team at DEVExpress I have a solution to my problem.
Firstly on the page that takes time to load I have wrapped my Grid in a ContentControl
<ContentControl Visibility="Collapsed" Name="Content">
<!-- Grid in here -->
</ContentControl>
I then added a TextBlock which I will use as to display "Loading..." to my page. I have called this control indicator.
<TextBlock x:Name="indicator" Text="Loading..." />
I have attached the following method to the Loaded event of the page which uses a timer
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
indicator.Visibility = Windows.UI.Xaml.Visibility.Visible;
DispatcherTimer t = new DispatcherTimer { Interval = TimeSpan.FromSeconds(1) };
t.Tick += (dd, ee) =>
{
t.Stop();
Content.Visibility = Windows.UI.Xaml.Visibility.Visible;
};
t.Start();
}
Then when the gridcontrol has Loaded I hide the indicator TextBlock
void gridControl_Loaded(object sender, RoutedEventArgs e)
{
indicator.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
}
This works perfectly for me. I can't use the Windows 8 ProgressBar control because the animation is loaded on the same thread that loads the grid - but I am happy enough to have any indicator.
Also thanks Brian Stump for pointing me in the right direction.

First, I will suggest using a ListView or GridView to display your databound objects because of build-in UI virtualization.
However, maybe this will work for your situation.
Do you know when your page is ready to display? If so, place a progress ring in front of your grid while it loads in the background.
<Grid x:Name="FullPageGrid">
<Grid x:Name="YourGridContent">
</Grid>
<Grid Background="White" Visibility="Visible" x:Name="ProgressRingGrid">
<ProgressRing IsActive="True"></ProgressRing>
</Grid>
</Grid>
When the data is fully loaded, change the visibility of the "ProgressRingGrid" to Visibility="Collapsed"

Related

What alternatives do I have to flyout/ContentDialog? (c#, xaml)

I currently have a program where you can load a text in it.
Now I created a button that Pops up a flyout/ContentDialog but Im not happy with it because Limits me of what Im trying to achieve.
When I click the button it opens a flyout, the flyout gets the full Focus. That means I cannot scroll to the text WHILE the flyout-box is open. And if I click outside the flyout-box the flyout-box disappears.
I have a similar Problem to the ContentDialog.
When I click the button and the ContentDialog Pops up, everything behind the ContentDialog goes a bit into White/Grey Color. Also the ContentDialog does not allow any Focus outside the ContentDialog itself.
So what do I want to have?
I want that when I click on the button that a Window appears. I should be able to customize the window (writing text in it and it should have a button).
While this Window is open I want to be able to do Actions outside that window without the window Closing. For example Scrolling through the text I loaded.
Is there something I can achieve this with?
Take a look at the Popup class. This will let you display content on top of other content within your app's window. It's similar to the Flyout but without all of the built-in Flyout behavior that you don't want. The Popup class documentation has more details and commentary on when and how to use it.
Here's a really bland example with no styling.
<Grid>
<Popup x:Name="popup">
<StackPanel>
<TextBlock Text="Poppity pop pop" />
<Button Click="ClosePopup_Click">Close</Button>
</StackPanel>
</Popup>
<Button Click="OpenPopup_Click">Open Popup</Button>
</Grid>
private void OpenPopup_Click(object sender, RoutedEventArgs e)
{
popup.IsOpen = true;
}
private void ClosePopup_Click(object sender, RoutedEventArgs e)
{
popup.IsOpen = false;
}
There is a slightly more complicated example in the Popup documentation
I just hide and show grids with whatever I want inside.

WPF popup in NavigationWindow

I am building a WPF app using NavigationWindow with many Pages. I have created popups within a Page like follows:
XAML
<Popup PlacementTarget="{Binding ElementName=mainDisplay}" Placement="Center" Name="myPopup">
<Frame Name="popupFrame"/>
</Popup>
codebehind
popupFrame.Navigate(new MyUserControl()); //navigate to a user control
myPopup.IsOpen = true; //to "pop up" popup
Except now, I would like a "global" popup, which is based on a timer and can popup at any page when time is up. The timer is inside the main NavigationWindow's codebehind and keeps ticking across all pages, but I cannot place the popup directly within the NavigationWindow since it does not support direct content. How can i achieve this?
Thanks in advance!
As it turns out, it's very simple. I just need to create a popup in codebhind of NavigationWindow, and set myPopup.IsOpen=true when time is up.

Alternate ways to display forms inside a Grid row in WPF

The WPF application I've created contains a Grid with 3 rows. I have a set of buttons in the 3rd row. On Clicking the Buttons, the forms are displayed in the 2nd row of the Grid. However What I've done is quite messy because I've created all the form contents in the same window and have set the visibility to Hidden.
sample code:
<Grid Name="panel1" Grid.Row="1" Visibility="Hidden">
//contains a lot of textblocks,buttons and images
</Grid>
<Grid Name="panel2" Grid.Row="1" Visibility="Hidden">
//contains a lot of textblocks,buttons and images
</Grid>
<Grid Name="panel3" Grid.Row="1" Visibility="Hidden">
//contains a lot of textblocks,buttons and images
</Grid>
My xaml Code looks like this:
private void Image_MouseLeftButtonDown_1(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
panel1.Visibility = System.Windows.Visibility.Hidden;
panel2.Visibility = System.Windows.Visibility.Visible;
panel3.Visibility = System.Windows.Visibility.Hidden;
}
This approach looks really messy as I've included all the code in the Main Xaml file.
Need some alternate ways to do this. Kindly help.
Create a method like this
private void VisibilityManager(Grid grd)
{
new List<Grid>(){ panel1, panel2, panel3}
.ForEach(x => x.Visibility = Visibility.Hidden);
grd.Visibility = Visibility.Visible;
}
and call it like this
VisibilityManager(panel1);
for making panel1 visible and all other hidden.
In future if you have to increase your grids just make changes inside this method.
You could style a tabcontrol and switch the tab, you could use a contentcontrol and create a binding to the content you want to show. You could also use a databinding (depends on what you want to display) and use a template selector... there are many ways to solve that problem. Just tell a bit more what your contents look like

Toolbar Overlay over WindowsFormsHost

I have a SWF object embedded in a WindowsFormsHost Control inside a WPF window.
I'd like to add a toolbar over the swf movie.
The problem with the snippet of code I have below, is that when the new child is added to the host control (or the movie is loaded, I haven't figured out which yet), the toolbar is effectively invisible. It seems like the z-index of the swf is for some reason set to the top.
Here is what it looks like:
XAML:
<Grid Name="Player">
<WindowsFormsHost Name="host" Panel.ZIndex="0" />
<Grid Name="toolbar" Panel.ZIndex="1" Height="50"
VerticalAlignment="Bottom">
[play, pause, seek columns go here]
</Grid>
</Grid>
C#:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
flash = new AxShockwaveFlashObjects.AxShockwaveFlash();
host.Child = flash;
flash.LoadMovie(0, [movie]); // Movie plays, but no toolbar :(
}
Any insight on this issue would be much appreciated.
Update: Since no suitable answer was posted, I've placed my own solution below. I realize this is more of a hack than a solution so I'm open to other suggestions.
Here is my hackaround the WindowsFormsHost Z-index issue.
The idea is to place whatever you need to be overlayed nested inside a Popup. Then to update that popup's position as per this answer whenever the window is resized/moved.
Note: You'll probably also want to handle events when the window becomes activated/deactivated, so the pop disappears when the window goes out of focus (or behind another window).
XAML:
<Window [stuff]
LocationChanged="Window_LocationChanged"
SizeChanged="Window_SizeChanged" >
<Grid Name="Player">
[same code as before]
<Popup Name="toolbar_popup" IsOpen="True" PlacementTarget="{Binding ElementName=host}">
[toolbar grid goes here]
</Popup>
</Grid>
</Window>
C#:
private void resetPopup()
{
// Update position
// https://stackoverflow.com/a/2466030/865883
var offset = toolbar_popup.HorizontalOffset;
toolbar_popup.HorizontalOffset = offset + 1;
toolbar_popup.HorizontalOffset = offset;
// Resizing
toolbar_popup.Width = Player.ActualWidth;
toolbar_popup.PlacementRectangle = new Rect(0, host.ActualHeight, 0, 0);
toolbar_popup.Placement = System.Windows.Controls.Primitives.PlacementMode.Top;
}
private void Window_LocationChanged(object sender, EventArgs e)
{ resetPopup(); }
private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{ resetPopup(); }
Another solution I've discovered is to use Windows Forms' ElementHost control. Since I'm using a Windows Form inside a WPF window anyway, why not just use an entire Windows Form and save myself Z-Issue headaches.
The ElementHost control is really useful, because I can still use my toolbar UserControl, and embed it inside the Windows Form. I've discovered that adding a child can be finicky with Windows Forms, so here's a snippet describing the solution:
First, toss in the ActiveX object, then an ElementHost Control, using the designer.
Form1.Designer.cs:
private AxShockwaveFlashObjects.AxShockwaveFlash flash;
private System.Windows.Forms.Integration.ElementHost elementHost1;
Form1.cs
public Form1(string source)
{
InitializeComponent();
toolbar = new UserControl1();
this.elementHost1.Child = this.toolbar;
this.flash.LoadMovie(0, source);
}
Note that the child was not set in the designer. I found that for more complex UserControls the designer will complain (though nothing happens at runtime).
This solution is, of course, still not entirely ideal, but it provides the best of both worlds: I can still code my UserControls in XAML, but now I don't have to worry about Z-indexing issues.

How to show ProgressBar control while a page is loading?

I have WP7 application with several pages. When a user navigates through them it takes some time to load information. So before showing him/her the page I'd like to show “Loading…” message.
I created progress bar and placed it on the page:
<StackPanel x:Name="progressBarMain" Grid.Row="1" Grid.ColumnSpan="2" Visibility="Collapsed">
<TextBlock Text="Loading..." HorizontalAlignment="Center" VerticalAlignment="Center" />
<ProgressBar Margin="10" Height="30" IsIndeterminate="True"/>
</StackPanel>
And I'm trying to show it (and hide everything else) in the page's constructor, and hide it (and show everything else) in Page.Loaded handler.
public SomePage()
{
InitializeComponent();
Loaded +=OnSomePageLoaded;
progressBarMain.Visibility = Visibility.Visible;
ContentPanel.Visibility = Visibility.Collapsed;
}
private void OnSomePageLoaded(object sender, RoutedEventArgs e)
{
progressBarMain.Visibility = Visibility.Collapsed;
ContentPanel.Visibility = Visibility.Visible;
}
But it doesn’t' work.
Any ideas? Thank you!
Alex demonstrates showing a progress bar while the app is starting up here.
Creating a Splash Screen with a progress bar for WP7 applications. - Alex Yakhnin's Blog
Although you cannot directly manipulate the splash screen (which is static), you can display a popup (by the way, that is exactly what is done in Alex's solution) and wait for a background (read: loading) operation to complete.
Yes, you'll need to create a separate XAML Pop-up page that is loaded when the app boots up. For more details on Splash Screens, there is a code sample from MSDN:
"Code Sample for Splash Screen"

Categories