Simple XAML to XAML page navigation - c#

I am trying to simply navigate from one .xaml page to another. I realize that the navigation template is built for this but I do not want the mainpage header / content below feel that it brings. Using a blank Silverlight application (C#) I want to move from Page1.xaml to Page2.xaml using a hyperlink button.
On Page1.xaml I have a hyperlink button like this:
<HyperlinkButton Content="Preview Report" Height="24" HorizontalAlignment="Stretch" Margin="98,296,377,21" Name="hyperlinkButton1" NavigateUri="/Page2.xaml" />
this doesn't seem to work. Please help

You will need a navigation frame in your MainPage in order to support this. Start with blank Silverlight Application.
Modify MainPage.xaml to look like:-
<UserControl x:Class="StackoverflowSpikes.NavPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<navigation:Frame Source="/Page1.xaml" />
</Grid>
</UserControl>
Add two or more Navigation Page's to your project. Now you can add HyperLinkButton elements to them.

Related

Problem With Hotbar, arrow as web site in .net framework wpf app

Image with Problem
This is a WPF application launched with debug of visual studio
I've a window, where show content
<Window x:Class="Test.All"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Test"
mc:Ignorable="d"
Title="All" Height="450" Width="800">
<Grid>
</Grid>
and a user control, with the content to show in the window
<UserControl x:Class="Test.ShowContent"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Test"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Button x:Name="btnrand" Content="button" HorizontalAlignment="Left" Margin="300,69,0,0" VerticalAlignment="Top" Width="200" RenderTransformOrigin="0.473,0.477" Height="58" Click="btnrand_Click"/>
<Label x:Name="showblasph" Content="" HorizontalAlignment="Left" Margin="60,169,0,0" VerticalAlignment="Top" Height="163" Width="664" FontSize="24"/>
</Grid>
</UserControl>
With a WinForms application, I did not have that problem, but with wpf yes, any ideas?
The problem is the arrows at the top
You are accidentially using a NavigationWindow instead of a Window. A navigation window has built-in browser-like controls. These controls are not shown in the Visual Studio designer, but at runtime. The black bar at the top are the XAML debugging tools, that you can enable or disable in debug mode.
A navigation window is used automatically, if you specify a UserControl resource as StartupUri. What type of window is used or created depending on the startup URI is documented here.
Types that display a NavigationWindow when set as StartupUri resource:
NavigationWindow
Page
UserControl
FlowDocument
PageFunction<T>
Therefore, you have to set a Window as StartupUri and set its Content to your UserControl.

How to split wpf xaml page into more maintainable small parts

I'm creating a wpf application and the main page consist of a sidebar a header and a content area where the rest of the app will be displayed, since i come for an angular background can i split the sidebar and the header and the content area into small maintainable components and how can it be achieved
In your Solution Explorer, right click on your project and add a new UserControl. Call it for example "FeatureView". In that UserControl, insert a textblock with a dummy text like:
<UserControl x:Class="WpfApp10.FeatureView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApp10"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<TextBlock Text="This is my FeatureView UserControl"/>
</Grid>
Then, in your MainWindow load it in the following way:
<Window x:Class="WpfApp10.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp10"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<local:FeatureView/>
</Grid>
You should be able to see your dummy text. You can expand this with more UserControls.
You can split the areas into user controls:
https://learn.microsoft.com/en-us/visualstudio/extensibility/adding-user-control-to-the-start-page?view=vs-2017
A nice way of managing this is to use Prism Regions, see:
https://rohiton.wordpress.com/2016/06/08/understanding-prism-part-2-regions/

WPF Button within a frame in a page navigates to change the parent page

I am very new to WPF but really enjoying it at the moment. I have a question about page navigation that I am trying to implement.
I have the MainWindow.xaml which has a frame inside it.
On startup, the frame loads page 1.
Page 1 has a button in it.
If you click on the button, page two appears inside the frame.
However, I don't want this. When the user clicks on the button in page 1, I want the whole page(MainWindow.xaml) to navigate to page 2. So I need the actual parent page itself to change.
I am using the following code on the button's Click event. I just don't know how to refer to the parent page.
private void Button_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new PageTwoReplacesMainPage());
}
Please let me know if I need to provide more information.
I hope this makes sense and any help would be very appreciated. Thank you.
The MainWindow.xaml code is...
<Window x:Class="TestWpfParentNavigation.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestWpfParentNavigation"
mc:Ignorable="d"
Title="MainWindow" MinHeight="500" MinWidth="700" Background="Beige">
<Grid>
<StackPanel>
<Frame x:Name="myMainFrame" NavigationUIVisibility="Hidden" Height="400" Width="600" Margin="0,50,0,0" />
</StackPanel>
</Grid>
</Window>
The Page1.xaml is...
<Page x:Class="TestWpfParentNavigation.PageOneWithButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TestWpfParentNavigation"
mc:Ignorable="d"
d:DesignHeight="200" d:DesignWidth="300"
Title="PageOneWithButton" Background="Bisque">
<Grid>
<Button Content="Go to the second page" Height="30" Width="150" Click="Button_Click" Margin="10,10,140,160" />
</Grid>
</Page>
Page2.xaml is...
<Page x:Class="TestWpfParentNavigation.PageTwoReplacesMainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TestWpfParentNavigation"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="PageTwoReplacesMainPage" Background="Aqua">
<Grid>
</Grid>
</Page>
I have found the answer. I misunderstood the way a Window is supposed to work.
To solve my problem, I did the following:
In the MainWindow.xaml, I created a frame which covered the whole window.
Then I loaded a page into the frame. This page had a second frame in it.
In the The second frame, I load the second page which has the button.
When I click on the button, I can now access the very first frame and navigate to the page that I wanted. This means I can utlise my masterpage concept now.
Thank you all for trying to help. You gave me the clues to understand my problem and answer it. Kind regards. I hope this answer makes sense and helps anyone else.

