Icon updates and md cleanup (#158)

* First pass * Fix xaml * Adding more icons * XAML styler * More icons * Adding shadow icon * Minor sample tweak * Update tooling * Revert "Update tooling" This reverts commit e653319. * Update tooling --------- Co-authored-by: Arlo <[email protected]> Co-authored-by: Michael Hawker MSFT (XAML Llama) <[email protected]>
CommunityToolkit · Aug 23, 2023 · a4ec2ac · a4ec2ac
1 parent 46dc19b
commit a4ec2ac
Show file tree

Hide file tree

Showing 44 changed files with 125 additions and 332 deletions.
diff --git a/components/Behaviors/samples/Assets/AnimationSet.png b/components/Behaviors/samples/Assets/AnimationSet.png
diff --git a/components/Behaviors/samples/Assets/Behaviors.png b/components/Behaviors/samples/Assets/Behaviors.png
diff --git a/components/Behaviors/samples/Assets/HeaderBehaviors.png b/components/Behaviors/samples/Assets/HeaderBehaviors.png
diff --git a/components/Behaviors/samples/Headers/HeaderBehaviors.md b/components/Behaviors/samples/Headers/HeaderBehaviors.md
@@ -9,7 +9,7 @@ category: Xaml
 subcategory: Behaviors
 discussion-id: 0
 issue-id: 0
-icon: Assets/Behaviors.png
+icon: Assets/HeaderBehaviors.png
 ---
 
 The `FadeHeaderBehavior`, `QuickReturnHeaderBehavior`, and `StickyHeaderBehavior` most commonly apply behaviors to `ListView`, `GridView`, `HeaderedItemsControl`, and `HeaderedTreeView` elements in their `Header`. It can also be applied to any element contained at the top of a `ScrollViewer`.

diff --git a/components/CameraPreview/samples/CameraPreview.md b/components/CameraPreview/samples/CameraPreview.md
@@ -20,8 +20,7 @@ icon: Assets/CameraPreview.png
 ## Syntax
 
 ```xaml
-<controls:CameraPreview x:Name="CameraPreviewControl">
-</controls:CameraPreview>
+<controls:CameraPreview x:Name="CameraPreviewControl"/>
 ```
 
 ```csharp

diff --git a/components/CameraPreview/samples/CameraPreviewSample.xaml b/components/CameraPreview/samples/CameraPreviewSample.xaml
@@ -1,4 +1,4 @@
-<!--  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.  -->
+<!--  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.  -->
 <Page x:Class="CameraPreviewExperiment.Samples.CameraPreviewSample"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -12,6 +12,9 @@
     <StackPanel HorizontalAlignment="Center"
                 Orientation="Vertical"
                 Spacing="12">
+        <Button HorizontalAlignment="Center"
+                Click="CaptureButton_Click"
+                Content="Capture" />
         <controls:CameraPreview x:Name="CameraPreviewControl"
                                 Height="320"
                                 IsFrameSourceGroupButtonVisible="{x:Bind ShowCamera, Mode=OneWay}" />
@@ -20,10 +23,8 @@
                       IsOpen="False"
                       Severity="Error" />
         <Image x:Name="CurrentFrameImage"
-               Height="240"
+               Height="120"
                HorizontalAlignment="Center" />
-        <Button HorizontalAlignment="Center"
-                Click="CaptureButton_Click"
-                Content="Capture" />
+
     </StackPanel>
 </Page>
diff --git a/components/Extensions/samples/ArrayExtensions.md b/components/Extensions/samples/ArrayExtensions.md
@@ -1,8 +1,8 @@
 ---
 title: Array Extensions
 author: michael-hawker
-description: Learn about array extension methods from the community toolkit. See code examples and view requirements.
-keywords: windows 10, uwp, uwp community toolkit, uwp toolkit, Extensions, array
+description: Provides a few helpers for dealing with multidimensional and jagged arrays. Also, provides string helpers for debug output.
+keywords: Extensions, array
 dev_langs:
   - csharp
 category: Extensions
@@ -20,7 +20,7 @@ Provides a few helpers for dealing with multidimensional and jagged arrays. Also
 ## Syntax
 
 ```csharp
-using Microsoft.Toolkit.Extensions;
+using CommunityToolkit.WinUI.Extensions;
 
 bool[,] inside = new bool[4, 5];
 
@@ -37,25 +37,3 @@ Output:
  [False, False, False, False, False]]
  */
 ```
-
-## Methods
-
-| Methods | Return Type | Description |
-| -- | -- | -- |
-| Fill | void | Fills elements of a rectangular array at the given position and size to a specific value. |
-| GetRow | IEnumerable | Yields a row from a rectangular array. |
-| GetColumn | IEnumerable | Yields a column from a rectangular or jagged array. |
-| ToArrayString | string | Returns a simple string representation of an array. |
-
-## Requirements (Windows 10 Device Family)
-
-| [Device family](/windows/uwp/get-started/universal-application-platform-guide) | Universal, 10.0.16299.0 or higher |
-| --- | --- |
-| Namespace | Microsoft.Toolkit |
-| NuGet package | [Microsoft.Toolkit](https://www.nuget.org/packages/Microsoft.Toolkit/) |
-
-The Array Extensions supports .NET Standard
-
-## API
-
-* [ArrayExtensions source code](https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/rel/7.1.0/Microsoft.Toolkit/Extensions/ArrayExtensions.cs)
diff --git a/components/Extensions/samples/Assets/AttachedDropShadow.png b/components/Extensions/samples/Assets/AttachedDropShadow.png
diff --git a/components/Extensions/samples/Assets/Extensions.png b/components/Extensions/samples/Assets/Extensions.png
diff --git a/components/Extensions/samples/Assets/Shadow.png b/components/Extensions/samples/Assets/Shadow.png
diff --git a/components/Extensions/samples/AttachedDropShadow.md b/components/Extensions/samples/AttachedDropShadow.md
@@ -9,7 +9,7 @@ category: Extensions
 subcategory: Media
 discussion-id: 0
 issue-id: 0
-icon: Assets/AttachedDropShadow.png
+icon: Assets/Shadow.png
 ---
 
 If you are looking to apply shadows to rectangle or card style elements, it is recommended to use `AttachedCardShadow` instead.

diff --git a/components/Extensions/samples/AttachedDropShadowBasicSample.xaml b/components/Extensions/samples/AttachedDropShadowBasicSample.xaml
@@ -16,7 +16,7 @@
         <Border x:Name="ShadowTarget" />
         <Border Width="100"
                 Height="100"
-                BorderBrush="White"
+                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                 BorderThickness="1"
                 CornerRadius="32">
             <Border.Background>

diff --git a/components/Extensions/samples/AttachedDropShadowStyleSample.xaml b/components/Extensions/samples/AttachedDropShadowStyleSample.xaml
@@ -14,16 +14,11 @@
                                Offset="4" />
 
         <!--  Because we have to specify the shadow target, this style can at most be at the Page level  -->
-        <Style BasedOn="{StaticResource DefaultButtonStyle}"
+        <Style BasedOn="{StaticResource AccentButtonStyle}"
                TargetType="Button">
             <!--  We must use an existing resource (defined above) as a style value here  -->
             <Setter Property="ui:Effects.Shadow" Value="{StaticResource CommonShadow}" />
             <Setter Property="HorizontalAlignment" Value="Center" />
-            <!--
-                We set a solid color for the background button otherwise the shadow bleeds through as
-                the new style is transparent. See AttachedCardShadow for proper element clipping.
-            -->
-            <Setter Property="Background" Value="Red" />
         </Style>
     </Page.Resources>
 
@@ -36,8 +31,8 @@
                 All buttons on this page have the shadow from the common style!
                 The Shadow definition is Shared!
             -->
-            <Button Content="I Have a Shadow!" />
-            <Button Content="I Also have a Shadow!" />
+            <Button Content="I have a Shadow!" />
+            <Button Content="I also have a Shadow!" />
         </StackPanel>
     </Grid>
 </Page>
diff --git a/components/Extensions/samples/AttachedShadows.md b/components/Extensions/samples/AttachedShadows.md
@@ -2,14 +2,14 @@
 title: Attached Shadows
 author: michael-hawker
 description: Attached Shadows allow you to easily create shadow effects on elements.
-keywords: windows 10, windows 11, uwp, winui, winappsdk, windows community toolkit, shadow, shadows, dropshadow, dropshadowpanel, attachedshadow, attacheddropshadow, attachedcardshadow
+keywords: shadow, shadows, dropshadow, dropshadowpanel, attachedshadow, attacheddropshadow, attachedcardshadow
 dev_langs:
   - csharp
 category: Extensions
 subcategory: Media
 discussion-id: 0
 issue-id: 0
-icon: Assets/AttachedDropShadow.png
+icon: Assets/Shadow.png
 ---
 > **Platform APIs:** [`AttachedCardShadow`](/dotnet/api/microsoft.toolkit.uwp.ui.media.attachedcardshadow), [`AttachedDropShadow`](/dotnet/api/microsoft.toolkit.uwp.ui.attacheddropshadow)
 
@@ -45,8 +45,8 @@ The great benefit to the `AttachedCardShadow` is that no extra surface or elemen
 The example shows how easy it is to not only apply an `AttachedCardShadow` to an element, but use it in a style to apply to multiple elements as well:
 
 ```xaml
