Merge pull request #3334 from Sergio0694/feature/bitmapiconsource-extension

BitmapIconSource extension

Author: michael-hawker

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/IconExtensions/IconExtensionsPage.xaml

@@ -10,14 +10,15 @@
 
             <CommandBar>
                 <AppBarButton Icon="{ex:FontIcon Glyph=&#xE102;}"/>
-                <AppBarButton Icon="{ex:SymbolIcon Glyph=Play}"/>
+                <AppBarButton Icon="{ex:SymbolIcon Symbol=Play}"/>
             </CommandBar>
 
             <SwipeControl>
                 <SwipeControl.LeftItems>
                     <SwipeItems Mode="Reveal">
                         <SwipeItem Text="Accept" IconSource="{ex:FontIconSource Glyph=&#xE10B;}"/>
-                        <SwipeItem Text="Play" IconSource="{ex:SymbolIconSource Glyph=Play}"/>
+                        <SwipeItem Text="Play" IconSource="{ex:SymbolIconSource Symbol=Play}"/>
+                        <SwipeItem IconSource="{ex:BitmapIconSource Source=/Assets/ToolkitLogo.png}"/>
                     </SwipeItems>
                 </SwipeControl.LeftItems>
             </SwipeControl>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/IconExtensions/IconExtensionsXaml.bind

@@ -26,9 +26,9 @@
                  Style="{StaticResource BodyTextBlockStyle}"/>
 
       <CommandBar>
-        <AppBarButton Icon="{ex:SymbolIcon Glyph=Play}"/>
-        <AppBarButton Icon="{ex:SymbolIcon Glyph=Pause}"/>
-        <AppBarButton Icon="{ex:SymbolIcon Glyph=Home}"/>
+        <AppBarButton Icon="{ex:SymbolIcon Symbol=Play}"/>
+        <AppBarButton Icon="{ex:SymbolIcon Symbol=Pause}"/>
+        <AppBarButton Icon="{ex:SymbolIcon Symbol=Home}"/>
       </CommandBar>
 
       <TextBlock Text="Use the FontIconSource extension to create FontIconSource items from custom glyphs."
@@ -49,6 +49,24 @@
                    HorizontalAlignment="Center" VerticalAlignment="Center"/>
       </SwipeControl>
 
+      <TextBlock Text="Use the BitmapIconSource extension to create BitmapIconSource items from image paths."
+                 TextWrapping="Wrap"
+                 Style="{StaticResource BodyTextBlockStyle}"/>
+
+      <SwipeControl BorderThickness="1"
+                    Background="#40000000"
+                    Width="300" Margin="12" Height="68">
+        <SwipeControl.LeftItems>
+          <SwipeItems Mode="Reveal">
+            <SwipeItem IconSource="{ex:BitmapIconSource Source=/Assets/ToolkitLogo.png}"/>
+            <SwipeItem IconSource="{ex:BitmapIconSource Source=/Assets/mslogo.png}"/>
+          </SwipeItems>
+        </SwipeControl.LeftItems>
+        <TextBlock Text="Swipe Right"
+                   Margin="12"
+                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
+      </SwipeControl>
+
       <TextBlock Text="Use the SymbolIconSource extension to create FontIconSource items from known symbols."
                  TextWrapping="Wrap"
                  Style="{StaticResource BodyTextBlockStyle}"/>
@@ -58,8 +76,8 @@
                     Width="300" Margin="12" Height="68">
         <SwipeControl.LeftItems>
           <SwipeItems Mode="Reveal">
-            <SwipeItem Text="Accept" IconSource="{ex:FontIconSource Glyph=Accept}"/>
-            <SwipeItem Text="Flag" IconSource="{ex:FontIconSource Glyph=Flag}"/>
+            <SwipeItem Text="Accept" IconSource="{ex:SymbolIconSource Symbol=Accept}"/>
+            <SwipeItem Text="Flag" IconSource="{ex:SymbolIconSource Symbol=Flag}"/>
           </SwipeItems>
         </SwipeControl.LeftItems>
         <TextBlock Text="Swipe Right"

Microsoft.Toolkit.Uwp.UI/Extensions/Markup/Abstract/TextIconExtension{T}.cs