ToolTip inside a page within frame

I need to use the ToolTip on a label inside a xaml
<Page x:Class="xxx.xxx"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="464" d:DesignWidth="628"
Title="ManagementDetails" Loaded="Page_Loaded">
<Grid>
<Label Margin="0,360,376,91" >
<ToolTipService.ToolTip>
<ToolTip Content="Turtle" />
</ToolTipService.ToolTip>
</Label>
</Grid>
</Page>
this xaml file is used to be a child inside a frame contained in another xaml file
<Window x:Class="xxx.xxxxxx"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ViewProject" Height="626" Width="810" >
<Grid Height="600" Width="800">
<Frame Margin="172,136,0,0" Name="frame1" />
</Grid>
</Window>
i embedded the page xaml file inside the frame using
MyClass myClass= new MyClass();
frame1.Navigate(myClass);
if i moved the label with the ToolTip from the page xaml file to the window xaml file the ToolTip work but when use it inside the page xaml file it doesn't work.
what is missing here to make it work inside the page xaml file
Why are you doing it this way?!?
Just do something like:
<Label Name="Some_Label" ToolTip="Turtle"> Fun with labels ...</Label>
Done. Should work inside another or by itself.
Using the ToolTip Control:
The ToolTipService class must be used along with the ToolTip control in order to display a tooltip to our control. For the example I will use an image control, but the following can be applied to each of the controls. Here is the code:
<Image Source="GiantSeaTurtle.jpg" Width="400" Height="300">
<ToolTipService.ToolTip>
<ToolTip Content="Turtle"></ToolTip>
</ToolTipService.ToolTip>
</Image>
Thanks guys for all your answers it seems that is was my fault and feel ashamed, i had duplicate xaml files for the same page and i was editing one and viewing another one. Sorry for this inconvenience and thanks again for your help.

Button (In silverlight) does not have Click property

I need my silverlight button to call a specific method, but my button doesn't have any click property. The Intellisense shows "clickmode" but no "click"
I'm definitely using the System.Windows.Controls.Button control
Here's my code for the xaml file
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Telerik_Windows_Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting" x:Class="..."
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Telerik_Windows_Controls:RadChart Name="radChart" Content="RadChart" Margin="78,47,0,0" d:LayoutOverrides="Width, Height"/>
</Grid>
<Button Content="Button" HorizontalAlignment="Left" Margin="8,8,0,0" VerticalAlignment="Top" Width="75"/>
</UserControl>
A WPF button has an "OnClick" event, or a "Command" property. You may find this link useful: WPF Commanding Overview
Silverlight's Button does have an event called Click, defined in ButtonBase, see the MSDN API documentation. So you might write XAML like:
<Button Content="Button" ... Click="My_Event_Handler"/>
However, have a look at Commanding as referenced by the other answer for the "nice" way to do things (Button's Command property).

Categories