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

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.

Related

Awesomium Webcontrol not loading any web page within WPF Page frame control

I have added Awesomium webcontrol in my WPF Page (Frame Navigation)
But its not loading any webcontent, but if i add the webcontrol in WPF Window, its working fine.
Please suggest me how to load a Awesomium webcontrol within WPF Page control
Below is the code which i am using in my application
Thanks in advance.
<Page x:Class="Project15A.SocialMain"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:Project15A"
xmlns:my1="clr-namespace:Project15A.Controls"
xmlns:my2="http://schemas.awesomium.com/winfx"
MinHeight="300" MinWidth="500" Title="Project15A"
Loaded="Window1_Loaded">
<Grid Background="White">
<my2:WebControl HorizontalAlignment="Left" Margin="154,65,0,0"
Name="webControl1" VerticalAlignment="Top"
Source="http://www.google.com" />
</Grid>
</Page>
So I figured this one out. It is not a bug in Awesomium. (Though I think it should be on a quick start page.)
Awesomium supports two view modes. Offscreen and Windowed.
Offscreen is something that very manual. All input goes through you. (Why the default events don't still fire is kind of odd). I think this is the mode you will end up using if you want to interact with your HTML.
But if you want a normal imbedded browser window then you need to turn on the Window view mode.
Here is an example:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:awe="http://schemas.awesomium.com/winfx"
x:Class="WpfAndSpa.MainWindow">
<Grid>
<awe:WebControl x:Name="WebControl"
ViewType="Window" <--------------+
Source="http://google.com"/> |
</Grid> |
</Window> |
|
This is the key part -----------------------------------------+

MainWindow loaded but not visible at all time

I want to build a WPF Application that, when started, only has a tray Icon. If the User interacts with Menu Entries from the Tray's Context Menu, there will be Windows.
I need to load the MainWindow though, so I can listen to Clipboard Changed Events. But I don't want to show it.
I tried:
<Window x:Class="ClipboardListener.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:tb="http://www.hardcodet.net/taskbar"
Title="Should not see me"
ShowInTaskbar="False" Visibility="Collapsed" Opacity="100"
Width="320" Height="240">
But it still shows up? Setting Visibility to Hidden does not work for me since I need some Window to register the Clipboard Event Listener with the WinAPI.
Any Ideas?
I've recently had very similar task. All my attempts to make Window invisible, my googling, my stackoverflowing etc. failed. Finally I had a feeling that invisible window is something that should not be in WPF on some reason. It would be an easy task if there was TrayIcon control like in WinForms. Unfortunately, WPF does not have TrayIcon. This leads to the one that is present in WinForms.
Here's a good article on the issue. And my code that uses this dll:
<Window x:Class="ScannerClientWpf.TrayIcon"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ni="clr-namespace:Hardcodet.Wpf.TaskbarNotification;assembly=Hardcodet.Wpf.TaskbarNotification"
Title="TrayIcon" WindowStyle="None" AllowsTransparency="True" Background="Transparent" ShowActivated="False" ShowInTaskbar="False" >
<Grid>
<ni:TaskbarIcon IconSource="/ScannerClient;component/app.ico"
ToolTipText="ScannerClient">
<ni:TaskbarIcon.ContextMenu>
<ContextMenu>
<MenuItem Header="Close" Click="MenuItem_Click"/>
</ContextMenu>
</ni:TaskbarIcon.ContextMenu>
</ni:TaskbarIcon>
</Grid>

SurfaceScrollViewer: getting touch on nested children

I have the following piece of code, which is part of a WPF 4 UserControl:
<Popup x:Name="CantoPopup" IsOpen="False" PlacementRectangle="50,-100,500,120"
AllowsTransparency="True" PopupAnimation="Fade"
StaysOpen="True" Width="500" Height="120">
<Border BorderBrush="#FF120403" BorderThickness="1" CornerRadius="10" Background="#FF9350">
<s:SurfaceScrollViewer x:Name="IndexScroller" Width="500" Height="120" Margin="10" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible">
<DockPanel x:Name="InnerIndexPanel" />
</s:SurfaceScrollViewer>
</Border>
</Popup>
The DockPanel is then populated in the code-behind with a collection of TextBlocks. Basically, I am trying to build a scrollable horizontal list of touchable items.
Now, I would like to detect which textblock was touched by the user. However, neither adding a TouchDown event handler to the TextBlocks nor using TouchExtensions to handle tap gestures worked. Can someone please point me in the right direction?
Under the covers, Popup creates another hwnd to render its content into. This is different from all other WPF controls. You need to register this hwnd with the Surface SDK so it will start sending touch events to it. Use this to do that: http://msdn.microsoft.com/en-us/library/microsoft.surface.presentation.input.touchextensions.enablesurfaceinput.aspx
I found out that the point is that the Popup component has some peculiarities :) In this case, it seems that it did not detect neither TouchDown events nor PreviewTouchDown ones. Therefore, I resorted to creating a UserControl made of a Canvas containing the code above and then making such control visible on top of the rest whenever I needed the popup to open. I do not know whether this is the best solution, but now it reacts as expected.

How to display a busy message over a wpf screen

