How can I center the title of a WPF RibbonWindow? - wpf

I want to center the title of my RibbonWindow, and not have it aligned on the side.
This thread said it had an answer:
Center WPF RibbonWindow Title via XAML Code
but it didn't work.
Bellow is an image and the corresponding code.
<RibbonWindow x:Class="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">
<Grid>
<Ribbon>
<Ribbon.TitleTemplate>
<DataTemplate>
<TextBlock TextAlignment="Center" HorizontalAlignment="Stretch" Width="{Binding ElementName=Window, Path=ActualWidth}">ApplicationTitle
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="0" Color="MintCream " BlurRadius="10" />
</TextBlock.Effect>
</TextBlock>
</DataTemplate>
</Ribbon.TitleTemplate>
</Ribbon>
</Grid>
</RibbonWindow>
I am using VS 2012, with .NET 4.5 and the included System.Windows.Controls.Ribbon assembly.

Had a bad experience with using RibbonControlsLibrary for WPF. It has issues not only around title centering. It also breaks window rounding corners at the top, icon and title goes out of the screen when maximized, and personally I haven't found any chance to program ribbon group dialog. All of this lead me to searching for an alternative, and I have found a Fluent Ribbon Controls Suite
Download source code and build it for .NET 4.5 (I did it with absolutely no issues).

The ElementName in the binding (Width="{Binding ElementName=Window, Path=ActualWidth}") needs to match the name of the RibbonWindow. So, in this case you need "Window" for the name:
<RibbonWindow x:Class="Window1" x:Name="Window"
... />

Related

PlaceholderText is not accessible XAML

I am new to XAML and WPF.
I am trying to add a placeholder to my textbox but I got this error: "The property 'PlaceholderText' was not found in type 'TextBox'" and "The member "PlaceholderText" is not recognized or is not accessible".
When I tried to type PlaceholderText, it didn't even show up in the auto-complete drop down list. "Header" has the problem.
I am using VS 2015 community and .NET Framework 4.5.2
Below is my code which I got it from https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.textbox#Examples
<Window x:Class="QuickGarbageSort.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:MyTestApp"
mc:Ignorable="d"
Title="MyTestApp" Height="550" Width="800">
<StackPanel>
<TextBlock Text="What's your name?"/>
<StackPanel Orientation="Horizontal" Margin="0,20,0,20">
<TextBox x:Name="nameInput"
Header="Enter your name:" PlaceholderText="Name"
Width="300" HorizontalAlignment="Left"/>
<Button Content="Hello button" Click="Button_Click"/>
</StackPanel>
<TextBlock x:Name="greetingOutput"/>
</StackPanel>
The documentation you got the code from is a documentation for Windows.UI.Xaml.Controls.TextBox, this is the textbox control used in Universal Windows Applications. This has a property called PlaceholderText
The WPF one is System.Windows.Controls.TextBox, this is different and doesn't have a PlaceholderText property. In order to have something like the UWP placeholder text in WPF, you have to implement it yourself or use a third party library which offers a control with this functionality.

Is there a way to touch-enable scrolling in a WPF ScrollViewer?

