WPF Ribbon obscures the titlebar - c#

I am making a WPF program in C# in Visual Studio 2013 and I am using the Ribbon component. So far I've only written XAML for the Ribbon and a few buttons on it, and have only modified the C# file by adding using System.Windows.Controls.Ribbon; and subclassing RibbonWindow instead of Window. I remembered to add a reference to the required .dll in Visual Studio for the Ribbon.
When I run the program, the titlebar is really covered up:
Setting the Ribbon to have HorizontalAlignment="Left" makes it look like this:
I'm pretty new to WPF, C# and Visual Studio, so I don't have any idea what's wrong here. I have pasted my XAML code below (omitting the tab groups and application menu):
<RibbonWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Custom="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon" x:Class="SwaagPaiNT.MainWindow"
Title="Swaag PaiNT" Height="350" Width="525">
<Grid>
<Custom:Ribbon HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Custom:Ribbon.HelpPaneContent>
<Custom:RibbonButton Name="what" ToolTip="whachunee" />
</Custom:Ribbon.HelpPaneContent>
<Custom:Ribbon.QuickAccessToolBar>
<Custom:RibbonQuickAccessToolBar>
<Custom:RibbonButton x:Name="SAVE" ToolTip="BLAZE IT"/>
<Custom:RibbonSplitButton x:Name="Undo">
<Custom:RibbonSplitMenuItem Header="CANNOT UNDO MORE" />
</Custom:RibbonSplitButton>
</Custom:RibbonQuickAccessToolBar>
</Custom:Ribbon.QuickAccessToolBar>
</Custom:Ribbon>
</Grid>
</RibbonWindow>
This is a Windows 7 Professional 32-bit system.

But your problem is that everything is painted as it should be - Ribbon knows nothing about those close and minimize buttons - it is just given some space to be painted on.
To change its looks and behaviours either use templates, create a user control or directly subclass the Ribbon(it is not the usual way, but sometimes you really want to encapsulate your control).
<Window>
<Grid>
...
<MyRibbon Grid.Row="0" .../>
<Ribbon Grid.Row="1" Template={StaticResource MyRibbonTemplate} .../>
</Grid>
</Windows>
EDIT:
Sorry, I was a bit unattentive and never looked at RibbonWindow. I've actually never seen or used RibbonWindow. What I've written before was nearly completely wrong. Thank you for pointing it. Now to the problem.
Such behaviour indicates that the Ribbon control is not integrated with the RibbonWindow as it should be, so you could:
Try MSDN example in place of your code. I don't see any fundamental differences, but who knows. If it works - we will know that there is some simple problem in XAML or code-behind. If not - try next
Try to change the targeted .NET version(Try the highest possible).
Try to change the visual style in Windows(simplified to Aero or to Classic).
There are could be some problems with manually changed inheritance of your windows class to RibbonWindow . Window's code-behind file is actually partial class. I am not sure how it may work in such a way, but that's a possible direction to look in.
P.S.: I will give a try to it by myself later and write about any results.
EDIT:
I've downloaded ribbon controls libraries and tried the MSDN example in Windows 8.1 with Visual Studio 2013 for .NET 4.5 - everything worked fine. But when I changed the targeted framework to 4.0 the Ribbon control blackened the entire line with title. Nonetheless I'll try the example in Win 7 with VS2010.
EDIT:
Such code worked for me in Win7 VS2010 targeting .NET 4.0:
<ribbon:RibbonWindow x:Class="SwaagPaiNT.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
Title="MainWindow"
x:Name="RibbonWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ribbon:Ribbon x:Name="Ribbon" Title="Ribbon Title">
<ribbon:Ribbon.HelpPaneContent>
<ribbon:RibbonButton />
</ribbon:Ribbon.HelpPaneContent>
<ribbon:Ribbon.QuickAccessToolBar>
<ribbon:RibbonQuickAccessToolBar >
<ribbon:RibbonButton x:Name="QATButton1"/>
<ribbon:RibbonButton x:Name="QATButton2"
/>
</ribbon:RibbonQuickAccessToolBar>
</ribbon:Ribbon.QuickAccessToolBar>
<ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonApplicationMenu >
<ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon"
x:Name="MenuItem1"
/>
</ribbon:RibbonApplicationMenu>
</ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonTab x:Name="HomeTab"
Header="Home">
<ribbon:RibbonGroup x:Name="Group1"
Header="Group1">
<ribbon:RibbonButton x:Name="Button1"
Label="Button1" />
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
</ribbon:Ribbon>
</Grid>
</ribbon:RibbonWindow>
using Microsoft.Windows.Controls.Ribbon;
namespace SwaagPaiNT
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : RibbonWindow
{
public MainWindow()
{
InitializeComponent();
}
}
}
The only real difference between your code and the shown above is in the
<RibbonWindow
...
xmlns:Custom="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"
Your code uses xml schema to identify ribbon and not the clr-namespace as MSDN shows,
also RibbonWindow is used without any namespace prefix.
I hope that it will help.

