Navigate to the last frame from SwapChainBackgroundPanel - windows-8

I am writing a Windows Store app using C++/XAML with DirectX interop - SwapChainBackgroundPanel.
The application is based on the template "Split Page". From each list view item, a DirectX page may be launched using code below.
Window::Current->Content = ref new MyD3Components::DirectXPage();
Window::Current->Activate();
This is working fine and DirectX page opens up and plays very well.
What I would like to have a button in the app bar which helps user to go back and display the "Split Page" to allow selecting another DirectX page. This I have not been able to accomplish yet.
Among several things I have tried, below is the most logical one to my opinion. It gives a "Platform::DisconnectedException" when user wants to go back to the last page.
Windows::UI::Xaml::Controls::Frame^ rootFrame = SDL::App::GetRootFrame();
Window::Current->Content = rootFrame;
Window::Current->Activate();
Please look to see if you have a suggestion or better a solution.

Here the sample example for your question :
What i am creating : 2 pages...
You will have (go to page 2)link on page 1...If u click that,the second page should appear that says "Page 2" at the top. Notice that there is a back button to the left of the page title. Click the button to return to the first page...
1.) Find the TextBlock element named pageTitle and change the Text property to Page 1. The XAML should look like this:
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page 1"
Style="{StaticResource PageHeaderTextStyle}"/>
2.)Add the following XAML as a second child element to the root Grid. The StackPanel element should be a sibling to the Grid that contains the back button and page title.
<StackPanel Grid.Row="1"
Margin="120,0,120,60">
<HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click_1"/>
</StackPanel>
3.)Make the following changes to BasicPage2.xaml.
Find the TextBlock element named pageTitle and change the Text property to Page 2. The XAML should look like this:
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page 2"
Style="{StaticResource PageHeaderTextStyle}"/>
4.)Add the following XAML as a second child element to the root Grid. The StackPanel element should be a sibling to the Grid that contains the back button and page title.
<StackPanel Grid.Row="1"
Margin="120,0,120,60">
<TextBlock HorizontalAlignment="Left" Name="tb1" Text="Hello World!"/>
</StackPanel>
5.)Add the following code to the BasicPage1 class in BasicPage1.Xaml.cs
private void HyperlinkButton_Click_1(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(BasicPage2));
}
6.)Now that we've prepared the new pages, we need to make BasicPage1 the first thing that appears when the app starts. Open app.xaml.cs and change the OnLaunched method to call Frame.Navigate by using BasicPage1 instead of the BlankPage. The entire OnLaunched method should look like the following:
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// Create a Frame to act navigation context and navigate to the first page
var rootFrame = new Frame();
rootFrame.Navigate(typeof(BasicPage1));
// Place the frame in the current window and ensure that it is active
Window.Current.Content = rootFrame;
Window.Current.Activate();
}
Now you are ready to test the app. Start the app, and click the link that says Click to go to page 2. The second page should appear that says "Page 2" at the top. Notice that there is a back button to the left of the page title. Click the button to return to the first page.
Thats it! hope it helps u.

After a bit of trial and error, I am in the position to answer my own question. It seems that all I needed to do was to remove my rendering callbackfrom the CompositionTarget.
It was added like below.
m_eventToken = CompositionTarget::Rendering::add(ref new Windows::Foundation::EventHandler<Object^>(this, &DirectXPage::OnRendering));
Before replacing the current window and activating it, I called below.
CompositionTarget::Rendering::remove(m_eventToken);
I guessed this helped DirectX not to output to rendering pipeline and complain (disconnectedexception) when the target is not there.

Related

How to show the grid on full page in UWP?

