#

UWP: wie erstellt man ein UserControl

Für eigene funktionelle Anzeigeelemente in einer App, kann man, wenn man sie öfters verwendet,
ein Benutzersteuerelement erstellen.
Dieses hat den Vorteil, dass man es in XAML gestalten kann und mit eigenem C# Code während der Erstellung ausführen kann

Um ein Benutzersteuerelement zu erstellen klickt man auf das Projekt mit der rechten Maustaste,
dann auf neues Element hinzufügen und dann
auf Benutzersteuerelement (nicht auf Steuerelement mit Vorlagen)


Danach hat man ein eigenes XAML Control, welches man in XAML und in C#.cs gestalten kann und mit Funktionen und Events versehen kann



Im Beispiel erstelle ich hier ein Video Control für Thumbnails, welches links und rechts Filmstreifen Löcher aufweisen soll
Hierzu wird im userControl das Grid in 3 Columns geteilt und diese in XAML gestaltet




XAML Beispiel Benutzersteuerelement Video Thumbnail Element

<UserControl
x:Class="Show_Photos_Videos_on_TV.ucVideo_Thumbnail"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Show_Photos_Videos_on_TV"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="100"
d:DesignWidth="100" Loading="UserControl_Loading">

<Grid Background="#555555" Width="100" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="stackLeft" Grid.Column="0" Orientation="Vertical" Background="Black" ></StackPanel>
<Image x:Name="tnImage" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="UniformToFill" ></Image>
<SymbolIcon Symbol="Play" Grid.Column="1" Foreground="White" Opacity="0.9"></SymbolIcon>
<StackPanel x:Name="stackRight" Grid.Column="2" Orientation="Vertical" Background="Black" ></StackPanel>
</Grid>
</UserControl>



Damit man auf das UserControl beim Laden zugreifen kann und wie hier ein Image zuweisen kann, muss man in der C#.cs Datei
Properties hinzufügen, die als Schnittstelle Werte aufnehmen oder zurückgeben.
Hier wird die .Source Eigenschaft erstellt, mit welcher man beim späteren Erstellen die Videoquelle zuweist.

public BitmapImage Source
{
set { tnImage.Source = value; }
}


ucVideo_Thumbnail.xaml.cs -> Properties erstellen


C#-Code des Usercontrols in der Erstellung..

using Windows.UI.Xaml.Media.Imaging; // Bitmap

// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236

namespace Show_Photos_Videos_on_TV
{
public sealed partial class ucVideo_Thumbnail : UserControl
{
#region Properties
//========================< Region: Properties >========================
//setzen und lesen von Eigenschaften
//Thumbnail Image
public Image Image {
get { return tnImage; }
set { tnImage = value; }
}

public BitmapImage Source
{
set { tnImage.Source = value; }
}

//========================</ Region: Properties >========================
#endregion


Aufrufende Seite:
Wenn jetzt das UserControl geladen werden soll zur Laufzeit,
dann wird es mit dem Klassennamen neu erstellt und die Werte wie hier die Bildquelle zugewiesen

//-< UserControl Video_Thumbnail laden >-
ucVideo_Thumbnail ucVideo = new ucVideo_Thumbnail();
ucVideo.Source = bitmapImage;
//-< UserControl Video_Thumbnail laden >-



Hier der Lade-Code im Ganzen..

BitmapImage bitmapImage = new BitmapImage();
bitmapImage.SetSource(imgThumbnail);
//--<// Thumbnail auslesen >--

GridViewItem item = new GridViewItem();
item.Margin = new Thickness(1);

if (file.ContentType.Contains("video"))
{
//--< Ist Video >--
//-< UserControl Video_Thumbnail laden >-
ucVideo_Thumbnail ucVideo = new ucVideo_Thumbnail();
ucVideo.Source = bitmapImage;
//-< UserControl Video_Thumbnail laden >-

//< Item laden >
//*UserControl in den Content des Item laden
item.Content = ucVideo;
//</ Item laden >
//--</ Ist Video >--
}




Final sieht dann die Verwendung von UserCodes wie hier aus.
Die 3 Bildchen mit den Filmstreifen am Rand sind die UserControls. Dadurch wurde mit dem UserControl in ein GridView verschiedene Elemente in den einzelnen Zellen geladen.
Mobile

.