Related

Unable to get the "extensions:TextBoxMask.Mask" property to work in a Universal Windows Platform application using VS 2017

Page
x:Class="App7.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App7"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions">
<TextBox extensions:TextBoxMask.Mask="9a9a-a9a*"
Header="Text box with Mask 9a9a-a9a* (9 allows from 0 to 9, a allow from a to Z and * allows both a and 9)"
HeaderTemplate="{StaticResource HeaderTemplate}"
Style="{StaticResource MaskedTextBoxStyle}" />
<TextBox Grid.Row="1"
extensions:TextBoxMask.Mask="+1999-9999"
extensions:TextBoxMask.PlaceHolder=" "
Header="Text box with Mask +1999-9999 and placeHolder as space (placeholder represents the characters the user can change on runtime)"
HeaderTemplate="{StaticResource HeaderTemplate}"
Style="{StaticResource MaskedTextBoxStyle}" />
<TextBox Grid.Row="2"
extensions:TextBoxMask.CustomMask="5:[1-5],c:[a-c]"
extensions:TextBoxMask.Mask="a5c-5c*9"
Header="Text box with CustomMask in case you want to define your own variable character like a,9 and * , mask: a5c-5c*9, 5: [1-5], c: [a-c]"
HeaderTemplate="{StaticResource HeaderTemplate}"
Style="{StaticResource MaskedTextBoxStyle}" />
</Grid>
The code shown above comes straight out of Microsoft's example of how to use the TextBoxMask.Mask property in a UWP application.
Yet I get the error message: "The name "TextBoxMask" does not exist in the namespace using:Microsoft.Toolkit.Uwp.UI.Extensions" for each occurrence of "extensions:TextBoxMask.Mask"
I think I'm doing everything correctly, following Microsoft's documentation and using their sample program. My system meets the requirements to use Microsoft.Toolkit.Uwp.UI.Extensions in Visual Studio 2017:
I used "Manage NuGet Packages …" to
install Microsoft.Toolkit.Uwp.UI.Extensions into Visual Studio
I Have Windows version 10.0.18262, which is higher than the minimum required version of 10.0.16299.
I Created a simple UWP app, in Visual Studio 2017 using the example from Microsoft, without making a single change to the code in the example.
I peaked at the source code at https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI/Extensions/TextBoxMask, seeing that the controls I want are, in fact, present.
I have exhausted all of my resources to solve this technical problem. If I'm doing something wrong, I'm simply not seeing my mistake.

UWP Window content doe not resize with window

I started to develop my first UWP App (just for fun). While debugging I noticed that the content would not adapt correctly when resizing the window. I started over with an empty app to see, if it was a general problem: it is.
TL;DR:
Why does this happen when resizing the window larger (beyond 1246x936 px)? Notice the issue on the very right.
That's the XAML code:
<Page
x:Class="App2.MainPage"
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:local="using:App2"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
mc:Ignorable="d">
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="Blue" />
<Grid Grid.Column="1" Background="Red" />
</Grid>
</Page>
Little late but for posterity as this issue still comes up:
This behavior is most likely related to UWP and your video drivers. I have had this issue and it also extended into official Microsoft Windows Store UWP apps (Weather, Calc, etc) verifying it was not something I caused.
If you're lucky and have video driver updates, install them and it will likely fix the issue (it did for me on two different computers, one with an AMD card the other with Intel graphics). If your video drivers are out of support there may not be a path forward (although the app would work on workstations whose drivers did render it correctly).
There are a few tips on this thread that -may- work for workarounds for yourself (but aren't ideal if you're distributing your program and actually need it to render consistently).
https://superuser.com/questions/1376099/windows-10-uwp-not-rendering-fully
Run Performance Options (SystemPropertiesPerformance.exe) and uncheck "Show window contents while dragging". Then reboot.
Resize the window, then close and reopen the application, and it might then be of the right size.

WPF window border acting weird with Ribbon Control

