Sample tweaks

CommunityToolkit · Aug 17, 2023 · 819071d · 819071d
1 parent b47b447
commit 819071d
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 61 deletions.
diff --git a/components/SettingsControls/samples/ClickableSettingsCardSample.xaml b/components/SettingsControls/samples/ClickableSettingsCardSample.xaml
@@ -5,37 +5,28 @@
       xmlns:controls="using:CommunityToolkit.WinUI.Controls"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:ui="using:CommunityToolkit.WinUI"
       mc:Ignorable="d">
     <StackPanel Spacing="4">
         <controls:SettingsCard x:Name="settingsCard"
                                Description="A SettingsCard can be made clickable and you can leverage the Command property or Click event."
                                Header="A clickable SettingsCard"
+                               HeaderIcon="{ui:FontIcon Glyph=&#xE799;}"
                                IsClickEnabled="True"
-                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
-            <controls:SettingsCard.HeaderIcon>
-                <FontIcon Glyph="&#xE799;" />
-            </controls:SettingsCard.HeaderIcon>
-        </controls:SettingsCard>
+                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}" />
 
-        <controls:SettingsCard ActionIconToolTip="Open in new window"
+        <controls:SettingsCard ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
+                               ActionIconToolTip="Open in new window"
                                Description="You can customize the ActionIcon and ActionIconToolTip."
                                Header="Customizing the ActionIcon"
+                               HeaderIcon="{ui:FontIcon Glyph=&#xE774;}"
                                IsClickEnabled="True"
-                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
-            <controls:SettingsCard.HeaderIcon>
-                <FontIcon Glyph="&#xE774;" />
-            </controls:SettingsCard.HeaderIcon>
-            <controls:SettingsCard.ActionIcon>
-                <FontIcon Glyph="&#xE8A7;" />
-            </controls:SettingsCard.ActionIcon>
-        </controls:SettingsCard>
+                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}" />
+
         <controls:SettingsCard Header="Hiding the ActionIcon"
+                               HeaderIcon="{ui:FontIcon Glyph=&#xE72E;}"
                                IsActionIconVisible="False"
                                IsClickEnabled="True"
-                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
-            <controls:SettingsCard.HeaderIcon>
-                <FontIcon Glyph="&#xE72E;" />
-            </controls:SettingsCard.HeaderIcon>
-        </controls:SettingsCard>
+                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}" />
     </StackPanel>
 </Page>
diff --git a/components/SettingsControls/samples/SettingsCardSample.xaml b/components/SettingsControls/samples/SettingsCardSample.xaml
@@ -5,15 +5,14 @@
       xmlns:controls="using:CommunityToolkit.WinUI.Controls"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:ui="using:CommunityToolkit.WinUI"
       mc:Ignorable="d">
     <StackPanel Spacing="4">
         <controls:SettingsCard x:Name="settingsCard"
                                Description="This is a default card, with the Header, HeaderIcon, Description and Content set."
                                Header="This is the Header"
+                               HeaderIcon="{ui:FontIcon Glyph=&#xE799;}"
                                IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
-            <controls:SettingsCard.HeaderIcon>
-                <FontIcon Glyph="&#xE799;" />
-            </controls:SettingsCard.HeaderIcon>
             <ComboBox SelectedIndex="0">
                 <ComboBoxItem>Option 1</ComboBoxItem>
                 <ComboBoxItem>Option 2</ComboBoxItem>
@@ -23,11 +22,8 @@
 
         <controls:SettingsCard Description="You can use a FontIcon, SymbolIcon or BitmapIcon to set the cards HeaderIcon."
                                Header="Icon options"
+                               HeaderIcon="{ui:BitmapIcon Source=ms-appx:///Assets/AppTitleBar.scale-200.png}"
                                IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
-            <controls:SettingsCard.HeaderIcon>
-                <BitmapIcon ShowAsMonochrome="False"
-                            UriSource="ms-appx:///Assets/SettingsCard.png" />
-            </controls:SettingsCard.HeaderIcon>
             <ToggleSwitch />
         </controls:SettingsCard>
 
