Skip to content

Commit d842485

Browse files
AndrewKeepCodingAndrewKeepCoding
authored
Merge branch 'main' into fix-wrappanel-crash
2 parents 3523c17 + 0bed1b7 commit d842485

8 files changed

Lines changed: 218 additions & 36 deletions

File tree

‎components/Segmented/src/SegmentedItem/SegmentedItem.xaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
1+
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
33
xmlns:local="using:CommunityToolkit.WinUI.Controls"
44
xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
@@ -614,7 +614,7 @@
614614
<Border x:Name="PART_Hover"
615615
Margin="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource MarginConverter}}"
616616
Background="Transparent"
617-
CornerRadius="2"
617+
CornerRadius="{TemplateBinding CornerRadius}"
618618
RenderTransformOrigin="0.5, 0.5">
619619
<win:Border.BackgroundTransition>
620620
<win:BrushTransition Duration="0:0:0.083" />

‎components/SettingsControls/samples/Dependencies.props‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,27 @@
99
For UWP / WinAppSDK / Uno packages, place the package references here.
1010
-->
1111
<Project>
12+
<ItemGroup>
13+
<PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.0"/>
14+
</ItemGroup>
15+
1216
<!-- WinUI 2 / UWP -->
1317
<ItemGroup Condition="'$(IsUwp)' == 'true'">
14-
<!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
18+
<PackageReference Include="Microsoft.Xaml.Behaviors.Uwp.Managed" Version="3.0.0"/>
1519
</ItemGroup>
1620

1721
<!-- WinUI 2 / Uno -->
1822
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
19-
<!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
23+
<PackageReference Include="Uno.Microsoft.Xaml.Behaviors.Interactivity" Version="3.0.3"/>
2024
</ItemGroup>
2125

2226
<!-- WinUI 3 / WinAppSdk -->
23-
<ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
24-
<!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
27+
<ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
28+
<PackageReference Include="Microsoft.Xaml.Behaviors.WinUI.Managed" Version="3.0.0"/>
2529
</ItemGroup>
2630

2731
<!-- WinUI 3 / Uno -->
2832
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
29-
<!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
33+
<PackageReference Include="Uno.Microsoft.Xaml.Behaviors.Interactivity.WinUI" Version="3.0.3"/>
3034
</ItemGroup>
3135
</Project>