I am using syncfusion controls for UWP. One of he feature I have seen in their sample application is showing the data grid on full page.
Something like this
After clicking on this the page looks like this
I am pretty sure that this is not full mode view of the app. After clicking on the button it hides the navigation drawer and the left panel as well.
Can someone please tell how it could be done?
Thanks in advance.
I don't know much about Syncfusion specifically, but I can describe how to implement it in general! This appears to be either a Navigation View or a Master/Details navigation design pattern (I linked both to thier respective documentation pages). Either way, the design pattern typically has the following structure:
Top Frame
Top Page
SplitView (or NavigationView)
Frame
Content Page
Content
Basically, the data grid normally sits on a page. That page is displayed in a frame that is in the content area of a SplitView or NavigationView, which is on the top-level page, which is displayed directly in the top-level frame in the app's window.
The "popping out" effect, that has the data grid display over the navigation drawer is likely some neat trickery going on with manipulating sub-pages, and the frames they are displayed in. So, lets take a look at how this effect can be implemented, given the above info about the structure of the navigation design pattern.
The data grid itself should be placed on its own page, which we will assume is called "DataGridPage" for the following code examples (note that the attributes for the page have been omitted for clarity):
<Page>
<!-- The data grid, or whatever content here -->
</Page>
We are actually adding two layers to the list presented above; the content page has a frame on it, and in that frame is a page with the data grid on it. So, your "content page" in the above list looks like this:
<Page>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition >
<RowDefinition Height="*"></RowDefinition >
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<!-- The bread-crumb, search box, and pop-out button are all in here -->
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<!-- The "left panel" here -->
</Grid>
<Frame Name="MyFrame"
Grid.Column="1"></Frame>
</Grid>
</Page>
And then in the constructor for your "content page" (I am assuming C#, but the logic is the same for VB):
public ContentPage()
{
this.InitializeComponent();
// You are telling the frame to display your page with the data grid on it.
// If you don't ever issue a different "Frame.Navigate" statement on this page,
// then it will statically display your data grid as if it was on the same
// page.
this.MyFrame.Navigate(typeof(DataGridPage));
}
Now, I don't know how the hamburger menu is implemented (the "navigation drawer"), and there are several ways to implement one, and I am guessing that it is a control that Syncfucsion provides for you... so I am going to skip trying to write out what the "Top Page" in the above list would look like (although I can detail one solution for implementing that without Syncfusion in a follow-up post if you would like). All that matters here, is that it has, somewhere on it, a frame that displays the "ContentPage" (which as detailed above contains the left panel and a display of your data grid page).
At the top level of the UWP app, the window your app is running in contains a single frame, which is itself displaying the "Top Page". This is important to note, as it is critical to how this "popping out" effect likely works.
On your "Content Page", handle the "Click" event of the "pop-out" button in the upper right of the page. In that event handler, you are going to take your data grid page, and display it in the top frame (the one directly inside of the app window) rather than the "Top Page" (which it is currently displaying).
The mechanics behind this are a little tricky, since you are handling an event on the "Content Page" (the click of the "pop-out" button), but you need to get a reference to the frame the parent page is displayed in (rather than the frame the content page is displayed in).
The solution is to write a custom event. The idea is that you fire this custom event whenever the "pop-out" button is clicked, and then the "top page" responds to the event, asking it's parent frame (the "top frame") to display the data grid page.
Here is a lengthy (and possibly overwhelming) overview of events. But the code you need looks something like the following. On your "Content page":
<!-- Other attributes omitted -->
<Button Name="PopOutButton"
Click="PopOutButton_Click">
And then in the code of the "Content page":
public sealed partial class ContentPage : Page
{
// This is the declaration for your custom event.
public delegate void PopOutRequestedHandler(object sender, PopOutRequestedEventArgs e);
public event PopOutRequestedHandler PopOutRequested;
private void RequestPopOut()
{
// Ensure that something is listening to the event.
if (this.PopOutRequested!= null)
{
// Create the args, and call the listening event handlers.
PopOutRequestedEventArgs args = new PopOutRequestedEventArgs();
this.PopOutRequested(this, args);
}
}
public void PopOutButton_Click(object sender, RoutedEventArgs e)
{
// Any animation logic you want goes here.
this.RequestPopOut();
}
}
You can define a class PopOutRequestedEventArgs to include whatever properties you want to pass in your event. None are strictly necessary for the basic implementation.
Now, on your "Top Page", you need to subscribe to the event. Do so in the "Navigated" event handler for the frame on the top page. So you have this somewhere on your top page:
<Frame Name="NavFrame"
Navigated="NavFrame_Navigated"></Frame>
Then in your "Top page" code, you have:
private void NavFrame_Navigated(object sender, NavigationEventArgs e)
{
if (e.Content is ContentPage page)
{
page.PopOutRequested += this.ContentPage_RequestedPopOut;
}
}
private void ContentPage_RequestedPopOut(object sender, PopOutRequestedEventArgs e)
{
// This tells the frame this page (the "Top Page") is in, to
// instead display the data grid page.
this.Frame.Navigate(typeof(DataGridPage));
}
That is the effect, in a nutshell. To get the page to "close" again, simply put a button on your datagrid page (which you can hide when the page is displayed in the frame on the "Content page"), and handle its Click event. In that event, request the frame navigate back to the "Content page". So, on your data grid page somewhere, you have the same button as detailed above on the "Content page", and in its event handler you put:
this.Frame.Navigate(typeof(ContentPage));
Now, it is important that you ONLY allow the button to be clicked when the "data grid page" is displayed in the "top frame", as that code references the frame the page is displayed in when it is run... it is not an absolute reference. You will get some unexpected results if you call that code while the "data grid page" is displayed in the frame on the "Content page".
As for restoring the state of the "Top page" when you navigate back to it when closing out of the "popped out" view of the data grid, you can accomplish that via the "NavigationEventArgs". Store the state of the "Top page" (such as the fact that the frame on it is displaying the "Content page") in your own class (we will call it "NavArgs" here), and then pass that as a parameter in the Navigate statements:
// Create an instance of the args class, and store your state info.
NavArgs navArgs = new NavArgs();
this.Frame.Navigate(typeof(DataGridPage), navArgs);
You can store the "navArgs" on your data grid page, and then when exiting out of the "popped out" view, and navigating back to the "Top page" in the "top frame", similarly pass them through the Frame.Navigate() call.
It's a little thorough (although still glosses over a lot of concepts), and it is only one possible way to implement that functionality, but hopefully it helps!
You can show the grid in full page by using the property GridColumnSizer.Star .
In GridColumnSizer.Star type, the available grid width is divided into equal sized regions and the divided width is set for each column. When you have three columns in the grid, the total space is divided by three and that value is allocated to the width of the column.
You can get more details about ColumnSizing from the below links.
https://help.syncfusion.com/uwp/sfdatagrid/columns#column-sizing
Regards,
Sathiyathanam

CompositeCollection containing an ICollectionView

I'm trying to implement a tab control, where each item comes from an ICollectionView of my viewmodel. Each tab page, for the items from the ICollectionView will be the same. However, I would like there to be an extra tab page for configuration options.
So an example tab header 'screenshot' might be:
tabA | tabB | tabC | config
on another instance, it could be
tabA | config
or
config
I can define the header for each item using ItemTemplateSelectors, and the content using the ContentTemplateSelectors. So that bit should be okay.
I'm having trouble with adding the config page item since I do not know where to add it. I thought I could set the tab's ItemsSource to be a CompositeCollection, where the final item is the config page object. I have failed to achieve this.
In the following example, I can view the tab headers being populated correctly according to the designer sample data which I have set up - I have not yet added the config page.
<controls:MetroTabControl ItemsSource="{Binding View}">
<controls:MetroTabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Value.siteDisplayName}" />
</DataTemplate>
</controls:MetroTabControl.ItemTemplate>
<controls:MetroTabControl.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding Value.siteComment}"/>
</DataTemplate>
</controls:MetroTabControl.ContentTemplate>
</controls:MetroTabControl>
As you see, I have set the ItemsSource to be {Binding View}. This "View" comes from my ViewModel and is an ICollectionView.
Ideally i'd be able to do some magic like:
<controls:MetroTabControl>
<controls:MetroTabControl.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{Binding View}"/>
<SomeConfigPageObject/>
</CompositeCollection>
</controls:MetroTabControl.ItemsSource>
...snip...
</controls:MetroTabControl>
But the problem is that when I do the above, the designer preview of the control acts as if there are no items in the ItemsSource.
For reference, each item in the {Binding View} is a object which contains a Value property, the value property containing an object that contains, in this example, a siteDisplayName and siteComment.
For reference, the DataContext for the tab is defined the dockpanel that contains it, as follows.
<DockPanel DataContext="{Binding Source={StaticResource Configurator}}"
d:DataContext="{d:DesignInstance cfuid:ConfigSiteVMSampleData, IsDesignTimeCreatable=true}"
LastChildFill="True">
For reference, the Configurator is my viewmodel and is instantiated in the xaml as:
<UserControl.Resources>
<ResourceDictionary>
...snip...
<cfvmc:ConfigSiteVM x:Key="Configurator" />
...snip...
So, the actual question would be:
How do I add my "config page" at the end of the tab control? Preferably via using the above-hoped method of adding an extra config-page object on the CompositeCollection; however if this is not possible [1] i'm open for suggestions.
[1] I think it doesn't work because the {Binding View} is an ICollectionView and the CompositeCollection requires a "collection" and doesn't accept a "view"
Thank you.
Peter.
I decided to do it through code behind. This means that I do lose my ability to use the design-time data to preview my UI; but it works at run time.
So, in the xaml I have.
<controls:MetroTabControl Grid.Column="0" Grid.ColumnSpan="2"
Grid.Row="0" Grid.RowSpan="2"
ItemsSource="{Binding ElementName=ucMe, Path=TabSitesCollection}">
Where ucMe is the UserControl and TabSitesCollection is a
protected CollectionViewSource m_TabSitesCollectionViewSource;
protected CompositeCollection m_TabSitesComposites;
public ICollectionView TabSitesCollection
{
get { return m_TabSitesCollectionViewSource.View; }
}
That gets initialised in the constructor as follows
public ConfigSiteView()
{
m_TabSitesComposites = new CompositeCollection();
m_TabSitesCollectionViewSource = new CollectionViewSource();
m_TabSitesCollectionViewSource.Source = m_TabSitesComposites;
InitializeComponent();
}
Then, on the Loaded event I can do
m_TabSitesComposites.Add(new CollectionContainer() { Collection = GetModel.View });
m_TabSitesComposites.Add(new TabItem() { Header = "hi" });
m_TabSitesComposites.Add(new TabItem() { Header = "ho" });
This results in almost my desired UI
I now simply need to spiff up my settings tab item and i'm done.
For reference, the xaml designer does not have any preview data - Unless I change the xaml so that the preview loads up (which then breaks the actual execution)
It would have been nice to have it both work while running, and on preview, but I haven't figured out how to do that, and it's not a current priority.

