Skip to content

Commit 8774760

Browse files
niels9001Arlodotexe
niels9001
and
Arlodotexe
authored
Porting SettingsControls (#154)
* Porting * XAML styler * Remove old tests * Add tests * Use project ref instead of nuget package * Adding icons --------- Co-authored-by: Arlo <[email protected]>
1 parent 15ce805 commit 8774760

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+3810
-0
lines changed

‎components/SettingsControls/OpenSolution.bat‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@ECHO OFF
2+
3+
powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

‎components/SettingsControls/samples/Assets/SettingsCard.png‎

2.42 KB
Loading

‎components/SettingsControls/samples/Assets/SettingsExpander.png‎

2.96 KB
Loading

‎components/SettingsControls/samples/ClickableSettingsCardSample.xaml‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!-- 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. -->
2+
<Page x:Class="SettingsControlsExperiment.Samples.ClickableSettingsCardSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
6+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
mc:Ignorable="d">
9+
<StackPanel Spacing="4">
10+
<controls:SettingsCard x:Name="settingsCard"
11+
Description="A SettingsCard can be made clickable and you can leverage the Command property or Click event."
12+
Header="A clickable SettingsCard"
13+
IsClickEnabled="True"
14+
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
15+
<controls:SettingsCard.HeaderIcon>
16+
<FontIcon Glyph="&#xE799;" />
17+
</controls:SettingsCard.HeaderIcon>
18+
</controls:SettingsCard>
19+
20+
<controls:SettingsCard ActionIconToolTip="Open in new window"
21+
Description="You can customize the ActionIcon and ActionIconToolTip."
22+
Header="Customizing the ActionIcon"
23+
IsClickEnabled="True"
24+
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
25+
<controls:SettingsCard.HeaderIcon>
26+
<FontIcon Glyph="&#xE774;" />
27+
</controls:SettingsCard.HeaderIcon>
28+
<controls:SettingsCard.ActionIcon>
29+
<FontIcon Glyph="&#xE8A7;" />
30+
</controls:SettingsCard.ActionIcon>
31+
</controls:SettingsCard>
32+
<controls:SettingsCard Header="Hiding the ActionIcon"
33+
IsActionIconVisible="False"
34+
IsClickEnabled="True"
35+
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
36+
<controls:SettingsCard.HeaderIcon>
37+
<FontIcon Glyph="&#xE72E;" />
38+
</controls:SettingsCard.HeaderIcon>
39+
</controls:SettingsCard>
40+
</StackPanel>
41+
</Page>

‎components/SettingsControls/samples/ClickableSettingsCardSample.xaml.cs‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using System.ComponentModel;
6+
7+
namespace SettingsControlsExperiment.Samples;
8+
9+
[ToolkitSampleBoolOption("IsCardEnabled", true, Title = "Is Enabled")]
10+
11+
[ToolkitSample(id: nameof(ClickableSettingsCardSample), "ClickableSettingsCardSample", description: "A sample for showing how SettingsCard can be static or clickable.")]
12+
public sealed partial class ClickableSettingsCardSample : Page
13+
{
14+
public ClickableSettingsCardSample()
15+
{
16+
this.InitializeComponent();
17+
}
18+
19+
private async void OnCardClicked(object sender, RoutedEventArgs e)
20+
{
21+
await Windows.System.Launcher.LaunchUriAsync(new Uri("https://www.microsoft.com"));
22+
}
23+
}

‎components/SettingsControls/samples/Dependencies.props‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!--
2+
WinUI 2 under UWP uses TargetFramework uap10.0.*
3+
WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
4+
However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
5+
6+
MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
7+
8+
For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
9+
For UWP / WinAppSDK / Uno packages, place the package references here.
10+
-->
11+
<Project>
12+
<!-- WinUI 2 / UWP -->
13+
<ItemGroup Condition="'$(IsUwp)' == 'true'">
14+
<!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
15+
</ItemGroup>
16+
17+
<!-- WinUI 2 / Uno -->
18+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
19+
<!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
20+
</ItemGroup>
21+
22+
<!-- WinUI 3 / WinAppSdk -->
23+
<ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
24+
<!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
25+
</ItemGroup>
26+
27+
<!-- WinUI 3 / Uno -->
28+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
29+
<!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
30+
</ItemGroup>
31+
</Project>

‎components/SettingsControls/samples/SettingsCard.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: SettingsCard
3+
author: niels9001
4+
description: A card control that can be used to create Windows 11 style settings experiences.
5+
keywords: SettingsCard, Control, Layout, Settings
6+
dev_langs:
7+
- csharp
8+
category: Controls
9+
subcategory: Layout
10+
discussion-id: 0
11+
issue-id: 0
12+
icon: Assets/SettingsCard.png
13+
---
14+
15+
SettingsCard is a control that can be used to display settings in your experience. It uses the default styling found in Windows 11 and is easy to use, meets all accesibility standards and will make your settings page look great!
16+
You can set the `Header`, `Description`, `HeaderIcon` and `Content` properties to create an easy to use experience, like so:
17+
18+
> [!SAMPLE SettingsCardSample]
19+
20+
SettingsCard can also be turned into a button, by setting the `IsClickEnabled` property. This can be useful whenever you want your settings component to navigate to a detail page or open an external link. You can set a custom icon by setting the `ActionIcon`, or hiding it completely by setting the `IsActionIconVisible` to `false`.
21+
22+
> [!SAMPLE ClickableSettingsCardSample]

‎components/SettingsControls/samples/SettingsCardSample.xaml‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!-- 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. -->
2+
<Page x:Class="SettingsControlsExperiment.Samples.SettingsCardSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
6+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
mc:Ignorable="d">
9+
<StackPanel Spacing="4">
10+
<controls:SettingsCard x:Name="settingsCard"
11+
Description="This is a default card, with the Header, HeaderIcon, Description and Content set."
12+
Header="This is the Header"
13+
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
14+
<controls:SettingsCard.HeaderIcon>
15+
<FontIcon Glyph="&#xE799;" />
16+
</controls:SettingsCard.HeaderIcon>
17+
<ComboBox SelectedIndex="0">
18+
<ComboBoxItem>Option 1</ComboBoxItem>
19+
<ComboBoxItem>Option 2</ComboBoxItem>
20+
<ComboBoxItem>Option 3</ComboBoxItem>
21+
</ComboBox>
22+
</controls:SettingsCard>
23+
24+
<controls:SettingsCard Description="You can use a FontIcon, SymbolIcon or BitmapIcon to set the cards HeaderIcon."
25+
Header="Icon options"
26+
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
27+
<controls:SettingsCard.HeaderIcon>
28+
<BitmapIcon ShowAsMonochrome="False"
29+
UriSource="ms-appx:///Assets/SettingsCard.png" />
30+
</controls:SettingsCard.HeaderIcon>
31+
<ToggleSwitch />
32+
</controls:SettingsCard>
33+
34+
<controls:SettingsCard Header="A card with custom objects as its Description"
35+
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
36+
<controls:SettingsCard.Description>
37+
<HyperlinkButton Content="Learn more about Phone Link" />
38+
</controls:SettingsCard.Description>
39+
<Button Content="Open Phone Link"
40+
Style="{StaticResource AccentButtonStyle}" />
41+
</controls:SettingsCard>
42+
43+
<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."
44+
Header="Adaptive layouts"
45+
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
46+
<controls:SettingsCard.HeaderIcon>
47+
<FontIcon Glyph="&#xE745;" />
48+
</controls:SettingsCard.HeaderIcon>
49+
<controls:SettingsCard.Resources>
50+
<x:Double x:Key="SettingsCardWrapThreshold">800</x:Double>
51+
<x:Double x:Key="SettingsCardWrapNoIconThreshold">600</x:Double>
52+
</controls:SettingsCard.Resources>
53+
<Button Content="This control will wrap vertically!"
54+
Style="{StaticResource AccentButtonStyle}" />
55+
</controls:SettingsCard>
56+
</StackPanel>
57+
</Page>

‎components/SettingsControls/samples/SettingsCardSample.xaml.cs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
namespace SettingsControlsExperiment.Samples;
6+
7+
[ToolkitSampleBoolOption("IsCardEnabled", true, Title = "Is Enabled")]
8+
9+
[ToolkitSample(id: nameof(SettingsCardSample), "SettingsCard", description: "A sample for showing how SettingsCard can be static or clickable.")]
10+
public sealed partial class SettingsCardSample : Page
11+
{
12+
public SettingsCardSample()
13+
{
14+
this.InitializeComponent();
15+
}
16+
}

‎components/SettingsControls/samples/SettingsControls.Samples.csproj‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
2+
<PropertyGroup>
3+
<ToolkitComponentName>SettingsControls</ToolkitComponentName>
4+
</PropertyGroup>
5+
6+
<!-- Sets this up as a toolkit component's sample project -->
7+
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
8+
</Project>

0 commit comments

Comments
 (0)