WPF Ribbon ApplicationMenu Alignment on the Right? - wpf

When going through a tutorial, the 'ribbon.ApplicationhMenu' always comes up on the left hand of the screen, rather than the right, as it does in Office 2007, Paint (on Windows 7), and WordPad (on Windows 7).
Is there some way to change this?
Thank you
(Example of the issue is here http://cid-a45fe702de180b23.skydrive.live.com/self.aspx/Public/RibbonAnnoyance.png (as a new user, I can only post 1 hyperlink))

Thank you for your reply. Yes, I am using the Ribbon / FluentUI from the Office Team
Sorry, I was unable to log-on to the 'M.Ahrens' account that I create about 22 hours ago (it wasn't an OpenID one, and I am unsure how to log on without an OpenID, so I am now made my self an OpenID).
I was unable to post the link to the tutorial previously (as a new user can only post 1 hyperlink), but here it is:
http://www.renevo.com/blogs/dotnet/archive/2009/02/10/your-first-wpf-ribbon-application.aspx
It doesn't just happen in this tutorial, it happens in every other ribbon app that I make (including Microsoft samples). I have tried the flowing:
*HorizontalAlignment="Right"
*HorizontalContentAlignment="Right"
*FlowDirection="RightToLeft" (makes the ApplicationMenu go to the right, but switches the columns around)
*Default
But it doesn't seem to make a different, the ApplicationMenu is still on the 'left' hand side (unless I maximize the window).
M.Ahrens
+++++++++++++++++++++++++
Edit (added a code sample):
<r:RibbonWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
Height="400" Width="400">
<DockPanel>
<r:Ribbon DockPanel.Dock="Top">
<r:Ribbon.ApplicationMenu>
<r:RibbonApplicationMenu>
</r:RibbonApplicationMenu>
</r:Ribbon.ApplicationMenu>
</r:Ribbon>
</DockPanel>
</r:RibbonWindow>

Are you using the WPF Ribbon from the OfficeUI team?
We are using that one and don't get anything happening like that. Possibly post some of the XAML you are using to create the App Menu.
EDIT: Having a look at your code, i suspect the DockPanel is being a bit silly.
This is how we structure out layout to add the ribbon
<r:RibbonWindow x:Class="MyAssembly.Main"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
Title="The Title"
Height="450"
Width="600" >
<Grid x:Name="grdMain">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<r:Ribbon Title="The Title" x:Name="ribbonMain" Grid.Row="0">
<!--Quick Access Toolbar-->
<r:Ribbon.QuickAccessToolBar>
<r:RibbonQuickAccessToolBar>
</r:RibbonQuickAccessToolBar>
</r:Ribbon.QuickAccessToolBar>
<!--Application Menu-->
<r:Ribbon.ApplicationMenu>
<r:RibbonApplicationMenu x:Name="mnuApplication">
<!--App Menu Items-->
<r:RibbonApplicationMenu.Items>
</r:RibbonApplicationMenu.Items>
<!--App Menu Recent Item List-->
<r:RibbonApplicationMenu.RecentItemList>
<StackPanel>
<r:RibbonLabel>Recent Items</r:RibbonLabel>
<r:RibbonSeparator/>
<r:RibbonHighlightingList x:Name="lstRecentItems"/>
</StackPanel>
</r:RibbonApplicationMenu.RecentItemList>
<!--App Menu Footer-->
<r:RibbonApplicationMenu.Footer>
</r:RibbonApplicationMenu.Footer>
</r:RibbonApplicationMenu>
</r:Ribbon.ApplicationMenu>
</r:Ribbon>
<Grid Grid.Row="1">
<!--This is the aread under the ribbon. Place layout things inside of this space-->
</Grid>
</Grid> </r:RibbonWindow> <!--This is closing tag is on this line as SO is being silly-->
As I mentioned, I suspect the DockPanel is being just abit silly, tho it's a bit late (12am) for me to test it right now.
Try copying this code into your XAML and see what happens.
To be frank, I don't trust DockPanels a whole lot, Grids work much better for me :D

Related

WPF Application for sharing part of the screen with Teams works nice but menus are shown as empty boxes

I've written a small application in WPF that shows 2 windows. One, which is basically a transparent window with no borders, for sharing a part of my screenin MS Teams and one with some resizing options.
I have a very big screen on my PC and when I share my desktop I see all participants starting to move closer to their screen because the image is sized down to their screen and makes it very hard to read.
I've seen several application solving this problem but most of them are a bit cumbersome. I'm a developer so I though: "I can do that too".
Now when I share my partial window everything works fine but.... when I f.i. right click somewhere to call the context menu, I see the menu perfectly but on the shared screens a box with no content appears.
This is probably a tough one but who can tell me what to do. Here's the mainpage.xaml:
<Window x:Class="PartialShare.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"
Title="Partial Share (share this one)"
x:Name="PartialShare"
d:AllowsTransparency="true"
mc:Ignorable="d"
BorderThickness="1"
BorderBrush="Blue"
MaxHeight="{x:Static SystemParameters.MaximizedPrimaryScreenHeight}"
Height="1000"
Width="1000"
ResizeMode="CanResizeWithGrip"
Opacity="1"
Topmost="true"
AllowsTransparency="True"
WindowStyle="None">
<WindowChrome.WindowChrome>
<WindowChrome
CaptionHeight="30"
CornerRadius ="10"
ResizeBorderThickness="20"
GlassFrameThickness="0">
</WindowChrome>
</WindowChrome.WindowChrome>
<Window.Background>
<SolidColorBrush Opacity="0.0" Color="Transparent" />
</Window.Background>
</Window>
This is what I see:
And this is what they see in MS Teams:
The project is open source on GitHub. You can download it here: https://github.com/PaulSinnema/PartialShare

MahApps.Metro 0.13.1: Show window commands without display the titlebar

I am developing an application in WPF using MahApps.Metro 0.12.1. In this application I don't show the titlebar, staying visible minimize, maximize and close commands. Below I show the code:
<controls:MetroWindow xmlns:views="clr-namespace:View.Views"
xmlns:titleBar="clr-namespace:View.Views.TitleBar"
x:Class="View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
GlowBrush="{DynamicResource AccentColorBrush}"
ShowWindowCommandsOnTop="False"
ShowTitleBar="False"
Title="MainWindow" Height="400" Width="600"
AllowsTransparency="False">
<Grid>
...
</Grid>
The problem arises when I upgrade to the version 0.13.1 of MathApps.Metro, where these commands are not displayed, forcing me to re-establish the titlebar to display the commands again ShowTitleBar="True" and this is what I do not want: display the titlebar.
I was looking at the release notes of MathApps.Metro 0.13.1 and reports that changes were made to the section of the titlebar​​, but no further details are given.
My questions are: Is there a simple way to display the minimize, maximize and close commands without showing the title bar? What is the best way to do this?
thanks
you can put the window buttons directly in your main window like this
<Grid>
<!-- the window button commands -->
<Controls:WindowButtonCommands Panel.ZIndex="1"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Height="{Binding TitlebarHeight, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Controls:MetroWindow}}}" />
...
</Grid>
hope that helps
Is there a simple way to display the minimize, maximize and close commands without showing the title bar? What is the best way to do this?
Actually not very simple, but possible. Basically you need to create your own Style template and override the ContentPresenter for your window to do so.
You may take a look at this question.
Besides that, this post will guide you through the process of designing your own titlebar.

AvalonDock Now Loses Alt Key Adornments

I've been using AvalonDock (2.0) for some time now, being key for managing documents in an IDE. In the last month or so, I've noticed that Alt key adornments are no longer showing up for controls within AvalonDock, though the Alt key commands are executing as expected. See the image below where the Alt key adornments are showing up in the menu, but not for the buttons inside AvalonDock:
What is particularly interesting about this issue, that it appears to be triggered by an environmental setting or condition.
As demonstrated in this video (at 2:07), the alt key adornments are working for a control within AvalonDock. But, if I now use the very same executable I used in that video, the alt key adornments do not work.
I'm currently using build 2.0.1746, but I also tried build 2.0.2000 (with the Xceed namespace) and found the same issue. I also tried the version packaged with the Xceed Extended WPF Toolkit, and found that the issue persists.
I also built a very simple test application which loads a couple of documents of type Item, where Item is a simple class with a Name property:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
xmlns:avalonDock="clr-namespace:Xceed.Wpf.AvalonDock;assembly=Xceed.Wpf.AvalonDock"
xmlns:avalonDockLayout="clr-namespace:Xceed.Wpf.AvalonDock.Layout;assembly=Xceed.Wpf.AvalonDock"
xmlns:avalonDockControls="clr-namespace:Xceed.Wpf.AvalonDock.Controls;assembly=Xceed.Wpf.AvalonDock"
Title="MainWindow" Height="500" Width="500">
<Window.Resources>
<ResourceDictionary>
<DataTemplate DataType="{x:Type local:Item}">
<StackPanel Orientation="Vertical">
<Label Content="Item:" />
<TextBox Text="{Binding Name}"/>
<Button Content="_ClickMe" />
</StackPanel>
</DataTemplate>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<avalonDock:DockingManager Grid.Row="0" DocumentsSource="{Binding}">
<avalonDockLayout:LayoutRoot>
<avalonDockLayout:LayoutPanel Orientation="Horizontal">
<avalonDockLayout:LayoutDocumentPane/>
</avalonDockLayout:LayoutPanel>
</avalonDockLayout:LayoutRoot>
</avalonDock:DockingManager>
<Button Grid.Row="1" Content="_Test" />
</Grid>
</Window>
Even with this simple application, the Alt key adornments show up for the Test button outside of AvalonDock, but not for the ClickMe buttons for the controls within AvalonDock.
I also posted the issue here on the AvalonDock codeplex site, but there appears to be very little response activity. I also posted the issue here on the Extended Toolkit codeplex site.
Any ideas on how to correct or workaround this issue?
It sounds as though this will be fixed with the next version of AvalonDock.
In the meantime, the following Blend behavior is a workaround:
public class FixKeyboardCuesBehavior : Behavior<UIElement>
{
private static readonly DependencyProperty ShowKeyboardCuesProperty;
static FixKeyboardCuesBehavior()
{
Type keyboardNavigation = typeof(KeyboardNavigation);
var field = keyboardNavigation.GetField("ShowKeyboardCuesProperty", BindingFlags.NonPublic | BindingFlags.Static);
Debug.Assert(field != null, "field != null");
ShowKeyboardCuesProperty = (DependencyProperty)field.GetValue(null);
}
protected override void OnAttached()
{
base.OnAttached();
Window rootWindow = Window.GetWindow(this.AssociatedObject);
if (rootWindow == null)
{
return;
}
BindingOperations.SetBinding(
this.AssociatedObject,
ShowKeyboardCuesProperty,
new Binding("(KeyboardNavigation.ShowKeyboardCues)") { Source = rootWindow });
}
}
Use this from XAML by adding the following to the root element of your DataTemplate for the AvalonDock LayoutItemTemplate:
<i:Interaction.Behaviors
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity">
<my:FixKeyboardCuesBehavior />
</i:Interaction.Behaviors>
This workaround uses internal implementation details of WPF to re-introduce the Alt behaviour below the broken AvalonDock logical tree. So, I'll be looking forward to being able to zap it from my code when AD itself is fixed!

Want a tool to visualize XAML hierarchy, tried XAMLPadX had problems

I'd like a tool to visualize the Visual Hierarchy of a XAML file - just an outline of what elements are within what other elements.
I downloaded XAMLPadX 4.0 and opened a GridSplitter example file:
<Window x:Class="GridsplitterSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GridSplitter Sample" Height="400" Width="700">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Width="4" Background="Yellow"/>
<TextBlock Grid.Row="0" Grid.Column="0" Margin="0 0 4 0" Background="LightGray">Text Block</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" Background="LightGreen">Text Block 2</TextBlock>
</Grid>
</Window>
. . . This example runs and builds fine in Visual Studio 2010 but in XAMLPadX it showed nothing on the main screen and in the Visual Tree window it only expanded as far as the outer Grid element and there was no "+" to expand that any farther to show the inner Grids, TextBlocks or GridSplitter.
XamlPadX came with sample files so I loaded "Red Dragon". It displayed the XAML and a red dragon on the main screen. But now I can't get RID of the red dragon! No matter what else I load that's all I see in the main window and Visual Tree, even though different XAML is loaded in the XAML window. Red Dragon seems to have broken the tool and resrating it seems to make no difference.
So am I doing something wrong or is there a better tool?
Thanks in advance.
If you aren't already familiar than there's no other tool I know of that is nearly as handy as Expression Blend and I know normally it's frowned upon to provide answers that are only a couple sentences. However for working with XAML in WPF/SL Expression Blend is excellent once you get used to it. The Objects / Timeline and visual Properties etc. make dev so much more efficient! If you can't tell, I'm a big fan.
Or if you haven't already done so you can enable the Document Outline window in Visual Studio and it also helps quite a bit with visualizing the structure. Hope this helps.
Could use Snoop. Will attach to any compatible .NET managed app, I think it might even support some Silverlight apps. CTRL+Shift+Mouseover to highlight areas and expose them in the document hierarchy.

How to create Carousel like control?

I need a "Сarousel like" control in my windows phone 7 APP, there will be list of images and I need to switch them like items in Pivot. What control should I use? Pivot is very similar, but I need footer in my application.
If you(or anyone else stumbeling into this question hunting for fancy UI elements) want it a bit more fancy you could alternatively use the Silverlight Flow Layouts Library which is a very powerfull carousel system with a dedicated WP7 binary. I have not used this on WP7 yet my self, but I have used it with WPF and it both looks good and performs well.
You can use a Pivot control where you hide the headers, I blogged about a simple solution to this problem here:
A Windows Phone 7 Slide View with Page Pips
You can add your fixed footer under the Pivot control as follows:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="#EAE5C7">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<local:PivotLocationView Source="{Binding ElementName=pivot}"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Margin="0,0,0,10"/>
<controls:Pivot Margin="0,-30,0,40"
x:Name="pivot">
<controls:PivotItem>
...
</controls:PivotItem>
<controls:PivotItem>
...
</controls:PivotItem>
<controls:PivotItem>
...
</controls:PivotItem>
</controls:Pivot>
<!-- your fixed footer goes here -->
<Grid x:Name="footer" Grid.Row="1">
</Grid>
</Grid>
You can try to use the control from this Codeplex project Silverlight Carousel Control
and hope it does not use any non-WP7 features.

Resources