WPF custom title bar with Windows 11 caption buttons - c#

To edit non client area, I need to create my own title bar in my WPF app setting WindowStyle to none and non resizable. I have created my own caption button but it don't get the feel of Windows 11. When we hover mouse over middle button we can see a window snap option as seen in this image
Is there anyway to achieve this, I mean there should be, I even tried many nuget packages having custom Window, but I didn't got what I wanted.
All I want is to get a Window with System's default Window behavior but can have a Sliding panel from left which is even over title bar, somewhat like this but I dont want to make title bar myself I want systems default.
Even if its custom made I want it perfectly same as System's Default Window
Its already in many Windows apps :- Clock ,Mail, Even Word .
In each of this apps left panel is over title bar and even preserving the system's default window behavior, Please Please Please tell me I have been looking for it from 2 months.
Nuget Package I tried : https://github.com/Kinnara/ModernWpf
code I tried:
<Window '''''default code ''''
''''''''''''''''''''''
''''''''''''''''''''''
''''''''''''''''''''''
WindowStyle="None"
ResizeMode="NoResize">
<!--This created blank window with no title bar-->
<Grid>
<!--creating title bar-->
<Grid ''''' code so grid appear as title bar on top
and we can drag too>
<!--caption buttons-->
<button ''''button with '-' and style as
windows caption button and minizimes window
when clicked'''''''''''/>
<button ''''button with 'square symbol' and style as
windows caption button and maximize or restore window
when clicked'''''''''''/>
<button ''''button with 'close symbol' and style as
windows caption button and close window
when clicked'''''''''''/>
</Grid>
<!---
rest of the code
""""""""""""""""""
"""""""""""""""
""""""""""""""""--->
</Grid>
<Window/>

Related

