Skip to content

Commit 904616c

Browse files
michael-hawkerniels9001
authored and
Arlodotexe
committed
Worked with @niels9001 to align on design elements and fix hover state of draggable bar with Behavior
Addressed feedback from @AndrewKeepCoding to tie toggle to expander (fixes drag issue losing state) Add some more notes on usage/behavior Co-authored-by: Niels Laute <[email protected]>
1 parent 2c53e77 commit 904616c

File tree

5 files changed

+50
-17
lines changed

5 files changed

+50
-17
lines changed

‎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/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: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@ The main important pieces of this example are:
4545
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.
4646
4. Modifying the `Margin` and `Padding` values of the `ItemContainerStyle` to align cards how we want within the ListView.
4747
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.
4851

4952
### Settings page example
5053

‎components/SettingsControls/samples/SettingsExpanderDragHandleSample.xaml‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<Page x:Class="SettingsControlsExperiment.Samples.SettingsExpanderDragHandleSample"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
45
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
56
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
67
xmlns:local="using:SettingsControlsExperiment.Samples"
@@ -23,28 +24,46 @@
2324
<ColumnDefinition Width="Auto" />
2425
<ColumnDefinition Width="*" />
2526
</Grid.ColumnDefinitions>
26-
<!-- Provide a custom area that can be manipulated by the user -->
27-
<!-- TODO: Show how to highlight this on hover with a behavior -->
28-
<Border Width="18"
29-
Margin="1,1,0,1"
30-
Padding="0"
31-
VerticalAlignment="Stretch"
32-
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
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"
3333
CornerRadius="{ThemeResource ControlCornerRadius}">
3434
<TextBlock HorizontalAlignment="Center"
3535
VerticalAlignment="Center"
3636
FontFamily="Segoe UI Symbol"
37-
FontSize="16"
37+
FontSize="20"
3838
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
39-
Opacity="0.5"
4039
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>
4157
</Border>
58+
<!-- Standard Settings Expander (could also just be a Card) -->
4259
<controls:SettingsExpander Grid.Column="1"
4360
Description="{x:Bind Info}"
44-
Header="{x:Bind Name}">
61+
Header="{x:Bind Name}"
62+
IsExpanded="{x:Bind IsExpanded, Mode=TwoWay}">
4563

4664
<ToggleSwitch OffContent="Off"
47-
OnContent="On" />
65+
OnContent="On"
66+
IsOn="{x:Bind IsExpanded, Mode=TwoWay}"/>
4867

4968
<controls:SettingsExpander.Items>
5069
<controls:SettingsCard Header="{x:Bind LinkDescription}">
@@ -56,6 +75,7 @@
5675
</Grid>
5776
</DataTemplate>
5877
</ListView.ItemTemplate>
78+
<!-- Customize Size of Item Container from ListView -->
5979
<ListView.ItemContainerStyle>
6080
<Style BasedOn="{StaticResource DefaultListViewItemStyle}"
6181
TargetType="ListViewItem">

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
// The .NET Foundation licenses this file to you under the MIT license.
33
// See the LICENSE file in the project root for more information.
44

5+
using CommunityToolkit.Mvvm.ComponentModel;
6+
57
namespace SettingsControlsExperiment.Samples;
68

79
[ToolkitSample(id: nameof(SettingsExpanderDragHandleSample), "SettingsExpanderDragHandle", description: "The SettingsCard/SettingsExpander can be within a collection itself which can be re-ordered.")]
@@ -38,7 +40,7 @@ public SettingsExpanderDragHandleSample()
3840
}
3941
}
4042

41-
public class ExpandedCardInfo
43+
public partial class ExpandedCardInfo : ObservableObject
4244
{
4345
public string? Name { get; set; }
4446

@@ -47,5 +49,8 @@ public class ExpandedCardInfo
4749
public string? LinkDescription { get; set; }
4850

4951
public string? Url { get; set; }
52+
53+
[ObservableProperty]
54+
public partial bool IsExpanded { get; set; } = false;
5055
}
5156

0 commit comments

Comments
 (0)