Hey,
I have a WPF application based on Prism4. When performing slow operations, I want to show a busy screen. I will have a large number of screens, so I'm trying to build a single solution into the framework rather than adding the busy indicator to each screen.
These long running operations run in a background thread. This allows the UI to be updated (good) but does not stop the user from using the UI (bad). What I'd like to do is overlay a control with a spinning dial sort of thing and have that control cover the entire screen (the old HTML trick with DIVs). When the app is busy, the control would display thus block any further interaction as well as showing the spinny thing.
To set this up, I thought I could just have my app screen in a canvas along with the spinny thing (with a greater ZIndex) then just make the spinny thing visible as required.
This, however, is getting hard. Canvases do not seem well set up for this and I think I might be barking up the wrong tree.
I would appreciate any help. Thanks.
I have done this with a few programs. Here it is in a nutshell:
(This is easiest with MVVM. It has been so long since I used the codebehid for things like this I can't really say if there is a good way to do it.)
Create a border on your Main Window. I usually make it black with a 50% transparency. Add a grid to it, and put whatever you want inside to tell users it is busy. Size the border and the controls inside it to fill the screen.
Create a property on your main ViewModel for IsBusy as boolean. Initialize it as False. Bind the Visibility property of the Busy Border to that property.
Next, make a converter class for Busy(Boolean) to Visibility. Write the logic into that so that when value is True, Then visibility is Visible, when value is false, visibility is collapsed. ( http://msdn.microsoft.com/en-us/library/system.windows.data.ivalueconverter.aspx ).
Back on the border, add your converter to the binding. Add code to the ViewModel for each of your Pages or Views that calls back to that property and sets it to true when your other thread is busy.
Cory
Edit:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid>
<Border BorderBrush="Black" BorderThickness="1" Background="#80000000" Visibility="Collapsed">
<Grid>
<TextBlock Margin="0" TextWrapping="Wrap" Text="Busy...Please Wait" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26.667" FontWeight="Bold" Foreground="#7EFFFFFF"/>
</Grid>
</Border>
<DockPanel x:Name="LayoutRoot">
<CheckBox Content="CheckBox" VerticalAlignment="Top"/>
<TextBlock TextWrapping="Wrap"><Run Text="TextBlock"/></TextBlock>
<UserControl x:Name="ViewViewView"/>
</DockPanel>
</Grid>
Look at this WPF toolkit with a busy indicator: https://github.com/xceedsoftware/wpftoolkit/wiki/BusyIndicator
I do this by simply displaying a dialog (so the user cannot interact with anything else and it will be displayed on top) then handle the Closing event (as the user could press Alt-F4) to see if the operation has finished otherwise I cancel the closing event:
myWaitWindow.ShowDialog(); // this can be borderless window with a spinny thing
void Window_Closing(object sender, CancelEventArgs e)
{
if(this.myOperation.IsRunning) // you would have to have some way to see when your operation has finished
e.Cancel = true;
}

WPF 3.5 WebBrowser control and ZIndex

I'm trying to figure out why the control does not honor ZIndex.
Example 1 - which works fine
<Canvas>
<Rectangle Canvas.ZIndex="1" Height="400" Width="600" Fill="Yellow"/>
<Rectangle Canvas.ZIndex="2" Height="100" Width="100" Fill="Red"/>
</Canvas>
Example 2 - which does not work
<Canvas>
<WebBrowser Canvas.ZIndex="1" Height="400" Width="600" Source="http://www.stackoverflow.com"/>
<Rectangle Canvas.ZIndex="2" Height="100" Width="100" Fill="Red"/>
</Canvas>
Thanks,
-- Ed
Unfortunately this is because the WebBrowser control is a wrapper around the Internet Explorer COM control. This means that it gets its own HWND and does not allow WPF to draw anything over it. It has the same restrictions as hosting any other Win32 or WinForms control in WPF.
MSDN has more information about WPF/Win32 interop.
You are running into a common WPF pitfall, most commonly called the "The Airspace Problem". A possible solution is to NOT use the WebBrowser control, and instead go for something a little crazier - namely an embedded WebKit browser rendering directly to WPF. There are two packages that do this; Awesomonium (commercial) and Berkelium (open-source). There's a .NET wrapper for both of these.
You could SetWindowRgn to fake the overlapping area by hiding it as shown here:
flounder.com
msdn
I solved a similar issue where I was hosting a 3rd party WinForms control in my WPF application. I created a WPF control that renders the WinForms control in memory and then paints it to a bitmap. Then I use DrawImage in the OnRender method to draw the rendered content. Finally I routed mouse events from my control to the hosted control. In the case of a web browser you would also have to route keyboard events.
My case was fairly easy - a chart with some simple mouse interaction. A web browser control may have other issues that I didn't take into consideration. Anyway I hope that helps.
I hit this issue as well. In my case I was dragging images from one panel into the WebBrowser, but of course as soon as my image moved into the browser it was hidden.
Currently working on the following solution:
When the Image drag starts, create a Bitmap of the WebBrowser using "RenderTargetBitmap"
Add your Bitmap to the canvas, using the same width/location as the webbrowser
webControl.Visibility = Visibility.Hidden.
When the drag is released, remove your bitmap and set webControl.Visibility = Visible.
This solution is very specific to my situation, but maybe it will give you some ideas.
I managed to solve this by using this structure, check out the properties configuration in each element:
<Canvas ClipToBounds="False">
<Popup AllowsTransparency="True" ClipToBounds="False" IsOpen="True">
<Expander>
<Grid x:Name="YourContent"/>
</Expander>
<Popup>
</Canvas>
You just have to manage the Expander to show or hide your content, I'm using it for a menu bar, I think that the expander is optional depending on the case.
Check out this picture with the result, you can even show your controls on top of the WebBrowser and even outside the main window:

Resources