How to style default NavigationUI - c#

I'm using a Frame in a Window to display content and I added navigation with
<Frame NavigationUIVisibility="Visible" Name="FrameContent" VerticalAlignment="Stretch" Margin="0,34,-0.8,0.4" Grid.RowSpan="2"/>
And in Window.xsml.cs
FrameContent.Navigate(new HomeView());
And the navigation bar looks like this:
Is there any way of changing the default look of this bar? Or is the only option to create a new one?

In my WPF app I created my own, The simplest version of it was like:
<Grid VerticalAlignment="Top" Height="50" Background="DarkGray">
<StackPanel Orientation="Horizontal">
<Button Content="Back" Click="Back_Btn"/>
<Button Content="Next" Click="Next_Btn"/>
</StackPanel>
</Grid>
In code behind:
private void Next_Btn(object sender, RoutedEventArgs e)
{
if (this.NavigationService.CanGoForward)
NavigationService.GoForward();
else
NavigationService.Navigate(new HomeView());
}
private void Back_Btn(object sender, RoutedEventArgs e)
{
if (this.NavigationService.CanGoBack)
NavigationService.GoBack();
else
NavigationService.Navigate(new HomeView());
}
If you want you can design the buttons with materialdesign package from NuGet for example.
The MVVM version of it is more complex.

There is a way to change the default look of the bar.
Have the xaml file with the frame open.
Open the document outline window.
(From the Visual Studio Toolbar: View => Other Windows => Document Outline)
In the Document Outline window right click on the frame to display a context menu.
Select from the context menu: Edit Template => Edit a Copy...
Press OK on the Create Style Resource window.
Change the contents of Window.Resources to your liking.

Related

Navigation from menu frame to content frame

I have found this issue here:
WPF Navigate Pages from outside frame
But never solved, I have the same issue and same window structure:
<DockPanel>
<Frame x:Name="Menu" Source="/Menu.xaml" NavigationUiVisibility="Hidden" />
<Frame x:Name="Content" Source="/Welcome.xaml" NavigationUiVisibility="Hidden" />
</DockPanel>
As you can see, the frames contains some default pages, and Menu frame displays the menu buttons:
<Grid>
<Button x:Name="Contact" Click="Contact_Click" />
<Button x:Name="Discussion" Click="Discussion_Click" />
</Grid>
What I want to do is to change the source in Content, using the buttons in menu, I have already tried:
private void Contact_Click(object sender, RoutedEventArgs e)
{
MainWindow mainWindow = new MainWindow();
mainWindow.Content.NavigationService.Navigate("/Contact.xaml", UriKind.Relative);
}
Sideways, do you think that is better option to take the menu directly into the main window instead of having it inside a different frame?

Ways to open MahApps Flyout

I've been working with MahApps and wanted to add a Flyout window. I assumed incorrectly that the logic was included with the control to detect when it should be opened closed.
What are some ways the community have been accomplishing this?
Currently I have added a rectangle to the grid on the far edge that uses mouse enter events to display the flyout and then the built in close arrow button.
What other neat ways are people doing this?
<controls:MetroWindow.Flyouts>
<controls:FlyoutsControl Name="FlyoutControlSettings" Background="Beige">
<controls:Flyout x:Name="yourMahAppFlyout" Header="Flyout" Theme="Accent" Position="Left" Width="600" IsOpen="False" BorderBrush="Black" BorderThickness="3,0,3,3">
<TextBlock FontSize="24">Hello World</TextBlock>
</controls:Flyout>
</controls:FlyoutsControl>
</controls:MetroWindow.Flyouts>
And then then code would look like this
private void ToggleFlyoutSetting(object sender, RoutedEventArgs e)
{
yourMahAppFlyout.IsOpen = !yourMahAppFlyout.IsOpen;
}

How to Navigate from One Page to Another in WPF

