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
Related
I'm trying to change the behaviour when there's on-screen keyboard presence similar to what is described on https://msdn.microsoft.com/en-gb/windows/uwp/input-and-devices/respond-to-the-presence-of-the-touch-keyboard?f=255&MSPPError=-2147217396 but not actually clarified as to how to achieve:
In some cases, there are UI elements that should stay on the screen
the entire time. Design the UI so that the form controls are contained
in a panning region and the important UI elements are static.
This is my page's basic xaml layout:
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="titlebar" Grid.Row="0" />
<RichEditBox x:Name="content" Grid.Row="1" />
</Grid>
What I want is for the titlebar element to still be visible on-screen when the touch-screen keyboard is opened. At the moment, what's happening is when the on-screen keyboard is called, the page is automatically scrolled down so that the RichEditBox appears at the very top of my view (requiring me to scroll up in order to get the titlebar back into view).
Any guidance on how to achieve the behaviour I'm after will be much appreciated.
Put both header TextBlock and RichTextBox in a Grid and then use translateY on the Grid's transform when RichTextBox receive focus.
Maybe something like this https://social.msdn.microsoft.com/Forums/windowsapps/en-US/99652e87-113c-47fa-a8e7-60f11fc9f160/virtual-keyboard-covering-textbox
http://blog.jerrynixon.com/2013/08/windows-8-xaml-manipulation-using.html?m=1
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.
I am trying to change the background color of my application in visual studio (XAML) to White (or, ApplicationPageBackgroundTheme / or whatever it's called) and it doesn't work. When I debug, it just shows a black background.
When I go to the Devices pane and select the default color theme to "Light", it makes everything on the screen white, even the text and the background.
When I change the background of the colors in xaml, at runtime it gets changed back to black!
I've searched, but haven't found any information. Is this a known bug? This has never happened before. I am using Visual Studio 2012 Ultimate.
<Page
x:Class="hjgjhgjg.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:hjgjhgjh"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Background="White">
<Grid Style="{StaticResource LayoutRootStyle}" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="False" Style="{StaticResource BackButtonStyle}" />
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="gfdgfdg" Style="{StaticResource PageHeaderTextStyle}" />
</Grid>
</Grid>
</Page>
Hard to know exactly what's going on without more of the app/styles, but an easy way to change theme is to use the Application object's RequestedTheme property.
For example, in App.xaml, set RequestedTheme="Light" as a property of the Application element:
<Application
x:Class="App1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
RequestedTheme="Light">
This can be helpful because the Light theme will then affect all pages and automatically changes text/buttons/etc. to black instead of everything being white if you only make the background color white.
This walkthrough covers this and how to override default styles with your own custom ones:
Part 1: Create a "Hello, world" app (Windows Store apps using C#/VB and XAML)
BTW, the Device pane doesn't change app settings, but simulates in design view how the app would appear with various device features/settings (screen, theme, etc.) So while it may look like one theme in the designer, it's going to revert to whatever the system/XAML/code results in when you actually run it.
If I remember correctly, you can check in the manifest in the first tab. There should be an option for ya there.
The background color of the page won't be visible, because the root Grid is opaque and have it's color set to black by default, what you can do is set the color of the Grid to a transparent one, or apply the white color to the Grid, as i see you've already applied the color to the Grid, i recommned you to quit the Style properties of the Grid and see if that helps.
I found a different way.
If you click on the grid item in the XAML code, to select it. Then look in the properties window, expand the Brush property and you will see the "Background" item. Click on the small black square to the right of the background property, this will bring up a pop up menu. Click the "Convert to Local value". This will then give you the ability to change the background with the available items underneath. I got mine to be a gradient fill from green to yellow! Ghastly! :-)
I'm pretty new to WPF and C# and am trying to help out on some GUI stuff for work. We basically have 3 sections, a LHS (left hand side) [section 1], a RHS that has a top and bottom section [section 2 and section 3]. Looks like this
1 | 2
1 | -
1 | 3
They want a way to shrink each section with a button click. Currently the | and - are spacer items and can be dragged (Edit: this is done using a gridsplitter which they don't like). I did a little research and saw there are expander items and accordion items. I didn't know if either could be used for this scenario, and what would be the least hassle. In trying each just a bit, some additional questions for the controls come to mind since I'm not familiar with them.
Expander:
By shrinking section 1, would it make section 2 and 3 then take up the whole screen? Or can this only be done with an Accordion?
Is it hard/easy to change the <> icons to +- icons? If so, any tutorial out there?
Accordion:
Can the <> be changed to +-? If so, any tutorial out there?
Can the default color of blue be changed?
TIA
An Expander sounds like a suitable option for your situation. Fortunately it's included with WPF out of the box, unlike the Accordion control. But I found this question related to the Accordion control and thought it'd be useful for you to check out.
To change the appearance of the Expander toggle button you'll want to modify its control template. Changing the template to display plus or minus instead of arrows isn't too tough. If you visit the link you'll see you're going to want to change ExpanderToggleButton portion of the template.
Since you just want to change from using the arrows to using plus/minus signs you can simply change the Path data for collasped/expanded arrow. You can look here for more infortmation on drawing simple shapes with path.
Here is an example of someone modifying the control template of the Expander. It's for a different tweek in appearance, but it should be useful should you decide to go this route.
EDIT:
Really simple example (without the change in ToggleButton appearance) to get an idea of how to collaspe and save real estate:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColunmDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Expander Name="Section1" Grid.RowSpan="2" Grid.Colunm="0" ExpandDirection="Left">
<!-- Stuff goes here -->
</Expander>
<Expander Name="Section2" Grid.RowSpan="0" Grid.Colunm="1"
<!-- Stuff goes here -->
</Expander>
<Expander Name="Section3" Grid.RowSpan="1" Grid.Colunm="0"
<!-- Stuff goes here -->
</Expander>
</Grid>
You could use GridSplitter. The user can drag them to change the size. Not a click - a drag.
<GridSplitter Grid.Row="1" Grid.Column="1"
Width="3" Background="Purple" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False" >
I hope you can help me with my problem. It's about a custom designer for a WF 4.0 activity, but the problem is essentially in the WPF of the designer.
Some background
I've created a custom WorkFlow activity to send e-mails. For the custom designer for the activity, I've previously been using regular Textboxes for the "Subject" and "Body" of the e-mail, but I'd like to use the ExpressionTextBox to easily bind it to the InArguments of the activity. The ExpressionTextBoxes are in a grid, and this grid is on a StackPanel.
I've set the the MinWidth, MaxWidth and Margin of the ExpressionTextBoxes to fit with the other controls, and in the Visual Studio Designer (viewing the custom activity designer, not the actual WorkFlow) everything looks as it should.
<sapv:ExpressionTextBox Grid.Column="1" Grid.Row="2" Height="Auto" HorizontalAlignment="Right" Margin="4, 4, 4, 4"
Expression="{Binding Path=ModelItem.Subject, Mode=TwoWay, Converter={StaticResource ArgumentToExpressionConverter}, ConverterParameter=In}"
ExpressionType="{x:Type TypeName=sys:String}" OwnerActivity="{Binding Path=ModelItem}" VerticalAlignment="Center" MaxWidth="176" MinWidth="175" />
The problem
When used, initially it also looks as it should, but when the ExpressionTextBoxes are edited, they shrink into being really small. When text is entered, the control expands to fit the text, until it reaches its MaxWidth. When the editing ends, it goes back to it's MaxWidth. I'd prefer if it stayed the same size, regardless of being in edit-mode or not.
If you can't see it, open the image here
What I've tried
I've mostly been doing WinForms, and I'm pretty inexperienced with WPF, so I don't know if there are some funky properties or other settings that I've missed. I've tried setting width-properties of the parent controls (StackPanel and Grid), I've tried setting just the width (no min/max), but it seems to shrink regardless of what I set.
If you would like more information or code, please don't hesitate to ask.
Update
As you can see in the comments to Maurices answer, I figured out how to avoid the problem by removing the horizontalAlignment property, and then using margins to align it to the right. But I'm not going to mark an answer, until there's an explanation of why this behaviour happened in the first place. My XAML was almost identical to what Maurice posted, so there must be something wrong elsewhere.
The XAML for the ExpressionTextBox looks fine to me and when I try the following designer it works just fine.
<sap:ActivityDesigner x:Class="WorkflowConsoleApplication2.MyActivityDesigner"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation"
xmlns:sapc="clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation">
<sap:ActivityDesigner.Resources>
<sapc:ArgumentToExpressionConverter x:Key="ArgumentToExpressionConverter" />
</sap:ActivityDesigner.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Label Content="Subject"
Grid.Row="2"
Grid.Column="0"/>
<sapv:ExpressionTextBox Grid.Column="1"
Grid.Row="2"
Height="Auto"
HorizontalAlignment="Right"
Margin="4, 4, 4, 4"
Expression="{Binding Path=ModelItem.Subject, Mode=TwoWay, Converter={StaticResource ArgumentToExpressionConverter}, ConverterParameter=In}"
ExpressionType="{x:Type TypeName=sys:String}"
OwnerActivity="{Binding Path=ModelItem}"
VerticalAlignment="Center"
MaxWidth="176"
MinWidth="175" />
</Grid>
</sap:ActivityDesigner>
So I suspect the problem is possibly in your grid definition.