-    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
-    xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"/>
+    xmlns:ui="using:CommunityToolkit.WinUI"
+    xmlns:media="using:CommunityToolkit.WinUI.Media"/>
 
     <Page.Resources>
         <media:AttachedCardShadow x:Key="CommonShadow" Offset="4"/>
@@ -111,12 +111,12 @@ Either type of Attached Shadow can be easily animated using the Toolkit's [`Anim
 The following example uses a combination of behaviors and animations apis to create an animated shadow effect when hovering over an image with an [`OffsetDropShadowAnimation`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.offsetdropshadowanimation):
 
 ```xaml
-    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
-    xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
+    xmlns:ui="using:CommunityToolkit.WinUI"
+    xmlns:media="using:CommunityToolkit.WinUI.Media"
     xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
     xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
-    xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
-    xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"/>
+    xmlns:ani="using:CommunityToolkit.WinUI.Animations"
+    xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"/>
 
     <Image Height="100" Width="100"
            Source="ms-appx:///Assets/Photos/Owl.jpg">

diff --git a/components/Extensions/samples/DependencyObjectExtensions.md b/components/Extensions/samples/DependencyObjectExtensions.md
@@ -13,12 +13,8 @@ issue-id: 0
 icon: Assets/Extensions.png
 ---
 
-# DependencyObjectExtensions
-
 The [`DependencyObjectExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.DependencyObjectExtensions) type provides a collection of extensions methods for [`DependencyObject`](/uwp/api/windows.ui.xaml.dependencyobject) objects. This class exposes several APIs to aid in using the [`VisualTreeHelper`](/uwp/api/Windows.UI.Xaml.Media.VisualTreeHelper) class. There are a number of reasons why walking the visual tree might be useful, which are mentioned [in the docs](/uwp/api/windows.ui.xaml.media.visualtreehelper?#traversing-a-visual-tree).
 
-> **Platform APIs:** [`DependencyObjectExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.DependencyObjectExtensions)
-
 ## Syntax
 
 ```csharp
@@ -47,28 +43,6 @@ control = uiElement.FindAscendant("MyScrollViewer");
 control = uiElement.FindAscendant<ScrollViewer>();
 ```
 
-```vb
-' Include the namespace to access extensions
-Imports Microsoft.Toolkit.Uwp.UI.Extensions
-
-' Find a visual descendant control using its name
-Dim control = uiElement.FindDescendant("MyTextBox")
-
-' Find the first visual descendant control of a specified type
-control = uiElement.FindDescendant(Of ListView)()
-
-' Find all visual descendant controls of the specified type
-For Each child In uiElement.FindDescendants().OfType(Of ListViewItem)()
-    ' ...
-Next
-
-' Find the first visual ascendant control using its name
-control = uiElement.FindAscendant("MyScrollViewer")
-
-' Find the first visual ascendant control of a specified type
-control = uiElement.FindAscendant(Of ScrollViewer)()
-```
-
 ## Examples
 
 You can find more examples in the [unit tests](https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/rel/7.1.0/UnitTests).
diff --git a/components/Extensions/samples/DispatcherQueueExtensions.md b/components/Extensions/samples/DispatcherQueueExtensions.md
@@ -2,7 +2,7 @@
 title: DispatcherQueueExtensions
 author: Sergio0694
 description: Helpers for executing code on a specific UI thread through a DispatcherQueue instance.
-keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, extensions, winui3, xaml islands, dispatcher, dispatcherqueue, DispatcherHelper, DispatcherQueueExtensions
+keywords: dispatcher, dispatcherqueue, DispatcherHelper, DispatcherQueueExtensions
 dev_langs:
   - csharp
 category: Extensions
@@ -12,12 +12,8 @@ issue-id: 0
 icon: Assets/Extensions.png
 ---
 
-# DispatcherQueueExtensions
-
 The [`DispatcherQueueExtensions`](/dotnet/api/microsoft.toolkit.uwp.DispatcherQueueExtensions) type provides a collection of extensions methods for [`DispatcherQueue`](/uwp/api/windows.system.dispatcherqueue) objects that makes it easier to execute code on a specific UI thread. A `DispatcherQueue` instance can be retrieved and cached for later use, and then used through any of the available helper methods to dispatch a delegate invocation on it.
 
-> **Platform APIs:** [`DispatcherQueueExtensions`](/dotnet/api/microsoft.toolkit.uwp.DispatcherQueueExtensions)
-
 ## Syntax
 
 The `DispatcherQueueExtensions` type exposes a number of overloads of its `EnqueueAsync` method to dispatch either synchronous or asynchronous delegates, and to optionally have them return a value that is then relayed back to the caller through an awaitable task. Here are some examples of how these extension methods can be used:

diff --git a/components/Extensions/samples/EnumValuesExtension.md b/components/Extensions/samples/EnumValuesExtension.md
@@ -2,7 +2,7 @@
 title: EnumValuesExtensions
 author: Sergio0694
 description: A markup extension that returns a collection of values of a specific enum type.
-keywords: windows 10, uwp, uwp community toolkit, uwp toolkit, markup extension, XAML, markup, enum
+keywords: XAML, markup, enum
 dev_langs:
   - csharp
 category: Extensions
@@ -12,8 +12,6 @@ issue-id: 0
 icon: Assets/Extensions.png
 ---
 
-# EnumValuesExtensions
-
 The [`EnumValuesExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.EnumValuesExtensions) type implements a markup extension that returns a collection of values of a specific enum type. It can be useful to easily bind a collection of all possible values from a given enum type to a UI element such as a [`ComboBox`](/windows/uwp/design/controls-and-patterns/combo-box) or some other items container or selector control.
 
 > **Platform APIs:** [`EnumValuesExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.EnumValuesExtensions)
@@ -24,7 +22,7 @@ Assuming we had an `Animal` enum type and we wanted the user to pick one of the
 
 ```xaml
 <ComboBox
-    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
+    xmlns:ui="using:CommunityToolkit.WinUI"
     xmlns:enums="using:MyApplication.Enums"
     ItemsSource="{ui:EnumValues Type=enums:Animal}"
     SelectedIndex="0"/>

diff --git a/components/Extensions/samples/FrameworkElementExtensions.md b/components/Extensions/samples/FrameworkElementExtensions.md
@@ -2,7 +2,7 @@
 title: FrameworkElement Extensions
 author: Sergio0694
 description: Provides attached dependency properties and extensions for the FrameworkElement type.
-keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, FrameworkElement, extensions
+keywords: FrameworkElement, extensions
 dev_langs:
   - csharp
   - vb
@@ -13,12 +13,8 @@ issue-id: 0
 icon: Assets/Extensions.png
 ---
 
-# FrameworkElement Extensions
-
 [`FrameworkElementExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.frameworkelementextensions) provides a collection of attached dependency properties, helpers and extension methods to work with [`FrameworkElement`](/uwp/api/windows.ui.xaml.frameworkelement) objects. In particular, it also includes a series of extension methods to explore the logical tree from a given UI element and find child or parent objects.
 
-> **Platform APIs:** [`FrameworkElementExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.frameworkelementextensions), [`DependencyObjectExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.DependencyObjectExtensions)
-
 ## Logical tree extensions
 
 The `FindChild` and `FindParent` methods (and their overloads) provide an easy way to explore the logical tree starting from a given `FrameworkElement` instance and find other controls connected to it.
@@ -29,7 +25,7 @@ Here are some examples of how these extensions can be used:
 
 ```csharp
 // Include the namespace to access the extensions
-using Microsoft.Toolkit.Uwp.UI;
+using CommunityToolkit.WinUI;
 
 // Find a logical child control using its name
 var control = uiElement.FindChild("MyTextBox");
@@ -56,32 +52,6 @@ control = uiElement.FindParent<Grid>();
 var content = uiElement.GetContentControl();
 ```
 
-```vb
-' Include the namespace to access the extensions
-Imports Microsoft.Toolkit.Uwp.UI
-
-' Find a logical child control using its name
-Dim control = uiElement.FindChild("MyTextBox")
-
-' Find the first logical child control of a specified type
-control = uiElement.FindChild(Of ListView)()
-
-' Find all the child nodes of a specified type. Like in the C# example,
-' here we are also using a LINQ extension to filter the returned items.
-For Each child In uiElement.FindChildren().OfType(Of ListViewItem)()
-    ' ...
-Next
-
-' Find the first logical parent using its name
-control = uiElement.FindParent("MyGrid")
-
-' Find the first logical parent control of a specified type
-control = uiElement.FindParent(Of Grid)()
-
-' Retrieves the Content for the specified control from whatever its "Content" property may be
-Dim content = uiElement.GetContentControl()
-```
-
 ## EnableActualSizeBinding
 
 The `EnableActualSizeBinding` property allows you to enable/disable the binding for the `ActualHeight` and `ActualWidth` extensions. The `ActualHeight` and `ActualWidth` properties then make it possible to bind to the `ActualHeight` and `ActualWidth` properties of a given object.
@@ -117,7 +87,7 @@ Here is how you can easily set a custom cursor type for a target `FrameworkEleme
     x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.MouseCursorPage"
     xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI">
+    xmlns:ui="using:CommunityToolkit.WinUI">
 
     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <Border

diff --git a/components/Extensions/samples/HyperlinkExtensions.md b/components/Extensions/samples/HyperlinkExtensions.md
@@ -12,11 +12,8 @@ issue-id: 0
 icon: Assets/Extensions.png
 ---
 
-# HyperlinkExtensions
-
 The [HyperlinkExtensions](/dotnet/api/microsoft.toolkit.uwp.ui.hyperlinkextensions) class allows for a [`Hyperlink`](/uwp/api/Windows.UI.Xaml.Documents.Hyperlink) element to invoke the execute method on a bound [`ICommand`](/uwp/api/Windows.UI.Xaml.Input.ICommand) instance when clicked.
 
-> **Platform APIs:** [HyperlinkExtensions](/dotnet/api/microsoft.toolkit.uwp.ui.hyperlinkextensions)
 
 ## How it works
 
@@ -25,7 +22,7 @@ Using the `HyperlinkExtensions` attached properties simply requires you to assig
 ```xaml
 <!-- Use Hyperlink in a wrapped TextBlock with text either side and ensure it executes a
      command when clicked, passing the current data context as the command parameter -->
-<TextBlock xmlns:ui="using:Microsoft.Toolkit.Uwp.UI">
+<TextBlock xmlns:ui="using:CommunityToolkit.WinUI">
     <Run>Some leading text with a</Run>
         <Hyperlink
             ui:HyperlinkExtensions.Command="{Binding HyperlinkClicked}"