Skip to content

Commit

Permalink
SettingsExpander (#253)
Browse files Browse the repository at this point in the history
* Adding new controls

* Uno fixes

* Added SettingsExpanderSample

* Adding sampleref

* Bugfixes

* CI fix

* Fix CI

* Adding ExpanderV2

* CI fix

* Update Generic.xaml

* Add overrides

* Uno fixes

* CI fix

* Update ExampleSettingsControlsTestClass.cs

* Simplifing state setting

* Revert "Simplifing state setting"

This reverts commit a014377.

* Quick fix to enable building locally to workaround unoplatform/uno#9297

* Update labs/SettingsControls/samples/SettingsControls.Samples/SettingsExpanderSample.xaml

Co-authored-by: Michael Hawker MSFT (XAML Llama) <24302614+michael-hawker@users.noreply.github.com>

* Update labs/SettingsControls/samples/SettingsControls.Samples/SettingsExpanderSample.xaml

Co-authored-by: Michael Hawker MSFT (XAML Llama) <24302614+michael-hawker@users.noreply.github.com>

* Tweaks

* Renamed ButtonIcon to ActionIcon

* Make SettingsExpander Content a ContentProperty

* File rename

* Making the StyleSelector work

* Add github.com/rudyhuyn/XamlPlus Attached Style Helper

Resolve issue with ToggleSwitch override due to microsoft/microsoft-ui-xaml#7792

* Add binding to Expander option toggle

Note: should be TwoWay bound but issue on Uno, added note here for now: #207 (comment)

* Removing HeaderedContentControl from the template

* XAML styling

* Removed HeaderedContentControl out of the SettingsCard template

* Adding WrapThreshold

* Fix failing test in SettingsCard tests

* Tweaked SettingsCard sample

* XAML styling

* Remove SettingsExpanderItem and use SettingsCard directly

Allows for better interop to just cut/paste SettingsCards in/out of Expanders 🙂

* UI tweaks to samples and SettingsCard to render the correct height

* Adding VSM only

* Temp: Comment out column trigger which was causing control to grow after state change and cause infinite layout cycle

i.e. when the break point was reached (e.g. control size 560), VSM was changing the layout and now control size would be larger again (e.g. 605), which would then turn off trigger and re-layout back to old size which would now be smaller again, etc...

We need to ensure the transition between the Right and Vertical states doesn't increase the width of the control.

* Remove redundant minwidth

* Clean up code, comments

* Code cleanup SettingsCard

* Settings ToolkitSampleRenderer alignment to Stretch

* Bumping version number

* Removing HeaderedContentControl

* Removing remaining reference

* Add triggers

* Update Generic.xaml

* Update Generic.xaml

* Use ThemeResource instead of StaticResource

Co-authored-by: michael-hawker <24302614+michael-hawker@users.noreply.github.com>
Co-authored-by: Rudy Huyn <rudyhuyn@gmail.com>
  • Loading branch information
3 people authored Oct 13, 2022
1 parent 12013d4 commit 919a61f
Show file tree
Hide file tree
Showing 26 changed files with 2,119 additions and 361 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,8 @@
<ContentControl x:Name="PageControl"
Grid.Row="1"
Padding="24"
HorizontalAlignment="Left"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Content="{x:Bind SampleControlInstance, Mode=OneWay}" />


Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,35 @@
xmlns:labs="using:CommunityToolkit.Labs.WinUI"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<StackPanel Spacing="3">

<StackPanel Spacing="6">
<labs:SettingsCard Description="Windows and apps might use your country or region to give you local content"
Header="Country or region"
Icon="&#xE736;"
<TextBlock Margin="1,0,0,5"
Style="{StaticResource BodyStrongTextBlockStyle}"
Text="Group of settings" />
<labs:SettingsCard x:Name="settingsCard"
HorizontalAlignment="Stretch"
Description="This card has set the WrapThreshold to 520 so it wraps the Content on resizing"
Header="Adjust the resolution to fit your connected display"
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
<labs:SettingsCard.Resources>
<x:Double x:Key="SettingsCardWrapThreshold">720</x:Double>
</labs:SettingsCard.Resources>
<labs:SettingsCard.HeaderIcon>
<FontIcon Glyph="&#xE799;" />
</labs:SettingsCard.HeaderIcon>
<ComboBox SelectedIndex="0">
<ComboBoxItem>United States</ComboBoxItem>
<ComboBoxItem>The Netherlands</ComboBoxItem>
<ComboBoxItem>Germany</ComboBoxItem>
<ComboBoxItem>(2496 x 1664 (Recommended)</ComboBoxItem>
<ComboBoxItem>2048 x 1536</ComboBoxItem>
<ComboBoxItem>1920 x 1440</ComboBoxItem>
</ComboBox>

</labs:SettingsCard>


<labs:SettingsCard Description="Control if a feature is enabled or disabled"
Header="Enable feature"
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
<ToggleSwitch />
</labs:SettingsCard>

<labs:SettingsCard Header="Preferred languages"
Expand All @@ -27,29 +45,32 @@
<Button Content="Open Phone Link" />
</labs:SettingsCard>

<TextBlock Margin="1,29,0,5"
Style="{StaticResource BodyStrongTextBlockStyle}"
Text="Another group of settings" />

<labs:SettingsCard Click="OnCardClicked"
Description="When IsClickEnabled the Click event can be used to trigger an action"
Description="With other custom content"
Header="Clickable card"
Icon="&#xE7EF;"
IsClickEnabled="True"
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
<FontIcon FontSize="14"
Glyph="&#xE8A7;" />
<Button Content="Add device"
Style="{StaticResource AccentButtonStyle}" />
</labs:SettingsCard>

<labs:SettingsCard Click="OnCardClicked"
Description="You can also have other custom content when the card is clickable"
Header="Clickable + content"
<labs:SettingsCard ActionIconToolTip="Open in browser"
Click="OnCardClicked"
Description="The ActionIcon can be customized"
Header="Clickable card"
IsClickEnabled="True"
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
<StackPanel Orientation="Horizontal"
Spacing="12">
<Button Content="Add device"
Style="{StaticResource AccentButtonStyle}" />
<labs:SettingsCard.HeaderIcon>
<FontIcon Glyph="&#xE7EF;" />
</labs:SettingsCard.HeaderIcon>
<labs:SettingsCard.ActionIcon>
<FontIcon FontSize="14"
Glyph="&#xE76C;" />
</StackPanel>
Glyph="&#xe8a7;" />
</labs:SettingsCard.ActionIcon>
</labs:SettingsCard>
</StackPanel>
</Page>

Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

namespace SettingsControlsExperiment.Samples;

[ToolkitSampleBoolOption("IsCardEnabled", "IsEnabled", true)]
[ToolkitSampleBoolOption("IsCardEnabled", "Is Enabled", true)]
// Single values without a colon are used for both label and value.
// To provide a different label for the value, separate with a colon surrounded by a single space on both sides ("label : value").
//[ToolkitSampleMultiChoiceOption("TextSize", title: "Text size", "Small : 12", "Normal : 16", "Big : 32")]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@
<PropertyGroup>
<RootNamespace>SettingsControlsExperiment.Samples</RootNamespace>
<AssemblyName>SettingsControlsExperiment.Samples</AssemblyName>
<LangVersion>10.0</LangVersion>
</PropertyGroup>

<ItemGroup>
<UpToDateCheckInput Remove="SettingsCardSample.xaml" />
<UpToDateCheckInput Remove="SettingsExpanderSample.xaml" />
</ItemGroup>

<!-- Sample XAML Pages and Markdown files are automatically included, and don't need to be specified here. -->
Expand All @@ -30,4 +32,10 @@
<DependentUpon>SettingsCardSample.xaml</DependentUpon>
</Compile>
</ItemGroup>

<ItemGroup>
<Compile Update="SettingsExpanderSample.xaml.cs">
<DependentUpon>SettingsExpanderSample.xaml</DependentUpon>
</Compile>
</ItemGroup>
</Project>
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,8 @@ By setting the IsClickEnabled property you can turn the SettingsCard into a butt
This can be useful whenever you want your settings component to e.g. navigate to a detail page or open an external link.

> [!SAMPLE SettingsCardSample]

The SettingsExpander can be used to group settings into a single card. SettingsCard items can be added to display settings - the orientation can be set to Vertical, Left and Right.

> [!SAMPLE SettingsExpanderSample]
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!-- 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="SettingsControlsExperiment.Samples.SettingsExpanderSample"
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:labs="using:CommunityToolkit.Labs.WinUI"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<StackPanel Spacing="3">
<labs:SettingsExpander x:Name="settingsCard"
Description="A picture background applies to your current desktop. A solid color or slideshow background apply to all your desktops."
Header="Personalize your background"
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}"
IsExpanded="{x:Bind IsCardExpanded, Mode=OneWay}">
<!-- TODO: This should be TwoWay bound but throws compile error in Uno. -->
<labs:SettingsExpander.HeaderIcon>
<FontIcon Glyph="&#xE91B;" />
</labs:SettingsExpander.HeaderIcon>

<ComboBox SelectedIndex="0">
<ComboBoxItem>Picture</ComboBoxItem>
<ComboBoxItem>Solid color</ComboBoxItem>
<ComboBoxItem>Slideshow</ComboBoxItem>
<ComboBoxItem>Windows spotlight</ComboBoxItem>
</ComboBox>

<labs:SettingsExpander.Items>
<labs:SettingsCard ContentAlignment="Vertical"
Header="Vertically aligned">
<GridView SelectedIndex="1">
<GridViewItem>
<Border Width="64"
Height="64"
Background="#0078D4"
CornerRadius="4" />
</GridViewItem>
<GridViewItem>
<Border Width="64"
Height="64"
Background="#005EB7"
CornerRadius="4" />
</GridViewItem>
<GridViewItem>
<Border Width="64"
Height="64"
Background="#003D92"
CornerRadius="4" />
</GridViewItem>
<GridViewItem>
<Border Width="64"
Height="64"
Background="#001968"
CornerRadius="4" />
</GridViewItem>
</GridView>

</labs:SettingsCard>
<labs:SettingsCard Description="There can be a description too!"
Header="A control that is right aligned (default)">
<Button Content="Browse photos" />
</labs:SettingsCard>
<labs:SettingsCard ContentAlignment="Left">
<CheckBox Content="A control that is left aligned" />
</labs:SettingsCard>
<labs:SettingsCard Header="Can be clicked as well"
IsClickEnabled="True" />

<labs:SettingsCard Header="A togglable setting">
<ToggleSwitch />
</labs:SettingsCard>

<labs:SettingsCard Header="Individual settings can be disabled"
IsClickEnabled="True"
IsEnabled="False">
<labs:SettingsCard.ActionIcon>
<FontIcon FontSize="14"
Glyph="&#xe8a7;" />
</labs:SettingsCard.ActionIcon>
</labs:SettingsCard>
</labs:SettingsExpander.Items>
</labs:SettingsExpander>
</StackPanel>
</Page>
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// 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.

namespace SettingsControlsExperiment.Samples;

[ToolkitSampleBoolOption("IsCardEnabled", "Is Enabled", true)]
[ToolkitSampleBoolOption("IsCardExpanded", "Is Expanded", false)]
// Single values without a colon are used for both label and value.
// To provide a different label for the value, separate with a colon surrounded by a single space on both sides ("label : value").
//[ToolkitSampleMultiChoiceOption("TextSize", title: "Text size", "Small : 12", "Normal : 16", "Big : 32")]
//[ToolkitSampleMultiChoiceOption("TextFontFamily", title: "Font family", "Segoe UI", "Arial", "Consolas")]
//[ToolkitSampleMultiChoiceOption("TextForeground", title: "Text foreground",
// "Teal : #0ddc8c",
// "Sand : #e7a676",
// "Dull green : #5d7577")]

[ToolkitSample(id: nameof(SettingsExpanderSample), "SettingsExpander", description: "The SettingsExpander can be used to group settings. SettingsCards can be customized in terms of alignment and content.")]
public sealed partial class SettingsExpanderSample : Page
{
public SettingsExpanderSample()
{
this.InitializeComponent();
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<IsGtk>false</IsGtk>
<IsGtkHead>false</IsGtkHead>
<IsGtkLib>false</IsGtkLib>
<LangVersion>10.0</LangVersion>
</PropertyGroup>
<Import Project="$(RepositoryDirectory)common\Labs.ProjectIdentifiers.props" />

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,13 @@
<Description>
This package contains SettingsControls.
</Description>
<Version>0.0.1</Version>
<Version>0.0.2</Version>
<LangVersion>10.0</LangVersion>
</PropertyGroup>

<ItemGroup>
<UpToDateCheckInput Remove="SettingsCard.xaml" />
<None Update="SettingsExpander\SettingsExpander.xaml">
<Generator>MSBuild:Compile</Generator>
</None>
</ItemGroup>

<!-- XAML Pages are automatically included, and don't need to be specified here. -->
</Project>
10 changes: 5 additions & 5 deletions labs/SettingsControls/src/Dependencies.props
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,21 @@
<Project>
<!-- WinUI 2 / UWP -->
<ItemGroup Condition="'$(IsUwp)' == 'true'">
<!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
<PackageReference Include="Microsoft.Toolkit.Uwp.UI" Version="7.1.2"/>
</ItemGroup>

<!-- WinUI 2 / Uno -->
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
<!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
<PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI" Version="7.1.11"/>
</ItemGroup>

<!-- WinUI 3 / WinAppSdk -->
<ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
<!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
<PackageReference Include="CommunityToolkit.WinUI.UI" Version="7.1.2"/>
</ItemGroup>

<!-- WinUI 3 / Uno -->
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
<!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
</ItemGroup>
<PackageReference Include="Uno.CommunityToolkit.WinUI.UI" Version="7.1.100-dev.15.g12261e2626"/>
</ItemGroup>
</Project>
17 changes: 17 additions & 0 deletions labs/SettingsControls/src/Helpers/ControlSizeTrigger.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// 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.

#if WINAPPSDK
using ToolkitCST = CommunityToolkit.WinUI.UI.Triggers.ControlSizeTrigger;
#else
using ToolkitCST = Microsoft.Toolkit.Uwp.UI.Triggers.ControlSizeTrigger;
#endif

namespace CommunityToolkit.Labs.WinUI;
/// <summary>
/// Provide an abstraction around the Toolkit ControlSizeTrigger for both UWP and WinUI 3 in the same namespace (until 8.0).
/// </summary>
public partial class ControlSizeTrigger : ToolkitCST
{
}
17 changes: 17 additions & 0 deletions labs/SettingsControls/src/Helpers/IsEqualStateTrigger.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// 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.

#if WINAPPSDK
using ToolkitIEST = CommunityToolkit.WinUI.UI.Triggers.IsEqualStateTrigger;
#else
using ToolkitIEST = Microsoft.Toolkit.Uwp.UI.Triggers.IsEqualStateTrigger;
#endif

namespace CommunityToolkit.Labs.WinUI;
/// <summary>
/// Provide an abstraction around the Toolkit IsEqualStateTrigger for both UWP and WinUI 3 in the same namespace (until 8.0).
/// </summary>
public partial class IsEqualStateTrigger : ToolkitIEST
{
}
Loading

0 comments on commit 919a61f

Please sign in to comment.