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
