Unwanted navigationbar WPF - c#

I am working on some WPF app with a main window and with some pages, something weird happened to me, "suddenly" when I move from page 1 to page two this toolbar added himself to my window,
my questions: where did this came from? how to remove/ give it better design, I mean where is the source code of this toolbar
Is this default by Microsoft?
Here is my window class def:
<Window x:Class="Tool.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:Tool"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d"
ResizeMode="CanResizeWithGrip"
MinWidth="600"
MinHeight="500"
Title="Preparation Tool" Height="600" Width="1080" Icon="icon.ico" Foreground="White" >

You can easily hide that:
<Frame NavigationUIVisibility="Hidden"
But you should use contentcontrol instead of frame and usercontrols instead of pages.

Where did this came from? How to remove it?
It is a built-in navigation chrome in Frame control.
According to Microsoft docs, the navigation chrome is visible when a Frame uses its own journal (see JournalOwnership).
If you don't want that Navigation chrome, you can simply set NavigationUIVisibility property of your frame to Hidden.
<Frame NavigationUIVisibility="Hidden" />
If you don't want history navigation management of the current Frame too, you can set JournalOwnership property of Frame to UsesParentJournal . This makes your Frame use the journal of the next available navigation host up the content tree, if available. Otherwise, navigation history is not maintained for the Frame.
<Frame JournalOwnership="UsesParentJournal" />
Or give it a better design? I mean where is the source code of this toolbar?
In Visual Studio (or Visual Studio Blend that I prefer for UI design stuff) simply right-click on your Frame and then select Edit Template > Edit a copy and put copy of Template in a ResourceDictionary. Then you can modify the template which it's key is FrameNavChromeTemplateKey.
Is this default by Microsoft?
Yes.
P.S. Do not forget that when you set NavigationUIVisibility="Hidden" and JournalOwnership="OwnsJournal", history management for Frame itself is still available and you can navigate between pages with commands like Next/Prev mouse buttons.

Related

UWP XAML NavigationView - CornerRadius on Content Panel

I am new to XAML and I am implementing a NavigationView control in my UWP application.
Some details:
Visual Studio 2019
Microsoft.UI.Xaml version 2.6.2 (Nuget Package Installed)
UWP Targets:
Target: Universal Windows
Target Version: Windows 10, version 2004 (10.0; Build 19041)
Min Version: Windows 10 Fall Creators Update (10.0; Build 16299)
I am trying to find the property or style that controls the top left corner radius of the "content" section. I would like to not have a rounded corner there, and just to flow directly to the top but I can't seem to find the correct way to do this. Attached is a picture of the rounded corner I am talking about: content frame.
Here is the XAML for my main page with the navigation menu:
<Page
x:Class="NavTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:local="using:NavTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<muxc:NavigationView x:Name="NavView" Background="Gray">
<muxc:NavigationView.MenuItems>
<muxc:NavigationViewItem Tag="home" Icon="Home" Content="Home"/>
<muxc:NavigationViewItemSeparator/>
<muxc:NavigationViewItemHeader x:Name="MainPagesHeader"
Content="Main pages"/>
<muxc:NavigationViewItem Tag="apps" Content="Apps">
<muxc:NavigationViewItem.Icon>
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""/>
</muxc:NavigationViewItem.Icon>
</muxc:NavigationViewItem>
<muxc:NavigationViewItem Tag="games" Content="Games">
<muxc:NavigationViewItem.Icon>
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""/>
</muxc:NavigationViewItem.Icon>
</muxc:NavigationViewItem>
<muxc:NavigationViewItem Tag="music" Icon="Audio" Content="Music"/>
</muxc:NavigationView.MenuItems>
</muxc:NavigationView>
</Grid>
Does anyone know how I can control the top left corner radius of the navigation menu content item to make it not rounded? Is there a style property I can override or set? Just directly setting the "CornerRadius" property on the NavigationView doesn't seem to make any difference.
Thanks
To change the CornerRadius you have to create your own Style for the control:
1: In Visual Studio rightclick your project and go to "Design in Blend..."
2: After Blend is opened, you go to "Objects and Timeline" and rightclick on your NavigationView, which shows up in the list. In the rightclick menu you go to "Edit template" and from there to "Edit a copy".
3: A little window pops up and you can now enter the name of the style.
4: Visual studio will now create a custom style for your NavigationView and you can customise every little thing of the control.
5: You should be done. And if it doesn't work, write me a comment!

