#

UWP: Beispiel wie man an Benutzersteuerelement erstellt, das ein Video darstellen soll


Das Beispiel zeigt den XAML Code und den UserControl C#.cs Code, welcher für die Erstellung eines Benutzersteuerelements verwendet werden kann
Damit man Bildchen als Video mit Filmstreifen anzeigen kann.
Der Code ist in einer Universal App für Windows 10 erstellt und kann weiterverwendet werden.


XAML Grundgerüst für das Benutzersteuerelement
Ein Grid mit 3 Columns und einem überlagerten Symbol.
In der Mitte ist ein Image Control, das zu Beginn leer ist

<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>


In der XAML Ansicht des UserControls



C# Code für das UserControl und der Laderoutine der seitlichen Filmstreifen Löcher

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
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

#region Page
//========================< Region: Page >========================
public ucVideo_Thumbnail()
{
this.InitializeComponent();
}
private void UserControl_Loading(FrameworkElement sender, object args)
{
fl_Fill_VideoStips();
}
//========================< Region: Page >========================
#endregion

private void fl_Fill_VideoStips()
{
//------------< fl_Fill_VideoStips() >------------
//*lade seitenstreifen mit 10 Video-Filmstreifen-Loechern
for (int iHole = 0; iHole < 10; iHole++)
{
stackLeft.Children.Add(video_pad() );
stackRight.Children.Add(video_pad());
}
//------------</ fl_Fill_VideoStips() >------------
}

public Border video_pad()
{
//------------< video_pad() >------------
//*erstelle ein Loch-Element
Border rect;
rect = new Border();
rect.Background = new SolidColorBrush(Windows.UI.Colors.White);
rect.Height = 10;
rect.Margin = new Thickness(1, 4, 1, 4);
return rect;
//------------</ video_pad() >------------
}
}
}




Der Aufruf läuft ganz einfach

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 >--
}
else
{
..
}


//< anfuegen >
ctlThumbnails.Items.Add(item);
//< anfuegen >

Mobile

.