I'm trying to create a form in a WPF application that will allow the user to use iPhone-like gestures to scroll through the available fields. So, I've put all my form controls inside a StackPanel inside a ScrollViewer, and the scrollbar shows up as expected when there are too many elements to be shown on the screen.
However, when I try to test this on my touch-enabled device, a panning gesture (placing a finger down on the surface and dragging it upward) does not move the viewable area down as I would expect.
When I simply put a number of elements inside a ListView, the touch gestures work just fine. Is there any way to enable the same kind of behavior in a ScrollViewer?
My window is structured like this:
<Window x:Class="TestTouchScrolling.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
<Grid>
<ScrollViewer Name="viewer" VerticalScrollBarVisibility="Auto">
<StackPanel Name="panel">
<StackPanel Orientation="Horizontal">
<Label>Label 1:</Label>
<TextBox Name="TextBox1"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label>Label 2:</Label>
<TextBox Name="TextBox2"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label>Label 3:</Label>
<TextBox Name="TextBox3"></TextBox>
</StackPanel>
<!-- Lots more like these -->
</StackPanel>
</ScrollViewer>
</Grid>
You should use the attached properties:
ScrollViewer.PanningMode
ScrollViewer.PanningDeceleration
ScrollViewer.PanningRatio
The PanningMode defaults to None in the ScrollViewer default style, but setting it to another value will enable touch scrolling. I'm currently investigating using this feature in my app and am looking for a good deceleration and ratio value... I'll probably just have to test them out to find something that works well.
If you are using .NET 4.0, there is a cool thing recently released by Microsoft team!! They ported all those nice Surface controls to Win7. SurfaceScrollViewer is really cool like iphone one. Install this toolkit and start a SurfaceWin7Touch project from VS2010 project template
http://www.microsoft.com/en-us/download/details.aspx?id=26716

How to set up Avalon docking manager to resize like VS?