I am using the Ribbon control in WPF and I noticed there are 2 different versions.
using Microsoft.Windows.Controls.Ribbon;
If I use this one in my xaml and class, my whole window will be in a very old windows style.
using System.Windows.Controls.Ribbon;
If I use this one in my xaml and class, my Ribbontabs suddenly won't fill correctly anymore.
When I use both of them. With this:
<ribbon:RibbonWindow x:Class="WPSDashboard.Views.ShellWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ribbon="clr-namespace:System.Windows.Controls.Ribbon;assembly=System.Windows.Controls.Ribbon"
xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
xmlns:prism="clr-namespace:Microsoft.Practices.Prism.Regions;assembly=Microsoft.Practices.Prism"
Title="WPSDashboard"
x:Name="RibbonWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Ribbon Region -->
<r:Ribbon x:Name="Ribbon" prism:RegionManager.RegionName="RibbonRegion">
<r:Ribbon.ApplicationMenu>
<r:RibbonApplicationMenu SmallImageSource="Images\SmallIcon.png">
<r:RibbonApplicationMenuItem Header="Exit"
x:Name="MenuItemExit"
ImageSource="Images\Exit.png"
Command="{Binding ExitCommand}"/>
</r:RibbonApplicationMenu>
</r:Ribbon.ApplicationMenu>
</r:Ribbon>
<Grid x:Name="ClientArea" Grid.Row="1">
<!-- Workspace Region-->
<GridSplitter HorizontalAlignment="Left" Width="2" Grid.Column="1"/>
<ContentControl x:Name="WorkspaceRegion" Grid.Column="1" prism:RegionManager.RegionName="WorkspaceRegion" />
</Grid>
</Grid>
</ribbon:RibbonWindow>
My Ribbontabs will load but the window now looks like this:
I can't click on close and minimize and maximize. <---
How can I get the border to be normal instead of small?
I can't close my windows this way.
I found the best way to make it look and work good!
Instead of the tags <ribbon:RibbonWindow on the beginning of the xaml,
Make it <Window .
Also add this part:
xmlns:r="clr-namespace:System.Windows.Controls.Ribbon;assembly=System.Windows.Controls.Ribbon"
Then in your class delete your : RibbonWindow (If it's there)
If that doesn't work and you don't need the quick access toolbar, this may help:
Go back to your XAML, and change the Ribbon margin to -22 :
<r:Ribbon x:Name="Ribbon" prism:RegionManager.RegionName="RibbonRegion" Margin="0,-22,0,0" >
Now my application looks like this(with the -22 margin) :
Now it looks like a normal application without an ugly windows 98 or 2000 style and the close button, minizime button and maximize button are back!
I personally would, either play on margins, or better than that, investigate the style of that ribbon and change it the way it helps my needs

How to get started with Microsofts RibbonControlsLibrary?

I'm new to WPF programming and decided to give it a shot by trying out some ribbon control libraries.
The library that looks best for now is the Microsoft RibbonControlsLibrary. You can get it on the ribbon licensing page.
So far I've started a new project, added the control to the windows, but them I'm stuck: This is the code so far:
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="808" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" xmlns:my1="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary" WindowStyle="SingleBorderWindow">
<Grid>
<my1:Ribbon HorizontalAlignment="Left" Name="ribbon1" VerticalAlignment="Top" Height="165" Width="786" ShowQuickAccessToolbarOnTop="False" WindowIconVisibility="Visible" DataContext="{Binding}" Margin="0,-20,0,0">
<my1:Ribbon.ApplicationMenu>
<my1:RibbonApplicationMenu Visibility="Hidden" IsEnabled="True" />
</my1:Ribbon.ApplicationMenu>
<my1:RibbonTab Label="Tab1" Name="rtab1" >
</my1:RibbonTab>
<my1:RibbonTab Label="tab2" Name="rtab2"/>
</my1:Ribbon>
</Grid>
</Window>
Questions:
1) Where can I find samples for this ribbon control? I've tried googling, but came up with nothing useful.
2) How to add items to specific ribbon tabs? I'm lost in all these properties in the property grid. So far I havent found a designer for that purpose.
3) How can I switch the designer to show me what icons/button/... I placed on TabPage2?
(FYI: The fluent ribbon library does not seem to work for me, because I can't get rid of the ApplicationMenu.)
Found a great sample/tutorial:
http://windowsclient.net/downloads/folders/hands-on-labs/entry76491.aspx
The sample provides a manual with explanations and some test projects with step by step instructions to implement the ribbon control.
Though I'm totally new to WPF, I managed to extract necessary classes from the sample to provide a ribon based menu in my program.

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