@@ -42,10 +38,8 @@
 
         <controls:SettingsCard Description="When resizing a SettingsCard, the Content will wrap vertically. You can override this breakpoint by setting the SettingsCardWrapThreshold resource. For edge cases, you can also hide the icon by setting SettingsCardWrapNoIconThreshold."
                                Header="Adaptive layouts"
+                               HeaderIcon="{ui:FontIcon Glyph=&#xE745;}"
                                IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
-            <controls:SettingsCard.HeaderIcon>
-                <FontIcon Glyph="&#xE745;" />
-            </controls:SettingsCard.HeaderIcon>
             <controls:SettingsCard.Resources>
                 <x:Double x:Key="SettingsCardWrapThreshold">800</x:Double>
                 <x:Double x:Key="SettingsCardWrapNoIconThreshold">600</x:Double>

diff --git a/components/SettingsControls/samples/SettingsControls.Samples.csproj b/components/SettingsControls/samples/SettingsControls.Samples.csproj
@@ -5,4 +5,8 @@
 
   <!-- Sets this up as a toolkit component's sample project -->
   <Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
+
+  <ItemGroup>
+    <ProjectReference Include="..\..\Extensions\src\CommunityToolkit.WinUI.Extensions.csproj"></ProjectReference>
+  </ItemGroup>
 </Project>
diff --git a/components/SettingsControls/samples/SettingsExpanderItemsSourceSample.xaml b/components/SettingsControls/samples/SettingsExpanderItemsSourceSample.xaml
@@ -7,6 +7,7 @@
       xmlns:local="using:SettingsControlsExperiment.Samples"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+      xmlns:ui="using:CommunityToolkit.WinUI"
       mc:Ignorable="d">
     <Page.Resources>
         <ResourceDictionary>
@@ -18,10 +19,8 @@
     <StackPanel Spacing="4">
         <controls:SettingsExpander Description="The SettingsExpander can use ItemsSource to define its Items."
                                    Header="Settings Expander with ItemsSource"
+                                   HeaderIcon="{ui:FontIcon Glyph=&#xEA37;}"
                                    ItemsSource="{x:Bind MyDataSet}">
-            <controls:SettingsExpander.HeaderIcon>
-                <FontIcon Glyph="&#xEA37;" />
-            </controls:SettingsExpander.HeaderIcon>
             <controls:SettingsExpander.ItemTemplate>
                 <DataTemplate x:DataType="local:MyDataModel">
                     <controls:SettingsCard Description="{x:Bind Info}"
@@ -53,10 +52,8 @@
 
         <controls:SettingsExpander Description="SettingsExpander can use a DataTemplate, DataTemplateSelector, or IElementFactory for its ItemTemplate."
                                    Header="Settings Expander with a custom ItemTemplate"
+                                   HeaderIcon="{ui:FontIcon Glyph=&#xE8FD;}"
                                    ItemsSource="{x:Bind MyDataSet}">
-            <controls:SettingsExpander.HeaderIcon>
-                <FontIcon Glyph="&#xEA37;" />
-            </controls:SettingsExpander.HeaderIcon>
             <controls:SettingsExpander.ItemTemplate>
                 <local:MyDataModelTemplateSelector>
                     <local:MyDataModelTemplateSelector.ButtonTemplate>

diff --git a/components/SettingsControls/samples/SettingsExpanderSample.xaml b/components/SettingsControls/samples/SettingsExpanderSample.xaml
@@ -5,17 +5,16 @@
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:local="using:CommunityToolkit.WinUI.Controls"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:ui="using:CommunityToolkit.WinUI"
       mc:Ignorable="d">
 
     <local:SettingsExpander x:Name="settingsCard"
                             Description="The SettingsExpander has the same properties as a Card, and you can set SettingsCard as part of the Items collection."
                             Header="SettingsExpander"
+                            HeaderIcon="{ui:FontIcon Glyph=&#xE91B;}"
                             IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}"
                             IsExpanded="{x:Bind IsCardExpanded, Mode=OneWay}">
         <!--  TODO: This should be TwoWay bound but throws compile error in Uno.  -->
