FontIcon markup extension

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -520,6 +520,9 @@
     <Compile Include="SamplePages\ImageEx\ImageExLazyLoadingControl.xaml.cs">
       <DependentUpon>ImageExLazyLoadingControl.xaml</DependentUpon>
     </Compile>
+    <Compile Include="SamplePages\IconExtensions\IconExtensionsPage.xaml.cs">
+      <DependentUpon>IconExtensionsPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="SamplePages\ObservableGroup\ObservableGroupPage.xaml.cs">
       <DependentUpon>ObservableGroupPage.xaml</DependentUpon>
     </Compile>
@@ -581,6 +584,7 @@
     <Content Include="SamplePages\Eyedropper\EyedropperXaml.bind" />
     <Content Include="SamplePages\Eyedropper\EyedropperCode.bind" />
     <Content Include="SamplePages\TokenizingTextBox\TokenizingTextBoxCode.bind" />
+    <Content Include="SamplePages\IconExtensions\IconExtensionsXaml.bind" />
     <Content Include="SamplePages\WrapLayout\WrapLayout.bind" />
     <Content Include="SamplePages\StaggeredLayout\StaggeredLayout.bind" />
     <Content Include="SamplePages\ObservableGroup\ObservableGroup.bind" />
@@ -990,6 +994,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="SamplePages\IconExtensions\IconExtensionsPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="SamplePages\ObservableGroup\ObservableGroupPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

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

@@ -0,0 +1,34 @@
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.IconExtensionsPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:ex="using:Microsoft.Toolkit.Uwp.UI.Extensions"
+      mc:Ignorable="d">
+    <Grid>
+        <StackPanel>
+
+            <CommandBar>
+                <AppBarButton Icon="{ex:FontIcon Glyph=&#xE102;}"/>
+                <AppBarButton Icon="{ex:SymbolIcon Glyph=Play}"/>
+            </CommandBar>
+
+            <SwipeControl>
+                <SwipeControl.LeftItems>
+                    <SwipeItems Mode="Reveal">
+                        <SwipeItem Text="Accept" IconSource="{ex:FontIconSource Glyph=&#xE10B;}"/>
+                        <SwipeItem Text="Play" IconSource="{ex:SymbolIconSource Glyph=Play}"/>
+                    </SwipeItems>
+                </SwipeControl.LeftItems>
+            </SwipeControl>
+
+            <Button>
+                <Button.Flyout>
+                    <MenuFlyout>
+                        <MenuFlyoutItem Icon="{ex:BitmapIcon Source=/Assets/ToolkitLogo.png}" />
+                    </MenuFlyout>
+                </Button.Flyout>
+            </Button>
+        </StackPanel>
+    </Grid>
+</Page>

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

@@ -0,0 +1,30 @@
+// 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.Linq;
+using Microsoft.Toolkit.Uwp.UI.Animations.Behaviors;
+using Microsoft.Toolkit.Uwp.UI.Extensions;
+using Microsoft.Xaml.Interactivity;
+using Windows.UI.Xaml;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    /// <summary>
+    /// A page that shows how to use the offset behavior.
+    /// </summary>
+    public sealed partial class IconExtensionsPage : IXamlRenderListener
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="IconExtensionsPage"/> class.
+        /// </summary>
+        public IconExtensionsPage()
+        {
+            InitializeComponent();
+        }
+
+        public void OnXamlRendered(FrameworkElement control)
+        {
+        }
+    }
+}

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