I have a MainWindow.XAML and CustomersView.XAML.
When I click the Customer Button on MainWindow , I want to navigate to CustomersView.XAML and palong with that need to pass few parameters.
I can use NavigationService but is only available with Pages and not Window.Hyperlink is not an option at this moment.
This might be fairly simple thing but not sure how can I implement this using MVVM and with out any third party control.
private void Navigate_Click(object sender, RoutedEventArgs e)//By Prince Jain
{
this.NavigationService.Navigate(new Uri("Page3.xaml", UriKind.Relative));
}
There are many options to navigate from one window to another in WPF. You can use a frame in your MainWindow and navigate all your pages right inside your Frame.
<Window
x:Class="NavigationSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<DockPanel>
<Frame x:Name="_mainFrame" />
</DockPanel>
</Window>
From code, you can tell the frame to navigate, like so:
_mainFrame.Navigate(new Page1());
Which just so happens to be a helpful shortcut to:
_mainFrame.NavigationService.Navigate(new Page1());
Or if you using any framework like PRISM, you are allowed to create a Shell where you can define regions and let your pages navigate to that.
Navigation Using the Prism Library 5.0 for WPF
Simple Way in XAML:
<Button HorizontalAlignment="Right" Name="continueButton" Width="75"
Margin="0,0,8,11" Height="23" VerticalAlignment="Bottom"
Click="continueButton_Click">
Navigate
</Button>
C#:
private void continueButton_Click(object sender, RoutedEventArgs e)
{
this.NavigationService.GoForward();
//or
this.NavigationService.Navigate("Second.xaml")
}
In MVVM XAML:
<Button Command="{x:Static Views:Commands.NavigateHelp}"
Content="Help"/>
In Views (We have a Commands.cs file that contains all of these):
public static RoutedCommand NavigateHelp = new RoutedCommand();
In the page constructor, you can connect the two:
CommandBindings.Add(new CommandBinding(Commands.NavigateHelp,
NavigateHelpExecute));
NavigateHelpExecute can be in the code behind (which is what we do), hook into a ViewModel event handler, or whatever. The beauty of this is that you can disable other navigation like so:
CommandBindings.Add(new CommandBinding(NavigationCommands.Refresh, null));

longlistselector header/footer click

I'm very new in WindowsPhone development and at this moment I'm facing a problem that I couldn't find a way to fix. I'm using a LongListSelector to show some information on the device screen and also a Header and a Footer with some static information. Everything looks right, but I can't handle the Click/Tap on the Header and on the Footer (the other items are working properly).
Someone know how to do it? Is there any event that tells my .cs that someone clicked on the footer or on the header view?
Thanks!
Implement ListFooter and ListHeader in your xaml.
Example :
<phone:LongListSelector x:Name="myLongListSelector"
Background="Transparent"
IsGroupingEnabled="True"
HideEmptyGroups="True">
<phone:LongListSelector.ListFooter>
<Grid Height="70" Tap="Grid_Tap">
<TextBlock Text="Texxt" Foreground="White"
VerticalAlignment="Center"
FontWeight="Bold"
FontSize="20"/>
</Grid>
</phone:LongListSelector.ListFooter>
</phone:LongListSelector>
Now in your cs file, you have :
private void Grid_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
}

How to replace the details view when toolbar item is invoked?

I have a WPF application using PRISM. The application is divided into two sections. The left pane is a menu pane and the right pane is a details pane. I have a toolbar also in the container pane which is a user control.
Now, I want that when I click the toolbar option I should be able to replace the right pane (details pane) with new user control/window. How can I do that? Currently, I have the following code in the toolbar edit button click which opens a new window I do not want a new window I want to replace the right pane window (details) window.
private void EditButtonClick(object sender, RoutedEventArgs e)
{
Window userEditWindow = new Window
{
Title = "User Edit",
Content = new UserEdit(),
Width = 600,
Height = 600
};
userEditWindow.Show();
}
Here is what the user interface looks like:
_______________________________________________________________________
PRISM shell container begins
________________________________________________________________________
| User control containing toolbar (edit, new, update, delete)
menu user control |____________________________________________________
|details pane user control
|
|
__________________________________________________________________ |_______________________________________________________________
PRISM shell container ends
_________________________________________________________________________
Above you can see the layout of my app! As you can see everything is inside the PRISM shell container. I am handling the events from user control toolbar in the code behind for the usercontrol toolbar as shown above. All I want is to replace the details pane when the toolbar is clicked. But I have no idea how to do that?
Look back at my answer to your previous question. You can then handle the Toolbar event by switching the DataEntryContext to a new instance of a different DataEntryViewModel and using a DataTemplate the UserControl in your Details Pane will change to reflect that.
In the MainView:
<Window
//usual window declarations>
<Window.Resources>
<DataTemplate DataType="{x:Type vm:FirstDetailViewModel}">
<view:FirstDetailView />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:SecondDetailViewModel}">
<view:SecondDetailView />
</DataTemplate>
//more DataTemplates for other data entry views
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<view:ToolbarView Grid.Row="0"
DataContext="{Binding ToolbarContext}" />
<ContentPresenter Grid.Row="1"
Content="{Binding DataEntryContext}" />
</Grid>
</Window>
In the MainViewModel:
private void ToolbarContext_LoadFirstDetailExecuted(object sender, EventArgs e)
{
DataEntryContext = new FirstDetailViewModel();
}
private void ToolbarContext_LoadSecondDetailExecuted(object sender, EventArgs e)
{
DataEntryContext = new SecondDetailViewModel();
}

Categories

Resources