-        <local:SettingsExpander.HeaderIcon>
-            <FontIcon Glyph="&#xE91B;" />
-        </local:SettingsExpander.HeaderIcon>
         <ComboBox SelectedIndex="0">
             <ComboBoxItem>Option 1</ComboBoxItem>
             <ComboBoxItem>Option 2</ComboBoxItem>

diff --git a/components/SettingsControls/samples/SettingsPageExample.xaml b/components/SettingsControls/samples/SettingsPageExample.xaml
@@ -5,6 +5,7 @@
       xmlns:controls="using:CommunityToolkit.WinUI.Controls"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:ui="using:CommunityToolkit.WinUI"
       xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       mc:Ignorable="d">
     <Page.Resources>
@@ -34,18 +35,14 @@
                 <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
                            Text="Section 1" />
                 <controls:SettingsCard Description="This is a default card, with the Header, HeaderIcon, Description and Content set"
-                                       Header="This is the Header">
-                    <controls:SettingsCard.HeaderIcon>
-                        <FontIcon Glyph="&#xE716;" />
-                    </controls:SettingsCard.HeaderIcon>
+                                       Header="This is the Header"
+                                       HeaderIcon="{ui:FontIcon Glyph=&#xE716;}">
                     <ToggleSwitch IsOn="True" />
                 </controls:SettingsCard>
 
                 <controls:SettingsExpander Description="The SettingsExpander has the same properties as a SettingsCard"
-                                           Header="SettingsExpander">
-                    <controls:SettingsExpander.HeaderIcon>
-                        <FontIcon Glyph="&#xE91B;" />
-                    </controls:SettingsExpander.HeaderIcon>
+                                           Header="SettingsExpander"
+                                           HeaderIcon="{ui:FontIcon Glyph=&#xE91B;}">
                     <Button Content="Content"
                             Style="{StaticResource AccentButtonStyle}" />
 
@@ -66,10 +63,8 @@
                 <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
                            Text="Section 2" />
                 <controls:SettingsCard Description="Another card to show grouping of cards"
-                                       Header="Another SettingsCard">
-                    <controls:SettingsCard.HeaderIcon>
-                        <FontIcon Glyph="&#xE799;" />
-                    </controls:SettingsCard.HeaderIcon>
+                                       Header="Another SettingsCard"
+                                       HeaderIcon="{ui:FontIcon Glyph=&#xE799;}">
                     <ComboBox SelectedIndex="0">
                         <ComboBoxItem>Option 1</ComboBoxItem>
                         <ComboBoxItem>Option 2</ComboBoxItem>
@@ -78,10 +73,8 @@
                 </controls:SettingsCard>
 
                 <controls:SettingsCard Description="Another card to show grouping of cards"
-                                       Header="Yet another SettingsCard">
-                    <controls:SettingsCard.HeaderIcon>
-                        <FontIcon Glyph="&#xE768;" />
-                    </controls:SettingsCard.HeaderIcon>
+                                       Header="Yet another SettingsCard"
+                                       HeaderIcon="{ui:FontIcon Glyph=&#xE768;}">
                     <Button Content="Content" />
                 </controls:SettingsCard>
 
@@ -90,15 +83,11 @@
                            Text="About" />
 
                 <controls:SettingsExpander Description="© 2023. All rights reserved."
-                                           Header="Community Toolkit Gallery">
-                    <controls:SettingsExpander.HeaderIcon>
-                        <BitmapIcon ShowAsMonochrome="False"
-                                    UriSource="ms-appx:///Assets/AppTitleBar.scale-200.png" />
-                    </controls:SettingsExpander.HeaderIcon>
+                                           Header="Community Toolkit Gallery"
+                                           HeaderIcon="{ui:BitmapIcon Source=ms-appx:///Assets/AppTitleBar.scale-200.png}">
                     <TextBlock win:IsTextSelectionEnabled="True"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                               Style="{StaticResource CaptionTextBlockStyle}"
-                               Text="Version 1.0.0.0" />
+                               Text="Version 8.0.0" />
                     <controls:SettingsExpander.Items>
                         <controls:SettingsCard HorizontalContentAlignment="Left"
                                                ContentAlignment="Left">