Place a popup under a button (UWP, XAML, C#)

I have created a Button. When the button is pressed a Popup appears. The Problem is, the popup is on the top left side while the button is on the Right side.
What do I have to do in XAML to make the popup appear under the button?
I even tried to place the popup in the top rightcorner via HorizontalAllignment. The Problem then is that the popup is outside my program (Right next to it. Literally).
just use the new DropDownButton in the new winUi library, it has a build in popup which comes under the button and the button even has an arrow on right side, it is perfect for your scenario. just use the nuget package, docs are here : https://learn.microsoft.com/en-us/uwp/toolkits/winui/
You can use the Flyout which is attached to specific controls including Button, then You can use the Placement property to specify where a flyout appears: Top, Left, Bottom, Right, or Full. So you can use the Placement property to specify the flyout to appear under the button as the following code.
<Button Content="Click me">
<Button.Flyout>
<Flyout Placement="Bottom">
<TextBlock Text="This is a flyout!"/>
</Flyout>
</Button.Flyout>
</Button>
By the way, as we suggestion in the Remark part,
Do not use a Popup if a Flyout, MenuFlyout, ToolTip or ContentDialog (MessageDialog for a Windows 8 app) is more appropriate.

Disable scrolling phone:webbrowser windows phone 8 / 8.1

I am trying to disable the scroll functionality in the phone:webbrowser in my windows phone 8 application. The reason i wan't to do this is that I want to place a stackpanel with items underneath the webview, but still show the whole webpage.
To accomplish this I get the total height of the webpage and set the height of the webbrowser to the webpage height. This will be done through adding javascript to the webbrowser. The webview will now have the total webpage and the items underneath it and both of those items are in a ScrollViewer so you can scroll through the page.
The only problem i have right now is that you can scroll the webbrowser so you cant scroll the scrollviewer. anyone got an idea how to fix this?
<ScrollViewer
Grid.Row="1"
Margin="0,0,0,0">
<StackPanel
x:Name="ContentPanel"
Margin="0,0,0,0">
<phone:WebBrowser
x:Name="webView"
Navigating="WebBrowserNavigating"
LoadCompleted="WebBrowserLoadCompleted"
ScriptNotify="browser_ScriptNotify"
IsScriptEnabled="True"/>
<StackPanel
x:Name="CouponHolder"
Margin="0,5,0,0">
</StackPanel>
</StackPanel>
</ScrollViewer>
I also looked at other questions, but they didnt work out for me:
http://www.codeproject.com/Tips/718671/Disable-WebView-scrolling-in-Windows-Store-Apps
And I see allot of people give awnsers like VerticalScrollBarVisibility="Disabled" but this doesnt work, like the suggests it will only hide the visibility...
you can disable all manipulation with WebBrowser control by setting IsHitTestVisible="false". The disadvantage is that you can't press Links, Navigate and so on.
If you want just to disable scrolling than take a look at this blog post:http://www.scottlogic.com/blog/2011/11/17/suppressing-zoom-and-scroll-interactions-in-the-windows-phone-7-browser-control.html
You can Find that the VisualTree of WebBrowser control looks like:
\-WebBrowser
\-Border
\-Border
\WebBrowserInteropCanvas (New in Windows Phone 8, missing in WP7)
\-PanZoomContainer
\-Grid
\-Border (you need access this one)
\-ContentPresenter
\-TileHost
You can get the last Border in VisualTree, and subscribe to ManipulationDelta, ManipulationStarted and ManipulationCompletedEvents. And set e.Handled = true; In event handlers. Be careful with that. For example where is no equialent for this code in Windows 8.1 and Windows Phone 8.1 (Runtime).
This hack will cancel scrolling of webbrowser while user can interract with entire web page, but you won't be able to suppress manipulation to put webbrowser in scrollviewer.
In general I don't think that you could achive ideal user experience if you put WebBrowser inside ScrollViewer
After hours of searching this project finally solved all our webview problems in Windows Phone 8.1 (bounce, touch, auto height etc.):
https://github.com/romshiri/sizeable-webview

How to remove the Window Commands From MahApps.Metro Template?

Metro template for WPF app. I want a Window which dont have any Window Command like minimize maximize and close. In normal WPf it can be done by WindowsStyle but how i can remove them in this template. And i also want to make the Window to be TopMost="True" and WindowState="Maximized". So all this settings are possible in this template ? Please advice ?
No need to thange templates, just set some properties.
MetroWindow has properties:
<controls:MetroWindow ...
Topmost="True"
WindowState="Maximized"
ShowTitleBar="False" // Hide colored tile bar, title header and icon
ShowCloseButton="False"
ShowMaxRestoreButton="False"
ShowMinButton="False"
ShowWindowCommandsOnTop="False" // No window commands on top of flyouts
which will remove title bar (icon+color), and you can remove buttons too.

Changing the page header text in XAML

How do I change the default page header in a Windows 8 XAML application? The question is simple, just I am still learning XAML.
<Page.DataContext>
<local:MainPageViewModel/>
</Page.DataContext>
<!-- PageAdornerControl displays the back button and a page title -->
<Layout:PageAdornerControl
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
Header="{Binding Header}">
I see Header as the text. My first thought was to change {Binding Header} to {Binding }, however a mouse over on Header shows that as some valid whatever. Also, I would like to use the Visual Studio 2012 properties window to change the text.
There might be other ways, and I am still less than green with XAML, but here is one way using Nate's pageAdornerControl method.
Place the cursor on the Layout:PageAdornerControl in the XAML code area.
Go to the properties window, which should show the type as PageAdornerControl.
Scroll down to header
From the dropdown list, select Go to Source
You will now see another section of code highlighted.
Go to the properties window and the Header attribute will be the actual header text, which you can edit.

hiding appbar on overlay progress bar

I am working a windows phone 7 application.Now in this application on specific user input i show overlay progress bar from coding4fun Silverlight toolkit.
But App bar on that page on which i am showing overlay progress bar remains active.
I want to make it generic that when ever I call overlay
progress bar.show()
App bar should be hidden.
You can use the BindableApplicationBar from the Phone7Fx library here :-
http://phone7.codeplex.com/
You can then bind the IsVisible property of the BindableApplicationBar to the Visibility property of the ProgressOverlay, using XAML as follows :-
<phone7fx:BindableApplicationBar x:Name="AppBar"
BarOpacity="1"
IsVisible="{Binding Path=Visibility, ElementName=MyProgressOverlay, Mode=TwoWay, Converter={StaticResource VisibilityToBooleanConverter}}" />
Then if you call the Show or Hide method against the ProgressOverlay then the Application Bar will Appear and Disappear accordingly.
Bear in mind that you define the Phone7.Fx BindableApplicationBar within the last Grid tag and not before the last phone:PhoneApplicationPage.

Categories

Resources