freiberuflicher Software Entwickler C#, vb.Net, vba, UWP, WPF, WinForms, SQL Server, Access, Excel, ASP.Net Core MVC Telefon: 07022/9319004   Kontakt
#

UWP: Transparentes Rahmenloses Fenster

 

Wie erstellt man unter UWP ein rahmenloses, durchsichtiges Fenster?

 

Rahmenlos:

Unter UWP kann man den Inhalt der App-Anwendung bis zum äußeren Rahmen der App erweitern. Hierzu muss man beim Start der App die App-Titlebar erweitern mit ExtendViewIntoTitleBar.

Durchsichtig:

Die Durchsichtigkeit eines App-Fensters kann man allerdings derzeit nur bis zum CoreWindows erreichen. Das heißt, alle dargestellten Elemente in der Windows App enden in der Durchsichtigkeit im App-Hintergrund.

Die App kann nicht bis zum Desktop oder unterhalb liegenden Fenstern durchsichtig gemacht werden

 

ScreenShot: Frameless UWP App

 

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

 

Tutorial Video

 

MainPage Xaml einstellen.

 

 

 

<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 der App.xaml.cs

 

Titlebar Buttons Transparent

Damit die Titlebar und die Buttons in der Titlebar durchsichtig werden, muss man diese beim Start der UWP App einstellen.

Hierzu muss man in der Datei: App.xaml.cs  vor der Zeile Window.Current.Activate(); die Titlebar ermitteln und dort die BackgroundColor der Buttons setzen.

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

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

 

 

MainPage auf Title erweitern

Damit sich die grundlegende MainPage visuell auch bis zum kompletten App Rand ausdehnt inklusive der Titlebar, muss man diese ebenfalls beim Start einstellen.

Mit ExtendViewIntoTitlebar

coreTitleBar.ExtendViewIntoTitleBar = true;

 

 

Erweiterung des C# Codes in der OnLaunched(..) Methode der 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:

Wenn man in UWP bisher die Durchsichtigkeit erhöht mit der Opacity Einstellung, dann blickt das Fenster nur bis zur App durch.

Im Gegensatz zu WPF ist hier keine Durchsichtigkeit unterhalb des App-Fensters möglich. Die Aufgabe liegt seit 2016 im Developer Hub von Microsoft

 

Screenshot: Transparence, Opacity.

Der Background der Mainpage ist schwarz. Alle überlagernde Elemente werden bis auf diesen Hintergrund durchsichtig dargestellt

Mobile
»
UWP: Transparentes Rahmenloses Fenster
»
UWP Debug: Einschalten des Native Code Debugging
»
UWP: Wert von Setting auslesen
»
UWP: FontIcon Glyph Codes Symbol Icon Codes
»
UWP: ContactManager ShowContactCard
»
UWP: Gridlength auto oder star
»
WPF, UWP: Keyboard Taste Key vergleichen
»
UWP: Wie kann man diese Nummern in der Universal App ausschalten
»
UWP: Den dargestellten Rahmen der einzelnen Elemente, Kacheln in einen Grid ändern
»
UWP: Markierte Position in einem GridView ändern über Index

.

Jobs, Projekte, Angebote für Freiberufler, Selbstständig an Raimund.Popp@Microsoft-Programmierer.de