‎components/SettingsControls/samples/SettingsCard.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,9 @@ You can set the `Header`, `Description`, `HeaderIcon` and `Content` properties t
2020
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`.
2121

2222
> [!SAMPLE ClickableSettingsCardSample]
23+
24+
### Settings page example
25+
26+
The following sample provides a typical design page, following the correct Windows 11 design specifications for things like spacing, section headers and animations.
27+
28+
> [!SAMPLE SettingsPageExample]

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
<PropertyGroup>
55
<ToolkitComponentName>SettingsControls</ToolkitComponentName>
6+
<LangVersion>preview</LangVersion>
67
</PropertyGroup>
78

89
<!-- Sets this up as a toolkit component's sample project -->

‎components/SettingsControls/samples/SettingsExpander.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,29 @@ You can easily override certain properties to create custom experiences. For ins
2626
2727
NOTE: Due to [a bug](https://github.com/microsoft/microsoft-ui-xaml/issues/3842) related to the `ItemsRepeater` used in `SettingsExpander`, there might be visual glitches whenever the `SettingsExpander` expands and a `MaxWidth` is set on a parent `StackPanel`. As a workaround, the `StackPanel` (that has the `MaxWidth` set) can be wrapped in a `Grid` to overcome this issue. See the `SettingsPageExample` for snippet.
2828

29+
### Dragging Settings Cards
30+
31+
You may use a list of `SettingsCard` or `SettingsExpander` to represent configurable items within a tool. The order of these may be something you want to track.
32+
33+
In this case there is a conflict between the interactions with the settings card and the drag and drop interactions of a parent containing `ListView`, for instance.
34+
35+
Therefore, it is recommended to use the drag-handle type UI approach for this scenario in having a dedicated space for re-ordering manipulation vs. interaction with the Settings control.
36+
37+
You can see how to do this with `SettingsExpander` in the example below, however it equally works with a collection of `SettingsCard` as the main data template component as well.
38+
39+
> [!SAMPLE SettingsExpanderDragHandleSample]
40+
41+
The main important pieces of this example are:
42+
43+
1. Enabling the three drag properties on the `ListView`: `CanDragItems`, `CanReorderItems`, and `AllowDrop`.
44+
2. Setting `SelectionMode` to `None` to prevent selection and the selection indicator from appearing.
45+
3. Using a simple UIElement to act as a drag handle, the pass-through of the mouse on this element to `ListView` allows the normal drag experience to work uninterrupted.
46+
4. Modifying the `Margin` and `Padding` values of the `ItemContainerStyle` to align cards how we want within the ListView.
47+
5. Overriding the `ListViewItemBackgroundPointerOver` resource to prevent the hover effect across the entire list item, the Settings Controls already have an effect here on hover.
48+
6. Optionally, add a behavior to highlight the drag region when the pointer is over it.
49+
50+
Note: If controls within the dragged SettingsCard/Expander state are not bound, they will be reset upon drop in some cases. E.g. a ToggleSwitch. It is best to ensure you have bound your control's states to your data model.
51+
2952
### Settings page example
3053

3154
The following sample provides a typical design page, following the correct Windows 11 design specifications for things like spacing, section headers and animations.

‎components/SettingsControls/samples/SettingsExpanderDragHandleSample.xaml‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<Page x:Class="SettingsControlsExperiment.Samples.SettingsExpanderDragHandleSample"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
5+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
6+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7+
xmlns:local="using:SettingsControlsExperiment.Samples"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
11+
<!--
12+
Enabled the List view to drag its items and reorder them around,
13+
plus need SelectionMode None so the indicator doesn't appear when clicking on the drag region
14+
-->
15+
<ListView AllowDrop="True"
16+
CanDragItems="True"
17+
CanReorderItems="True"
18+
ItemsSource="{x:Bind MyDataSet}"
19+
SelectionMode="None">
20+
<ListView.ItemTemplate>
21+
<DataTemplate x:DataType="local:ExpandedCardInfo">
22+
<Grid>
23+
<Grid.ColumnDefinitions>
24+
<ColumnDefinition Width="Auto" />
25+
<ColumnDefinition Width="*" />
26+
</Grid.ColumnDefinitions>
27+
<!-- Provide a custom area that can be manipulated by the user, this could be before or after the card. -->
28+
<Border Width="36"
29+
Height="75"
30+
Margin="1,1,1,1"
31+
VerticalAlignment="Top"
32+
Background="Transparent"
33+
CornerRadius="{ThemeResource ControlCornerRadius}">
34+
<TextBlock HorizontalAlignment="Center"
35+
VerticalAlignment="Center"
36+
FontFamily="Segoe UI Symbol"
37+
FontSize="20"
38+
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
39+
Text="&#x283F;" />
40+
<!-- Use Behaviors to hover on pointer -->
41+
<Interactivity:Interaction.Behaviors>
42+
<Interactivity:EventTriggerBehavior EventName="PointerEntered">
43+
<Interactivity:ChangePropertyAction PropertyName="Background">
44+
<Interactivity:ChangePropertyAction.Value>
45+
<SolidColorBrush Color="{ThemeResource ControlFillColorDefault}" />
46+
</Interactivity:ChangePropertyAction.Value>
47+
</Interactivity:ChangePropertyAction>
48+
</Interactivity:EventTriggerBehavior>
49+
<Interactivity:EventTriggerBehavior EventName="PointerExited">
50+
<Interactivity:ChangePropertyAction PropertyName="Background">
51+
<Interactivity:ChangePropertyAction.Value>
52+
<SolidColorBrush Color="Transparent" />
53+
</Interactivity:ChangePropertyAction.Value>
54+
</Interactivity:ChangePropertyAction>
55+
</Interactivity:EventTriggerBehavior>
56+
</Interactivity:Interaction.Behaviors>
57+
</Border>
58+
<!-- Standard Settings Expander (could also just be a Card) -->
59+
<controls:SettingsExpander Grid.Column="1"
60+
Description="{x:Bind Info}"
61+
Header="{x:Bind Name}"
62+
IsExpanded="{x:Bind IsExpanded, Mode=TwoWay}">
63+
64+
<ToggleSwitch IsOn="{x:Bind IsExpanded, Mode=TwoWay}"
65+
OffContent="Off"
66+
OnContent="On" />
67+
68+
<controls:SettingsExpander.Items>
69+
<controls:SettingsCard Header="{x:Bind LinkDescription}">
70+
<HyperlinkButton Content="{x:Bind Url}"
71+
NavigateUri="{x:Bind Url}" />
72+
</controls:SettingsCard>
73+
</controls:SettingsExpander.Items>
74+
</controls:SettingsExpander>
75+
</Grid>
76+
</DataTemplate>
77+
</ListView.ItemTemplate>
78+
<!-- Customize Size of Item Container from ListView -->
79+
<ListView.ItemContainerStyle>
80+
<Style BasedOn="{StaticResource DefaultListViewItemStyle}"
81+
TargetType="ListViewItem">
82+
<Setter Property="Margin" Value="0" />
83+
<Setter Property="Padding" Value="4" />
84+
</Style>
85+
</ListView.ItemContainerStyle>
86+
<!-- Hides the overall highlight from the ListView Container -->
87+
<ListView.Resources>
88+
<SolidColorBrush x:Key="ListViewItemBackgroundPointerOver"
89+
Color="Transparent" />
90+
</ListView.Resources>
91+
</ListView>
92+
</Page>

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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 CommunityToolkit.Mvvm.ComponentModel;
6+
7+
namespace SettingsControlsExperiment.Samples;
8+
9+
[ToolkitSample(id: nameof(SettingsExpanderDragHandleSample), "SettingsExpanderDragHandle", description: "The SettingsCard/SettingsExpander can be within a collection itself which can be re-ordered.")]
10+
public sealed partial class SettingsExpanderDragHandleSample : Page
11+
{
12+
13+
public ObservableCollection<ExpandedCardInfo> MyDataSet = new() {
14+
new()
15+
{
16+
Name = "First Item",
17+
Info = "More about first item.",
18+
LinkDescription = "Click the link for more on first item.",
19+
Url = "https://microsoft.com/",
20+
},
21+
new()
22+
{
23+
Name = "Second Item",
24+
Info = "More about second item.",
25+
LinkDescription = "Click the link for more on second item.",
26+
Url = "https://xbox.com/",
27+
},
28+
new()
29+
{
30+
Name = "Third Item",
31+
Info = "More about third item.",
32+
LinkDescription = "Click the link for more on third item.",
33+
Url = "https://toolkitlabs.dev/",
34+
},
35+
};
36+
37+
public SettingsExpanderDragHandleSample()
38+
{
39+
this.InitializeComponent();
40+
}
41+
}
42+
43+
public partial class ExpandedCardInfo : ObservableObject
44+
{
45+
public string? Name { get; set; }
46+
47+
public string? Info { get; set; }
48+
49+
public string? LinkDescription { get; set; }
50+
51+
public string? Url { get; set; }
52+
53+
[ObservableProperty]
54+
public partial bool IsExpanded { get; set; } = false;
55+
}
56+

‎components/SettingsControls/samples/SettingsExpanderSample.xaml‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
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. -->
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. -->
22
<Page x:Class="SettingsControlsExperiment.Samples.SettingsExpanderSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
56
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6-
xmlns:local="using:CommunityToolkit.WinUI.Controls"
77
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
88
xmlns:ui="using:CommunityToolkit.WinUI"
99
mc:Ignorable="d">
1010

11-
<local:SettingsExpander x:Name="settingsCard"
12-
VerticalAlignment="Top"
13-
Description="The SettingsExpander has the same properties as a Card, and you can set SettingsCard as part of the Items collection."
14-
Header="SettingsExpander"
15-
HeaderIcon="{ui:FontIcon Glyph=&#xE91B;}"
16-
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}"
17-
IsExpanded="{x:Bind IsCardExpanded, Mode=OneWay}">
11+
<controls:SettingsExpander x:Name="settingsCard"
12+
VerticalAlignment="Top"
13+
Description="The SettingsExpander has the same properties as a Card, and you can set SettingsCard as part of the Items collection."
14+
Header="SettingsExpander"
15+
HeaderIcon="{ui:FontIcon Glyph=&#xE91B;}"
16+
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}"
17+
IsExpanded="{x:Bind IsCardExpanded, Mode=OneWay}">
1818
<!-- TODO: This should be TwoWay bound but throws compile error in Uno. -->
1919
<ComboBox SelectedIndex="0">
2020
<ComboBoxItem>Option 1</ComboBoxItem>
2121
<ComboBoxItem>Option 2</ComboBoxItem>
2222
<ComboBoxItem>Option 3</ComboBoxItem>
2323
</ComboBox>
2424

25-
<local:SettingsExpander.Items>
26-
<local:SettingsCard Header="A basic SettingsCard within an SettingsExpander">
25+
<controls:SettingsExpander.Items>
26+
<controls:SettingsCard Header="A basic SettingsCard within an SettingsExpander">
2727
<Button Content="Button" />
28-
</local:SettingsCard>
29-
<local:SettingsCard Description="SettingsCard within an Expander can be made clickable too!"
30-
Header="This item can be clicked"
31-
IsClickEnabled="True" />
28+
</controls:SettingsCard>
29+
<controls:SettingsCard Description="SettingsCard within an Expander can be made clickable too!"
30+
Header="This item can be clicked"
31+
IsClickEnabled="True" />
3232

33-
<local:SettingsCard ContentAlignment="Left">
33+
<controls:SettingsCard ContentAlignment="Left">
3434
<CheckBox Content="Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons." />
35-
</local:SettingsCard>
35+
</controls:SettingsCard>
3636

37-
<local:SettingsCard HorizontalContentAlignment="Left"
38-
ContentAlignment="Vertical"
39-
Description="You can also align your content vertically. Make sure to set the HorizontalAlignment to Left when you do!"
40-
Header="Vertically aligned">
37+
<controls:SettingsCard HorizontalContentAlignment="Left"
38+
ContentAlignment="Vertical"
39+
Description="You can also align your content vertically. Make sure to set the HorizontalAlignment to Left when you do!"
40+
Header="Vertically aligned">
4141
<GridView SelectedIndex="1">
4242
<GridViewItem>
4343
<Border Width="64"
@@ -64,13 +64,13 @@
6464
CornerRadius="4" />
6565
</GridViewItem>
6666
</GridView>
67-
</local:SettingsCard>
68-
<local:SettingsCard Description="You can override the Left indention of a SettingsCard by overriding the SettingsCardLeftIndention"
69-
Header="Customization">
70-
<local:SettingsCard.Resources>
67+
</controls:SettingsCard>
68+
<controls:SettingsCard Description="You can override the Left indention of a SettingsCard by overriding the SettingsCardLeftIndention"
69+
Header="Customization">
70+
<controls:SettingsCard.Resources>
7171
<x:Double x:Key="SettingsCardLeftIndention">40</x:Double>
72-
</local:SettingsCard.Resources>
73-
</local:SettingsCard>
74-
</local:SettingsExpander.Items>
75-
</local:SettingsExpander>
72+
</controls:SettingsCard.Resources>
73+
</controls:SettingsCard>
74+
</controls:SettingsExpander.Items>
75+
</controls:SettingsExpander>
7676
</Page>

0 commit comments

Comments
 (0)