What prevents a Navigation between two XAML-pages?

I am experiencing a very strange bug in my c++/cx XAML app:
I have a back-button that checks if the progress you made is saved and (in case it isn't) pops up a flyout that lets you save or leave without saving. This is done with this->frame->goBack() in both cases, however:
When the progress was saved, the app halts at a __debugbreak() however, when goBack() is called by the button on the flyout, everything works out fine. Why could that possibly be the case?
Things that might help you:
The app is based on the "Blank App" template, the pages itself are based on the "Basic Page" template provided by Visual Studio 2013
The Controls in BoardPage.xaml are defined as follows:
<AppBarButton x:Name="backButton" Icon="Back" Height="95"
Click="backButton_Clicked">
<AppBarButton.Resources>
<Flyout x:Key="WarningFlyoutBase">
<Grid Height="150" Width="200">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Text="Unsaved progress, what do you want to do?"
HorizontalAlignment="Center" TextWrapping="Wrap"
FontSize="14" Margin="4,10" TextAlignment="Center"/>
<Button x:Name="WarningSaveButton"
Content="Save now."
Grid.Row="1" HorizontalAlignment="Center"
Click="WarningSaveButton_Clicked"/>
<Button x:Name="WarningLeaveButton"
Content="Leave without saving."
Grid.Row="2" HorizontalAlignment="Center"
Click="WarningLeaveButton_Clicked"/>
</Grid>
</Flyout>
</AppBarButton.Resources>
<AppBarButton.Flyout>
<StaticResource ResourceKey="WarningFlyoutBase"/>
</AppBarButton.Flyout>
</AppBarButton>
so these three controls (backButton, WarningSaveButton and WarningLeaveButton) all have their respective Clicked event handlers, though only two of them are relevant right now:
backButton:
void Tackle::BoardPage::backButton_Clicked(Platform::Object^ sender,
Windows::UI::Xaml::RoutedEventArgs^ e)
{
if (saved && Frame->CanGoBack) /* saved is a bool */
this->Frame->GoBack();
else
backButton->Flyout->ShowAt((FrameworkElement^)sender);
}
Note: I also tried replacing GoBack() with Navigate(TypeName(CreateGamePage::typeid)), but that didn't help.
WarningLeaveButton:
void Tackle::BoardPage::WarningLeaveButton_Clicked(Platform::Object^ sender,
Windows::UI::Xaml::RoutedEventArgs^ e)
{
if (Frame->CanGoBack)
this->Frame->GoBack();
}
other strange stuff:
I tried to examine the reasons for this crash/debugbreak for quite some time, and found the following:
the page in question is navigated to with this->Frame->Navigate(TypeName(BoardPage::typeid), ref new CGameSession(job));. leaving out the second argument fixes the crash magically.
When the breakpoint is triggered in App.g.hpp, opening a watch on the value errorMessage reveales:
"Placement target needs to be in visual tree."
How come the Flyout is in the visual tree, but the Button it's been attached to isn't?
The target page is in fact constructed, but the NavigationHelper->OnNavigatedTo(e) method fails in the last line LoadState(this, ref new LoadStateEventArgs(e->Parameter, safe_cast<IMap<String^, Object^>^>(frameState->Lookup(_pageKey))));, wich seems paritularly odd, because LoadState() gets called easily and only contains two (void) typecasts. (I have not modified a single one of these methods.)
The Problem here lies within the way flyouts and event handlers work with XAML-Controls, there are 2 mayor points that cause my code to crash:
Flyouts are always shown when the button they're attached to is clicked or tapped.
Event Handlers seem to be executed before the flyout gets shown.
What follows from this?
Well, when the backButton is pressed, backButton_Clicked gets triggered first.
When the game is not saved, the flyout opens and you can go back without a Problem.
But if the game was saved previously, the event handler immediately calls this->Frame->GoBack(), wich does exactly what it should, constructs the previous page, loads its state and draws it.
BUT after that, it tries to open the flyout, and this is the problem here: The flyout doesn't exist anymore, hence the strange error Message.
I am kind of embarassed it took me this long to figure it out, but maybe someone will find this useful in the future, so I'm going to leave this question here.
Workaround:
The workaround I'm using for this now is to move the FlyoutBase to the <Page.Resources> and attach it to a button with a size of 0x0 px. Triggering the flyout then done like so: Flyout::ShowAttachedFlyout(InvisibleButton);

manipulationdelta for popup window - XAML Windows 8

I am trying to put floating popup windows on screen. I want user to be able to move that popup window anywhere on the screen.
And so I am using:
<Popup x:Name="myPopup" Grid.Row="0" Grid.RowSpan="2" Margin="0, 0, 0, 0" ManipulationMode="All" ManipulationDelta="PopupManipulationDelta" IsLightDismissEnabled="False" Visibility="Collapsed" IsOpen="false">
code behind:
private void PopupManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
var ct = (CompositeTransform)addShapesPopup.RenderTransform;
ct.TranslateX += e.Delta.Translation.X;
ct.TranslateY += e.Delta.Translation.Y;
UpdateLayout();
}
But this is not working. The function PopupManipulationDelta is not even getting called.
I tried using same logic on shapes like rectangle, ellipse and it works fine there.
Can you please help me understand why it's not working with popup?
Thank you.
I believe a Popup does not have any visual representation, so it can't respond to hit testing and thus to manipulation events. Simply put some control inside of it and have that respond to the input events. It can be a Grid with Background="Transparent" if you don't want it to be visible.