@@ -0,0 +1,86 @@
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp.SamplePages.IconExtensionsPage"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:ex="using:Microsoft.Toolkit.Uwp.UI.Extensions"
+    mc:Ignorable="d">
+  <Grid>
+    <StackPanel Spacing="8"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center">
+
+      <TextBlock Text="Use the FontIcon extension to create FontIcon items from custom glyphs."
+                 TextWrapping="Wrap"
+                 Style="{StaticResource BodyTextBlockStyle}"/>
+
+      <CommandBar>
+        <AppBarButton Icon="{ex:FontIcon Glyph=&#xE102;}"/>
+        <AppBarButton Icon="{ex:FontIcon Glyph=&#xE103;}"/>
+        <AppBarButton Icon="{ex:FontIcon Glyph=&#xE10F;}"/>
+      </CommandBar>
+
+      <TextBlock Text="Use the SymbolIcon extension to create FontIcon items from known symbols."
+                 TextWrapping="Wrap"
+                 Style="{StaticResource BodyTextBlockStyle}"/>
+
+      <CommandBar>
+        <AppBarButton Icon="{ex:SymbolIcon Glyph=Play}"/>
+        <AppBarButton Icon="{ex:SymbolIcon Glyph=Pause}"/>
+        <AppBarButton Icon="{ex:SymbolIcon Glyph=Home}"/>
+      </CommandBar>
+
+      <TextBlock Text="Use the FontIconSource extension to create FontIconSource items from custom glyphs."
+                 TextWrapping="Wrap"
+                 Style="{StaticResource BodyTextBlockStyle}"/>
+
+      <SwipeControl BorderThickness="1"
+                    Background="#40000000"
+                    Width="300" Margin="12" Height="68">
+        <SwipeControl.LeftItems>
+          <SwipeItems Mode="Reveal">
+            <SwipeItem Text="Accept" IconSource="{ex:FontIconSource Glyph=&#xE10B;}"/>
+            <SwipeItem Text="Flag" IconSource="{ex:FontIconSource Glyph=&#xE129;}"/>
+          </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}"/>
+
+      <SwipeControl BorderThickness="1"
+                    Background="#40000000"
+                    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}"/>
+          </SwipeItems>
+        </SwipeControl.LeftItems>
+        <TextBlock Text="Swipe Right"
+                   Margin="12"
+                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
+      </SwipeControl>
+
+      <TextBlock Text="Use the BitmapIcon extension to create BitmapIcon items from images."
+                 TextWrapping="Wrap"
+                 Style="{StaticResource BodyTextBlockStyle}"/>
+
+      <Button Content="Click me!">
+        <Button.Flyout>
+          <MenuFlyout>
+            <MenuFlyoutItem Text="Toolkit app"
+                            Icon="{ex:BitmapIcon Source=/Assets/ToolkitLogo.png}" />
+            <MenuFlyoutItem Text="Microsoft"
+                            Icon="{ex:BitmapIcon Source=/Assets/mslogo.png}" />
+          </MenuFlyout>
+        </Button.Flyout>
+      </Button>
+    </StackPanel>
+  </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

@@ -1223,7 +1223,16 @@
         "Icon": "/SamplePages/OnDevice/OnDevice.png",
         "XamlCodeFile": "OnDeviceXaml.bind",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/extensions/OnDeviceMarkup.md"
