背水一戰 Windows 10 (59) - 控件（媒體類）: Image, MediaElement
阿新 • • 發佈：2017-09-21
ive http .so erb names targe pix target openxml 原文:背水一戰 Windows 10 (59) - 控件（媒體類）: Image, MediaElement
[源碼下載]
作者：webabcd
介紹
背水一戰 Windows 10 之 控件（媒體類）
- Image
- MediaElement
示例
1、Image 的示例 1
Controls/MediaControl/ImageDemo1.xaml
<Page x:Class="Windows10.Controls.MediaControl.ImageDemo1"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.MediaControl" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <!-- Image - 圖片控件 Stretch - 拉伸方式 Fill - 充滿容器，不保留長寬比 None - 不做任何處理，如果圖片比容器大，則多出的部分被剪裁 Uniform - 等比縮放到容器（默認值） UniformToFill - 充滿容器，且保留長寬比，多出的部分被剪裁 Source - 圖片源，一個 ImageSource 對象--> <StackPanel Orientation="Horizontal"> <Border BorderBrush="Red" BorderThickness="1" Width="150" Height="100"> <Image Name="image1" Source="/Assets/StoreLogo.png" Stretch="Fill" Width="150" Height="100" /> </Border> <Border BorderBrush="Red" BorderThickness="1" Width="150" Height="100" Margin="20 0 0 0"> <Image Name="image2" Source="/Assets/StoreLogo.png" Stretch="None" Width="150" Height="100" /> </Border> <Border BorderBrush="Red" BorderThickness="1" Width="150" Height="100" Margin="20 0 0 0"> <!--後臺設置 Image 的 Source--> <Image Name="image3" Stretch="Uniform" Width="150" Height="100" /> </Border> <Border BorderBrush="Red" BorderThickness="1" Width="150" Height="100" Margin="20 0 0 0"> <!--後臺設置 Image 的 Source--> <Image Name="image4" Stretch="UniformToFill" Width="150" Height="100" /> </Border> <Border BorderBrush="Red" BorderThickness="1" Width="150" Height="100" Margin="20 0 0 0"> <Image Stretch="Fill" Width="150" Height="100"> <!--BitmapImage 繼承自 BitmapSource, BitmapSource 繼承自 ImageSource--> <Image.Source> <BitmapImage UriSource="/Assets/StoreLogo.png" DecodePixelHeight="10" /> </Image.Source> </Image> </Border> </StackPanel> <!-- Image - 圖片控件 NineGrid - 指定9網格（相當於flash中的9切片）中的4條線，Thickness 類型 Left - 左邊的線相對於圖片最左端的距離 Top - 上邊的線相對於圖片最頂端的距離 Right - 右邊的線相對於圖片最右端的距離 Bottom - 下邊的線相對於圖片最底端的距離 --> <StackPanel Orientation="Horizontal" Margin="0 50 0 0"> <Image Source="/Assets/NineGridDemo.png" Width="200" Height="200" /> <!--通過指定9切片，防止邊框被放大或縮小--> <Image Source="/Assets/NineGridDemo.png" Width="200" Height="200" NineGrid="1 1 1 1" Margin="20 0 0 0" /> </StackPanel> <!-- Image - 圖片控件 ImageOpened - 成功下載圖片源並成功解碼後觸發的事件 ImageFailed - 下載圖片源或解碼發生錯誤時觸發的事件 --> <StackPanel Orientation="Vertical" Margin="0 50 0 0"> <Border BorderBrush="Red" BorderThickness="1" Width="200" Height="200" HorizontalAlignment="Left"> <Image Name="remoteImage" Stretch="Uniform" Source="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" Width="200" Height="200" ImageOpened="remoteImage_ImageOpened" ImageFailed="remoteImage_ImageFailed" /> </Border> <TextBlock Name="lblMsg" TextWrapping="Wrap" Margin="0 10 0 0" /> </StackPanel> </StackPanel> </Grid> </Page>
Controls/MediaControl/ImageDemo1.xaml.cs
/* * Image - 圖片控件（繼承自 FrameworkElement, 請參見 /Controls/BaseControl/FrameworkElementDemo/） */ using System; using Windows.Storage; using Windows.Storage.Streams; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media.Imaging; namespace Windows10.Controls.MediaControl { public sealed partial class ImageDemo1 : Page { public ImageDemo1() { this.InitializeComponent(); this.Loaded += ImageDemo_Loaded; } private async void ImageDemo_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e) { // 將 Image 控件的圖片源設置為 ms-appx:///Assets/StoreLogo.png image3.Source = new BitmapImage(new Uri("ms-appx:///Assets/StoreLogo.png", UriKind.Absolute)); // 將圖片文件流轉換為 ImageSource 對象（BitmapImage 繼承自 BitmapSource, BitmapSource 繼承自 ImageSource） RandomAccessStreamReference imageStreamRef = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/StoreLogo.png", UriKind.Absolute)); IRandomAccessStream imageStream = await imageStreamRef.OpenReadAsync(); BitmapImage bitmapImage = new BitmapImage(); bitmapImage.SetSource(imageStream); image4.Source = bitmapImage; // 通過下面這種方式也可以拿到文件的 IRandomAccessStream 流 // StorageFile storageFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/StoreLogo.png")); // IRandomAccessStream stream = await storageFile.OpenReadAsync(); } private void remoteImage_ImageOpened(object sender, RoutedEventArgs e) { // 圖片加載完成後，獲取 Image 控件的真實的寬和高 lblMsg.Text = $"remoteImage_ImageOpened, remoteImage.ActualWidth:{remoteImage.ActualWidth}, remoteImage.ActualHeight:{remoteImage.ActualHeight}"; lblMsg.Text += Environment.NewLine; // 圖片加載完成後，獲取圖片的真實的寬和高 BitmapSource bs = remoteImage.Source as BitmapSource; lblMsg.Text += $"remoteImage_ImageOpened, PixelWidth:{bs.PixelWidth}, PixelHeight:{bs.PixelHeight}"; } private void remoteImage_ImageFailed(object sender, ExceptionRoutedEventArgs e) { lblMsg.Text = "remoteImage_ImageFailed"; } } }
2、Image 的示例 2
Controls/MediaControl/ImageDemo2.xaml
<Page x:Class="Windows10.Controls.MediaControl.ImageDemo2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.MediaControl" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10" HorizontalAlignment="Left"> <!--加載一個 http 或 https 地址的圖片--> <Image Name="image1" Stretch="Uniform" Source="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" Width="50" Height="50" Margin="5" /> <!--加載 Package 內圖片--> <Image Name="image2" Source="/Assets/StoreLogo.png" Width="50" Height="50" Margin="5" /> <!--加載 Package 內圖片--> <Image Name="image3" Source="ms-appx:///Assets/StoreLogo.png" Width="50" Height="50" Margin="5" /> <!--加載 Application 內圖片--> <Image Name="image4" Width="50" Height="50" Margin="5" Loaded="image4_Loaded" /> <!--加載 Package 內嵌入式資源的圖片--> <Image Name="image5" Width="50" Height="50" Margin="5" Loaded="image5_Loaded" /> </StackPanel> </Grid> </Page>
Controls/MediaControl/ImageDemo2.xaml.cs
/* * Image - 圖片控件（繼承自 FrameworkElement, 請參見 /Controls/BaseControl/FrameworkElementDemo/） */ using System; using System.IO; using System.Reflection; using Windows.Storage; using Windows.Storage.Streams; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media.Imaging; using Windows10.Common; namespace Windows10.Controls.MediaControl { public sealed partial class ImageDemo2 : Page { public ImageDemo2() { this.InitializeComponent(); } private async void image4_Loaded(object sender, RoutedEventArgs e) { // 將程序包內的 png 文件復制到 ApplicationData 中的 LocalFolder StorageFolder localFolder = await ApplicationData.Current.LocalFolder.CreateFolderAsync("webabcdTest", CreationCollisionOption.OpenIfExists); StorageFile packageFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/StoreLogo.png")); await packageFile.CopyAsync(localFolder, "StoreLogo.png", NameCollisionOption.ReplaceExisting); // 通過 ms-appdata:/// 協議加載 Application 內圖片 string url = "ms-appdata:///local/webabcdTest/StoreLogo.png"; image4.Source = new BitmapImage(new Uri(url, UriKind.Absolute)); } private async void image5_Loaded(object sender, RoutedEventArgs e) { // 獲取 Package 內嵌入式資源數據 Assembly assembly = typeof(ImageDemo2).GetTypeInfo().Assembly; Stream stream = assembly.GetManifestResourceStream("Windows10.Controls.MediaControl.EmbeddedResource.png"); IRandomAccessStream imageStream = await ConverterHelper.Stream2RandomAccessStream(stream); BitmapImage bitmapImage = new BitmapImage(); bitmapImage.SetSource(imageStream); image5.Source = bitmapImage; } } }
3、MediaElement 的示例
Controls/MediaControl/MediaElementDemo.xaml
<Page x:Class="Windows10.Controls.MediaControl.MediaElementDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.MediaControl" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <Grid Margin="10 0 10 10"> <!-- MediaElement - 視頻控件 --> <MediaElement Source="http://media.w3.org/2010/05/sintel/trailer.mp4" PosterSource="/Assets/StoreLogo.png" AutoPlay="True" AreTransportControlsEnabled="True"> <!-- MediaTransportControls - 用於定義 MediaElement 的控制條的樣式（當 MediaElement 的 AreTransportControlsEnabled 設置為 true 時） 有很多屬性可以設置，詳見文檔 --> <MediaElement.TransportControls> <MediaTransportControls IsCompact="True" /> </MediaElement.TransportControls> </MediaElement> </Grid> </Grid> </Page>
Controls/MediaControl/MediaElementDemo.xaml.cs
/* * MediaElement - 視頻控件（繼承自 FrameworkElement, 請參見 /Controls/BaseControl/FrameworkElementDemo/） * 用於視頻播放，懶得寫了，參見文檔吧 * 也可以看看之前 win8 時寫的示例 http://www.cnblogs.com/webabcd/archive/2013/01/24/2874156.html, http://www.cnblogs.com/webabcd/archive/2014/06/12/3783712.html * * 重點需要說明的如下： * 1、終於直接支持 hls 協議了，即可以直接播放 m3u8 * 2、別忘了 MediaStreamSource */ using Windows.UI.Xaml.Controls; namespace Windows10.Controls.MediaControl { public sealed partial class MediaElementDemo : Page { public MediaElementDemo() { this.InitializeComponent(); } } }
OK
[源碼下載]
背水一戰 Windows 10 (59) - 控件（媒體類）: Image, MediaElement