How to change Content property in ContentControl

I have custom ContentControl
public class MyContentControl: ContentControl
{....}
with Content defined in XAML like this
<controls:MyContentControl x:Name="myContentControl">
<controls:MyContentControl.Content>
<controls:UserControl1 />
</controls:MyContentControl.Content>
</controls:MyContentControl>
Content shows in designer and in the device when I launch my application. But when I try to change Content property programmatically, for example
UserControl2 control2 = new UserControl2();
myContentControl.Content = control2;
MyContentControl shows nothing. Using standard ContentControl give the same result.
Any suggestions are welcome.
I followed your code to make simple code sample to test. There's no problem.
public class CustomContentControl:ContentControl
{//......}
<Grid>
<local:CustomContentControl x:Name="content">
</local:CustomContentControl>
</Grid>
MyUserControl1 myUserControl1 = new MyUserControl1();
content.Content = myUserControl1;
<UserControl
x:Class="AppContent.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppContent"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<TextBox Text="abc"></TextBox>
</Grid>
You might have done some specific settings in your code. #Martin Zikmund's suggestion also was reasonable. You could refer to his suggestion and check your code. After that, if you still could not solve this issue, please provide a Minimal, Complete, and Verifiable example.
This should work. The reason could be that the control does not stretch and is displayed just 0x0 in size. Try to set absolute Width and Height to the control2 and check if it displays. You can also set myContentControl.HorizontalContentStretch and myContentControl.VerticalContentStretch.
You can try running the app in debugger and then use the Live Property Explorer to see what the actual size of the control inside Content is.
Ok, I found out where the things went wrong. I am using different controls for desktop and mobile devices, so I put some of theirs XAML views to the DeviceFamily-Mobile folder. This way they automatically use when needed. I've confused namespaces, because all XAML views in this folder have a root namespace for accessibility reasons. When I was trying to add control to the ContentControl via c#, I didn't resolve namespace where my controls were placed. So I've put XAML view as a childs to the ContentControl, and they staying invisible as none of them has InitializeComponent() method. Adding correct controls with initialization fixed my problem.
I am very grateful for your answers, they pointed me to the right way.

passing textbox value from a parent window to a page wpf

No doubt I'm not the first to ask something of this nature. The thing is for the majority of these, the replies will lay reference to MVVM when it comes to wpf and not really explain how that's done or give an applicable example at the very least. The rest are specific to those peoples particular situations.
Imagine I have a textbox in the main window and I also have one in a page. I need the text in the textbox in the Main window to be passed onto the textbox in the child window. How's that done?
The method used in winforms appears to only work on window to window. It throws an exception though every time you enter a value in the page declaration and run it.
Pages are opened via links, If its of any use, I'm using the modern ui theme for wpf: http://mui.codeplex.com
Main window xaml
<mui:ModernWindow x:Class="Masca.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mui="http://firstfloorsoftware.com/ModernUI"
Title="Masca Database Admin" Height="800" Width="1280" IsTitleVisible="True"
LogoData="F1 M 24.9015,43.0378L 25.0963,43.4298C 26.1685,49.5853 31.5377,54.2651 38,54.2651C 44.4623,54.2651 49.8315,49.5854 50.9037,43.4299L 51.0985,43.0379C 51.0985,40.7643 52.6921,39.2955 54.9656,39.2955C 56.9428,39.2955 58.1863,41.1792 58.5833,43.0379C 57.6384,52.7654 47.9756,61.75 38,61.75C 28.0244,61.75 18.3616,52.7654 17.4167,43.0378C 17.8137,41.1792 19.0572,39.2954 21.0344,39.2954C 23.3079,39.2954 24.9015,40.7643 24.9015,43.0378 Z M 26.7727,20.5833C 29.8731,20.5833 32.3864,23.0966 32.3864,26.197C 32.3864,29.2973 29.8731,31.8106 26.7727,31.8106C 23.6724,31.8106 21.1591,29.2973 21.1591,26.197C 21.1591,23.0966 23.6724,20.5833 26.7727,20.5833 Z M 49.2273,20.5833C 52.3276,20.5833 54.8409,23.0966 54.8409,26.197C 54.8409,29.2973 52.3276,31.8106 49.2273,31.8106C 46.127,31.8106 43.6136,29.2973 43.6136,26.197C 43.6136,23.0966 46.127,20.5833 49.2273,20.5833 Z"
ContentSource="/Pages/Home.xaml">
Child window xaml
<UserControl x:Class="Masca.Mail.Configuration"
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:mui="http://firstfloorsoftware.com/ModernUI"
mc:Ignorable="d"
d:DesignHeight="800" d:DesignWidth="1280">
<TextBox x:Name="alias" Margin="186,64,0,0" Height="18" VerticalAlignment="Top" HorizontalAlignment="Left" Width="211" FontSize="11" ></TextBox>
I am doing this so that the program will know which user is logging in ang can log who is making what changes to the database.
How I will do that is to set the DataContext property of second page to the first page. Then I can access the properties of first page in second page via Binding. For this its better to use MVVM in your application and then define the property in ViewModel of Page 1 and then define DataContext in page 2. Now you can access that property in page 2.

How can I pop a control out of it's container to make it full screen when clicked in Silverlight/Wp7?

So I have a Panorama control and the PanoramaItems are programmatically added to the control using the following template.
<UserControl>
<Grid x:Name="LayoutRoot">
<controls:PanoramaItem Name="sitePanoramaItem" Header="{Binding Name}">
<Controls:DockPanel VerticalAlignment="Stretch">
<StackPanel Orientation="Horizontal" Margin="0,10,0,0" Controls:DockPanel.Dock="Top">
<Image Source="../Images/action.png" Width="64" />
<TextBlock Text="{Binding Stats, Mode=TwoWay}" FontSize="45" Margin="15,0,0,0" />
</StackPanel>
<Grid x:Name="graphCanvas" HorizontalAlignment="Stretch" Margin="10,10,10,10"> </Grid>
</Controls:DockPanel>
</controls:PanoramaItem>
</Grid>
</UserControl>
When I click on graphCanvas what I'd like to do is sorta pop the graphCanvas out and display that fullscreen then when I click again restore it to where it was. I've been all over this site and Google and can't find anything similar to what I'm looking for.
I would still like to maintain the Panorama control functionality so that the graphCanvas is still the only one visible but you can cycle through them. Currently I have it sorta working in that I remove the Grid from the DockPanel and put it directly in the LayoutRoot while making the sitePanoramaItem collapsed. However, it's not fullscreen as the Panorama name is still visible (I guess I could hide that as well...) When I put the graphCanvas back int he DockPanel the size of the canvas is all screwed up.
I was hoping there was a simpler way.
Is it even possible?
It is possible to create the UI you describe but it's not going to be simple. You're on the right track with removing it in code and adding it the LayoutRoot and making the Panorama hidden. However you would have to code the scrolling behavior yourself and that is going to be quite tricky - especially making it feel the way to panorama does.
One trick you could try is actually layer a PivotControl on top of your Panorama and have it be collapsed by default. Also edit it's template to remove all default content eg: remove the header control, set margins to 0, etc). Then when you want to go full screen you can remove all the graphCanvases from the Panorama items and and add them to new PivotItems in the PivotControl. Then hide the Panorama and show the Pivot. This will give you scrolling capability for free and the illusion of full screen.
Having said all that I'm not sure I would recommend this. The more common approach would be to simply be to navigate to another page when the user selects an item and handle the full screen aspects there (possibly using the Pivot control again for scrolling). And when you want to leave "fullscreen" mode simply navigate back to the first page. Handling Tombstoning of the fullscreen state will be much easier with this approach for one thing.
You can try making the graphCanvas a Page and putting it in a different XAML. Then add a frame (name it InnerFrame for example) in the same place where you have the graphCanvas right now and navigate to that page with InnerFrame. When the frame is clicked, you navigate with the RootFrame of the app to your graphCanvas page. When you decide to close it, just navigate back with the RootFrame.
Hope it's clear enough :)
Edit:
Navigation in WP7 works very similar as the standard navigation in Silverlight 4, but it's a bit more restrictive. Just throw a PhoneApplicationFrame in your XAML like this:
<phone:PhoneApplicationFrame x:Name="Frame" />
This is basically the same as a Silverlight frame. All the pages you create inherit from PhoneApplicationPage by default, so they can be showed in a frame without any changes.
Your whole application actually runs on a PhoneApplicationFrame. If you take a look at your App class you will see this:
public PhoneApplicationFrame RootFrame { get; private set; }
Here's the MSDN documentation for the navigation system on WP7

Using ICSharpCode.AvalonEdit on .Net 3.5?

I'm trying to use the ICSharpCode.AvalonEdit.TextEditor control from the SharpDevelop 4.0 project in a WPF app that I'm building, but I can't seem to get it to work.
I checked out a copy of the source code from svn://svnmirror.sharpdevelop.net/sharpdevelop/trunk/SharpDevelop/src/Libraries/AvalonEdit at revision 4304. Then, I built the project using Visual Studio 2008 SP1, which succeeded without errors.
I then created a blank new WPF project, added the build DLL to the toolbox and dropped the TextEditor control onto the default empty window, like so:
<Window x:Class="AvalonEditTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:avalonedit="http://icsharpcode.net/sharpdevelop/avalonedit"
Title="Window1" Height="300" Width="300" >
<Grid x:Name="LayoutRoot">
<avalonedit:TextEditor Name="textEditor" />
</Grid>
</Window>
However, when I run the project, the form comes up completely blank. No caret, the mouse cursor stays the default pointer, and the window does not respond to keypresses.
Am I missing something, or is AvalonEdit just a little broken?
[EDIT: I'm starting to think it might be related to my specific setup. I'm running the 64-bit Windows 7 RC. Might that have something to do with it? I've tried building it for x86 only, made no difference.]
Are you sure your namespace declaration is correct?
You can try something like this:
<Window x:Class="Editor.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"
xmlns:e="clr-namespace:ICSharpCode.AvalonEdit;assembly=ICSharpCode.AvalonEdit">
<Grid>
<e:TextEditor x:Name="Editor" WordWrap="True" Height="200">
</e:TextEditor>
</Grid>
</Window>
I was able to get it to work without any issues.
The AvalonEdit TextEditor is just a view for a TextDocument model.
The problem was that a new AvalonEdit instance didn't start connected to any model instance, so there wasn't anything to edit.
The reason the code from statictype worked was that he didn't use <avalonedit:TextEditor/>, but <avalonedit:TextEditor></avalonedit:TextEditor>. This will assign an empty string to the Text property, which caused the editor to implicitly create a new document.
But this isn't relevant with recent AvalonEdit versions anymore, the editor will now always create a new TextDocument.
This works for me with the latest build
<DockPanel LastChildFill="True">
<avalonedit:TextEditor
HorizontalAlignment="Stretch"
Name="textEditor1"
VerticalAlignment="Stretch" />
</DockPanel>

Categories

Resources