-      }
+      },
+	  {
+	    "Name": "IconExtensions",
+	    "Type": "IconExtensionsPage",
+	    "About": "Markup extensions to easily create various types of icons.",
+	    "CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI/Extensions/Markup/FontIconExtension",
+	    "XamlCodeFile": "IconExtensionsXaml.bind",
+	    "Icon": "/Assets/Helpers.png", 
+	    "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/extensions/IconExtensions.md"
+	  }
     ]
   },
   {

Microsoft.Toolkit.Uwp.UI/Extensions/Markup/Abstract/TextIconExtension.cs

@@ -0,0 +1,58 @@
+// 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.Text;
+using Windows.UI.Xaml.Markup;
+using Windows.UI.Xaml.Media;
+
+namespace Microsoft.Toolkit.Uwp.UI.Extensions
+{
+    /// <summary>
+    /// An abstract <see cref="MarkupExtension"/> which to produce text-based icons.
+    /// </summary>
+    public abstract class TextIconExtension : MarkupExtension
+    {
+        /// <summary>
+        /// Gets or sets the size of the icon to display.
+        /// </summary>
+        public double FontSize { get; set; }
+
+        [ThreadStatic]
+        private static FontFamily segoeMDL2AssetsFontFamily;
+
+        /// <summary>
+        /// Gets the reusable "Segoe MDL2 Assets" <see cref="FontFamily"/> instance.
+        /// </summary>
+        protected static FontFamily SegoeMDL2AssetsFontFamily
+        {
+            get => segoeMDL2AssetsFontFamily ??= new FontFamily("Segoe MDL2 Assets");
+        }
+
+        /// <summary>
+        /// Gets or sets the thickness of the icon glyph.
+        /// </summary>
+        public FontWeight FontWeight { get; set; } = FontWeights.Normal;
+
+        /// <summary>
+        /// Gets or sets the font style for the icon glyph.
+        /// </summary>
+        public FontStyle FontStyle { get; set; } = FontStyle.Normal;
+
+        /// <summary>
+        /// Gets or sets the foreground <see cref="Brush"/> for the icon.
+        /// </summary>
+        public Brush Foreground { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether automatic text enlargement, to reflect the system text size setting, is enabled.
+        /// </summary>
+        public bool IsTextScaleFactorEnabled { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether the icon is mirrored when the flow direction is right to left.
+        /// </summary>
+        public bool MirroredWhenRightToLeft { get; set; }
+    }
+}

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

@@ -0,0 +1,20 @@
+// 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 Windows.UI.Xaml.Markup;
+
+namespace Microsoft.Toolkit.Uwp.UI.Extensions
+{
+    /// <summary>
+    /// An abstract <see cref="MarkupExtension"/> which to produce text-based icons.
+    /// </summary>
+    /// <typeparam name="T">The type representing the glyph for the current icon.</typeparam>
+    public abstract class TextIconExtension<T> : TextIconExtension
+    {
+        /// <summary>
+        /// Gets or sets the <typeparamref name="T"/> value representing the icon to display.
+        /// </summary>
+        public T Glyph { get; set; }
+    }
+}

Microsoft.Toolkit.Uwp.UI/Extensions/Markup/BitmapIconExtension.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="BitmapIcon"/> values.
+    /// </summary>
+    [MarkupExtensionReturnType(ReturnType = typeof(BitmapIcon))]
+    public sealed class BitmapIconExtension : 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 BitmapIcon
+            {
+                ShowAsMonochrome = ShowAsMonochrome,
+                UriSource = Source
+            };
+        }
+    }
+}

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

@@ -0,0 +1,48 @@
+// 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 Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Markup;
+using Windows.UI.Xaml.Media;
+
+namespace Microsoft.Toolkit.Uwp.UI.Extensions
+{
+    /// <summary>
+    /// Custom <see cref="MarkupExtension"/> which can provide <see cref="FontIcon"/> values.
+    /// </summary>
+    [MarkupExtensionReturnType(ReturnType = typeof(FontIcon))]
+    public class FontIconExtension : TextIconExtension<string>
+    {
+        /// <summary>
+        /// Gets or sets the font family to use to display the icon. If <see langword="null"/>, "Segoe MDL2 Assets" will be used.
+        /// </summary>
+        public FontFamily FontFamily { get; set; }
+
+        /// <inheritdoc/>
+        protected override object ProvideValue()
+        {
+            var fontIcon = new FontIcon
+            {
+                Glyph = Glyph,
+                FontFamily = FontFamily ?? SegoeMDL2AssetsFontFamily,
+                FontWeight = FontWeight,
+                FontStyle = FontStyle,
+                IsTextScaleFactorEnabled = IsTextScaleFactorEnabled,
+                MirroredWhenRightToLeft = MirroredWhenRightToLeft
+            };
+
+            if (FontSize > 0)
+            {
+                fontIcon.FontSize = FontSize;
+            }
+
+            if (Foreground != null)
+            {
+                fontIcon.Foreground = Foreground;
+            }
+
+            return fontIcon;
+        }
+    }
+}