Free Code Snippets in C#, Net Framework, Office 365, ASP.Net,WPF, Visual Studio, SQL Server, Antivirus free
#

UWP: Transparent frameless window

 

How to create a frameless, transparent window under UWP?

 

frameless:

Under UWP you can extend the contents of the app application to the outer frame of the app. To do this, you have to extend the app titlebar with ExtendViewIntoTitleBar.

Transparent:

However, the transparency of an app window can only be reached up to CoreWindows. That is, all displayed items in the Windows app end in transparency in the app background.

The app can not be made transparent to the desktop or underneath windows

 

ScreenShot: Frameless UWP App

 

# Transparent, Opacity, Titlebar, Windowstyle, UWP = Universal Windows Platform App

 

Tutorial Video

 

MainPage Xaml.

 

 

 

<Page

    x:Class="uwp_Transparent_Background.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:uwp_Transparent_Background"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" Background="Red" >

 

    <Grid  Background="Black" >

        <Image x:Name="ctlImage" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Source="_Images/Background_Image.JPG" Stretch="UniformToFill" ></Image>

 

        <TextBlock FontSize="16" FontWeight="Bold" Foreground="White" >Transparence</TextBlock>

        <Slider x:Name="slider_Opacity" Maximum="1" Minimum="0" Value="1" TickFrequency="0.1" TickPlacement="Outside"  StepFrequency="0.1"

Margin="0,20,0,0" ValueChanged="slider_Opacity_ValueChanged"></Slider>

 

    </Grid>

</Page>

 

 

C # Code in the app.xaml.cs

 

Titlebar Buttons Transparent

In order for the title bar and the buttons in the titlebar to become transparent, you have to set this at the start of the UWP app.

To do this, you need to use the file: App.xaml.cs before the line Window.Current.Activate (); Determine the titlebar and set the BackgroundColor of the buttons.

uwpTitleBar.ButtonBackgroundColor = Windows.UI.Colors.Transparent;

uwpTitleBar.BackgroundColor = Windows.UI.Colors.Transparent;

 

 

Expand MainPage to Title

In order for the basic MainPage to extend visually to the complete app edge, including the titlebar, you have to set this also at the start.

With ExtendViewIntoTitlebar

coreTitleBar.ExtendViewIntoTitleBar = true;

 

 

Extension of the C # code in the OnLaunched (..) Method of App

//----< Transparent Title >----

//using Windows.UI.ViewManagement;

//window as default-size

Windows.UI.ViewManagement.ApplicationViewTitleBar uwpTitleBar = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().TitleBar;

uwpTitleBar.ButtonBackgroundColor = Windows.UI.Colors.Transparent;

uwpTitleBar.BackgroundColor = Windows.UI.Colors.Transparent;

 

//using Windows.ApplicationModel.Core

Windows.ApplicationModel.Core.CoreApplicationViewTitleBar coreTitleBar = Windows.ApplicationModel.Core.CoreApplication.GetCurrentView().TitleBar;

coreTitleBar.ExtendViewIntoTitleBar = true;

//----</ Transparent Title >----

 

 

Transparent, opacity:

If in UWP so far the transparency with the Opacity setting, then the window only looks up to the app.

In contrast to WPF, transparency is not possible under the app window. The task has been in the Developer Hub of Microsoft since 2016

 

Screenshot: Transparence, Opacity.

The background of the mainpage is black. All superimposing elements are shown transparently to this background

Mobile
»
UWP: Transparent frameless window

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de