ApplicationBar not working after navigation Windows 8

I am developing simple app on Windows 8.
I have two UserControls: Locations and LocationsMap.
I am trying to navigate between them. For that I have added to static methods into App. They are like this
public static void ShowLocationsMap()
{
var page = new LocationsMap();
Window.Current.Content = page;
}
Navigation works fine.
But there is a problem. I am calling this method from button in ApplicationBar. XAML looks like this
<ApplicationBar x:Name="BottomAppBar" Height="88" VerticalAlignment="Bottom" Style="{StaticResource AppBarStyle}" Grid.Row="1">
<StackPanel Orientation="Horizontal">
<!-- Margin="left,top,right,bottom" -->
<StackPanel Orientation="Vertical" Margin="5,14,5,14">
<Button Content="Map" Click="MapButton_Click"></Button>
</StackPanel>
</StackPanel>
</ApplicationBar>
And I am navigating back by calling other function from next page.
The problem is that when I navigates back, ApplicationBar stopping to work. It is not showing after right click. If I set BottomAppBar.IsOpen to true, it shows up, but didn't closing.
Where is the problem?
P.S.
ApplicationBar is not working as well in case when I am navigating to other page from button on controls XAML, so problem is not on button inside AppBar.
For navigation I was using sample code downloaded from internet. That code was using static functions defined in App class, which were changing Window.Current.Content.
That was bad idea. Instead if that I just need to use Frame navigation.
When using it we need to change type of our controls from UserControl to Page.
Application bar works great with navigation now.
Hope this will help someone.