@@ -0,0 +1,37 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Markup;
+
+namespace Microsoft.Toolkit.Uwp.UI.Extensions
+{
+    /// <summary>
+    /// Custom <see cref="MarkupExtension"/> which can provide <see cref="BitmapIconSource"/> values.
+    /// </summary>
+    [MarkupExtensionReturnType(ReturnType = typeof(BitmapIconSource))]
+    public sealed class BitmapIconSourceExtension : MarkupExtension
+    {
+        /// <summary>
+        /// Gets or sets the <see cref="Uri"/> representing the image to display.
+        /// </summary>
+        public Uri Source { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether to display the icon as monochrome.
+        /// </summary>
+        public bool ShowAsMonochrome { get; set; }
+
+        /// <inheritdoc/>
+        protected override object ProvideValue()
+        {
+            return new BitmapIconSource
+            {
+                ShowAsMonochrome = ShowAsMonochrome,
+                UriSource = Source
+            };
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI/Extensions/Markup/BitmapIconSourceExtension.cs

@@ -12,8 +12,13 @@ namespace Microsoft.Toolkit.Uwp.UI.Extensions
     /// Custom <see cref="MarkupExtension"/> which can provide <see cref="FontIcon"/> values.
     /// </summary>
     [MarkupExtensionReturnType(ReturnType = typeof(FontIcon))]
-    public class FontIconExtension : TextIconExtension<string>
+    public class FontIconExtension : TextIconExtension
     {
+        /// <summary>
+        /// Gets or sets the <see cref="string"/> value representing the icon to display.
+        /// </summary>
+        public string Glyph { get; set; }
+
         /// <summary>
         /// Gets or sets the font family to use to display the icon. If <see langword="null"/>, "Segoe MDL2 Assets" will be used.
         /// </summary>

Microsoft.Toolkit.Uwp.UI/Extensions/Markup/FontIconExtension.cs

@@ -12,8 +12,13 @@ namespace Microsoft.Toolkit.Uwp.UI.Extensions
     /// Custom <see cref="MarkupExtension"/> which can provide <see cref="FontIconSource"/> values.
     /// </summary>
     [MarkupExtensionReturnType(ReturnType = typeof(FontIconSource))]
-    public class FontIconSourceExtension : TextIconExtension<string>
+    public class FontIconSourceExtension : TextIconExtension
     {
+        /// <summary>
+        /// Gets or sets the <see cref="string"/> value representing the icon to display.
+        /// </summary>
+        public string Glyph { get; set; }
+
         /// <summary>
         /// Gets or sets the font family to use to display the icon. If <see langword="null"/>, "Segoe MDL2 Assets" will be used.
         /// </summary>

Microsoft.Toolkit.Uwp.UI/Extensions/Markup/FontIconSourceExtension.cs

@@ -11,14 +11,19 @@ namespace Microsoft.Toolkit.Uwp.UI.Extensions
     /// Custom <see cref="MarkupExtension"/> which can provide symbol-baased <see cref="FontIcon"/> values.
     /// </summary>
     [MarkupExtensionReturnType(ReturnType = typeof(FontIcon))]
-    public class SymbolIconExtension : TextIconExtension<Symbol>
+    public class SymbolIconExtension : TextIconExtension
     {
+        /// <summary>
+        /// Gets or sets the <see cref="Windows.UI.Xaml.Controls.Symbol"/> value representing the icon to display.
+        /// </summary>
+        public Symbol Symbol { get; set; }
+
         /// <inheritdoc/>
         protected override object ProvideValue()
         {
             var fontIcon = new FontIcon
             {
-                Glyph = unchecked((char)Glyph).ToString(),
+                Glyph = unchecked((char)Symbol).ToString(),
                 FontFamily = SegoeMDL2AssetsFontFamily,
                 FontWeight = FontWeight,
                 FontStyle = FontStyle,

Microsoft.Toolkit.Uwp.UI/Extensions/Markup/SymbolIconExtension.cs

@@ -11,14 +11,19 @@ namespace Microsoft.Toolkit.Uwp.UI.Extensions
     /// Custom <see cref="MarkupExtension"/> which can provide symbol-baased <see cref="FontIconSource"/> values.
     /// </summary>
     [MarkupExtensionReturnType(ReturnType = typeof(FontIconSource))]
-    public class SymbolIconSourceExtension : TextIconExtension<Symbol>
+    public class SymbolIconSourceExtension : TextIconExtension
     {
+        /// <summary>
+        /// Gets or sets the <see cref="Windows.UI.Xaml.Controls.Symbol"/> value representing the icon to display.
+        /// </summary>
+        public Symbol Symbol { get; set; }
+
         /// <inheritdoc/>
         protected override object ProvideValue()
         {
             var fontIcon = new FontIconSource
             {
-                Glyph = unchecked((char)Glyph).ToString(),
+                Glyph = unchecked((char)Symbol).ToString(),
                 FontFamily = SegoeMDL2AssetsFontFamily,
                 FontWeight = FontWeight,
                 FontStyle = FontStyle,

Microsoft.Toolkit.Uwp.UI/Extensions/Markup/SymbolIconSourceExtension.cs

@@ -9,7 +9,7 @@
         <!-- Workarounds for .NET Native issue in unit tests -->
         <CommandBar x:Key="DummyCommandBar">
             <AppBarButton Icon="{extensions:FontIcon Glyph=&#xE102;}"/>
-            <AppBarButton Icon="{extensions:SymbolIcon Glyph=Play}"/>
+            <AppBarButton Icon="{extensions:SymbolIcon Symbol=Play}"/>
         </CommandBar>
 
         <unitTestExtensions:MockSwipeItem
@@ -18,7 +18,11 @@
 
         <unitTestExtensions:MockSwipeItem
             x:Key="DummySwipeControl2"
-            IconSource="{extensions:SymbolIconSource Glyph=Play}"/>
+            IconSource="{extensions:SymbolIconSource Symbol=Play}"/>
+
+        <unitTestExtensions:MockSwipeItem
+            x:Key="DummySwipeControl3"
+            IconSource="{extensions:BitmapIconSource Source=/Assets/StoreLogo.png}"/>
 
         <Button x:Key="DummyButton">
             <Button.Flyout>