I am using Avalon in my WPF app. I want a window similar to that of Visual Studio, Tools on the left, then the documents in the middle and the Properties on the right. I managed to do that with this code:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ad="clr-namespace:AvalonDock;assembly=AvalonDock"
xmlns:local="clr-namespace:WpfApplication1"
Title="Window1" Height="600" Width="800">
<Grid>
<ad:DockingManager x:Name="dockManager" RenderTransformOrigin="0,0">
<ad:ResizingPanel Orientation="Vertical">
<ad:ResizingPanel Orientation="Horizontal" >
<ad:DockablePane>
<ad:DockableContent Title="Toolbox" Width="100">
<TextBox />
</ad:DockableContent>
</ad:DockablePane>
<ad:DocumentPane x:Name="documentsHost" OverridesDefaultStyle="True">
<ad:DocumentContent Title="File1.doc">
<RichTextBox/>
</ad:DocumentContent >
<ad:DocumentContent Title="File2.doc">
<RichTextBox/>
</ad:DocumentContent >
</ad:DocumentPane>
<ad:DockablePane>
<ad:DockableContent Title="Project Explorer">
<TextBox />
</ad:DockableContent>
</ad:DockablePane>
</ad:ResizingPanel>
<ad:DockablePane>
<ad:DockableContent Title="Output">
<TextBox />
</ad:DockableContent>
</ad:DockablePane>
</ad:ResizingPanel>
</ad:DockingManager>
</Grid>
</Window>
The problem is that when I resize any of them, they all resize to keep their proportion. This is not what I want, I want it to be like VS where just the document window in the middle resizes with.
I would appreciate any help since I have been fighting with this for a few days now :(
Funny, because I started with the Avalon Tutorial from there and replaced the contents for the window with your XAML (very similar by the way). And the problem you describe does not happen.
Then I realized that the tutorial uses AvalonDock 1.1.1692, while the latest release is 1.1.2691 and has the behaviour you describe.
A look at the source code shows an attached property defined by ResizingPanel called ResizeWidth, which is 1* by default => the auto resize.
If you change the first DockablePane like this:
<ad:DockablePane ad:ResizingPanel.ResizeWidth="100" >
You get the behaviour you wanted.
It's never great to use hard-coded widths, so I changed it to
<ad:DockablePane ad:ResizingPanel.ResizeWidth="{Binding ElementName=dc, Path=Width}" >
after naming the inner DockableContent dc

WPF Textbox & Borders - curious resizing behavior

The following XAML produces a window with strange behavior around the textbox:
<Window x:Class="WpfSandbox.CuriousExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="CuriousExample" Height="300" Width="300">
<DockPanel Margin="15">
<TextBox BorderThickness="1" BorderBrush="#FF000000"></TextBox>
</DockPanel>
</Window>
What happens, at least during my limited testing, is that the textbox renders with an inset border pattern (top/left is black, right/bottom is grey). However, when you resize to any position except the original, the entire textbox border goes to black. Whenever you return the window to the exact number of on-screen pixels the form had when it first loaded, it's inset again.
I'm guessing it isn't pixel snapping as I can easily correct the problem with this code:
<Window x:Class="WpfSandbox.CuriousExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="CuriousExample" Height="300" Width="300">
<DockPanel Margin="15">
<Border BorderThickness="1" BorderBrush="#FF000000">
<TextBox BorderThickness="0" ></TextBox>
</Border>
</DockPanel>
</Window>
Anyone care to venture an explanation as to what I'm seeing? Or is it all in my head?
Like I said, the above workaround can resolve this problem - just trying to understand what is happening here.
Thanks,
-Scott
You can force the application to use the vista theme (aero)
Open your app.xaml and put something like:
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/PresentationFramework.Aero;V3.0.0.0;31bf3856ad364e35;component/themes/aero.normalcolor.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Don't forget to put the PresentationFramework.Aero reference into your project.
With this, you will se you application in XP like in Vista.
Hmm... are you running into a focus issue? I loaded the Aero theme, and I'm seeing your TextBox inset when the TextBox has focus or is moused-over. You can see this pretty clearly when you add a second TextBox like so:
<DockPanel Margin="15">
<TextBox BorderThickness="1" BorderBrush="#FF000000"></TextBox>
<TextBox BorderThickness="1" BorderBrush="#FF000000"></TextBox>
</DockPanel>
The default Style for Aero uses a ControlTemplate which sets the TextBox's border to use the ListBoxChrome which looks to set some extra properties when the control has Focus or is moused over.
Alternately, the default Style for the Luna theme binds the containing Border's BorderBrush directly to the TemplateBinding, which means that this is always respected (and why it works in XP/Luna and not in 2008 or Vista).

combine image and solidcolor background for a WPF Form

I have a WPF form that I am building. I want to specify a background image for the window, which is easy enough. However, I also want to specify a color so that the area of the form not covered by the image is white. I've seen some examples that show using two different background brushes, but when I try that VS.NET tells me I can't have multiple brushes.
This is the XAML I'm using
<Window x:Class="Consent.Client.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cal="http://www.codeplex.com/CompositeWPF"
Title="Shell" WindowStyle="None" WindowState="Maximized" FontSize="24">
<Window.Background>
<ImageBrush AlignmentX="Left" AlignmentY="Top" Stretch="None" TileMode="None" ImageSource="logo_header2.png" />
</Window.Background>
<ItemsControl Background="White" VerticalAlignment="Center" cal:RegionManager.RegionName="MainRegion" >
</ItemsControl>
</Window>
This works great for the image, but the background not covered by the image is black. How do I make it white? Changing the image itself is not really an option.
Try this (I removed everything not directly relevant to the question to make the code clearer):
<Window x:Class="Consent.Client.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="White">
<Grid>
<Grid.Background>
<ImageBrush ImageSource="logo_header2.png" />
</Grid.Background>
<ItemsControl>
</ItemsControl>
</Grid>
</Window>
Basically, set the window's background to the behind the image color, than put a grid in the window and give the grid you background image, put everything inside the grid instead of directly in the window.
As an Extension to Nirs answer. If you want to have margins around your content, but let the background image be able to fill the whole window, you can also stack backgrounds using borders:
<Window x:Class="Consent.Client.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="White">
<Border Padding="10">
<Border.Background>
<ImageBrush ImageSource="logo_header2.png" />
</Border.Background>
<!--<Your content >-->
</Border>
</Window>
I'm not sure you can combine brushes. You could play around with ImageBrush, or you could forget the "background" and stack the items on top of each other in a Grid:
<Window x:Class="Consent.Client.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cal="http://www.codeplex.com/CompositeWPF"
Title="Shell" WindowStyle="None" WindowState="Maximized" FontSize="24">
<Grid>
<Image Source="logo_header2.png" Stretch="None" VerticalAlignment="Top" />
<ItemsControl Background="White" VerticalAlignment="Center" cal:RegionManager.RegionName="MainRegion" >
</ItemsControl>
</Grid>
</Window>

Resources