Windows/components/SettingsControls/samples/SettingsExpanderDragHandleSample.xaml at 1d68775f234d9f02665b79a4be7629030d5d5916 · CommunityToolkit/Windows · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<Page x:Class="SettingsControlsExperiment.Samples.SettingsExpanderDragHandleSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:SettingsControlsExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <!--
        Enabled the List view to drag its items and reorder them around,
        plus need SelectionMode None so the indicator doesn't appear when clicking on the drag region
    -->
    <ListView AllowDrop="True"
              CanDragItems="True"
              CanReorderItems="True"
              ItemsSource="{x:Bind MyDataSet}"
              SelectionMode="None">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:ExpandedCardInfo">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <!--  Provide a custom area that can be manipulated by the user, this could be before or after the card.  -->
                    <Border Width="36"
                            Height="75"
                            Margin="1,1,1,1"
                            VerticalAlignment="Top"
                            Background="Transparent"
                            CornerRadius="{ThemeResource ControlCornerRadius}">
                        <TextBlock HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   FontFamily="Segoe UI Symbol"
                                   FontSize="20"
                                   Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                   Text="&#x283F;" />
                        <!--  Use Behaviors to hover on pointer  -->
                        <Interactivity:Interaction.Behaviors>
                            <Interactivity:EventTriggerBehavior EventName="PointerEntered">
                                <Interactivity:ChangePropertyAction PropertyName="Background">
                                    <Interactivity:ChangePropertyAction.Value>
                                        <SolidColorBrush Color="{ThemeResource ControlFillColorDefault}" />
                                    </Interactivity:ChangePropertyAction.Value>
                                </Interactivity:ChangePropertyAction>
                            </Interactivity:EventTriggerBehavior>
                            <Interactivity:EventTriggerBehavior EventName="PointerExited">
                                <Interactivity:ChangePropertyAction PropertyName="Background">
                                    <Interactivity:ChangePropertyAction.Value>
                                        <SolidColorBrush Color="Transparent" />
                                    </Interactivity:ChangePropertyAction.Value>
                                </Interactivity:ChangePropertyAction>
                            </Interactivity:EventTriggerBehavior>
                        </Interactivity:Interaction.Behaviors>
                    </Border>
                    <!--  Standard Settings Expander (could also just be a Card)  -->
                    <controls:SettingsExpander Grid.Column="1"
                                               Description="{x:Bind Info}"
                                               Header="{x:Bind Name}"
                                               IsExpanded="{x:Bind IsExpanded, Mode=TwoWay}">

                        <ToggleSwitch IsOn="{x:Bind IsExpanded, Mode=TwoWay}"
                                      OffContent="Off"
                                      OnContent="On" />

                        <controls:SettingsExpander.Items>
                            <controls:SettingsCard Header="{x:Bind LinkDescription}">
                                <HyperlinkButton Content="{x:Bind Url}"
                                                 NavigateUri="{x:Bind Url}" />
                            </controls:SettingsCard>
                        </controls:SettingsExpander.Items>
                    </controls:SettingsExpander>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <!--  Customize Size of Item Container from ListView  -->
        <ListView.ItemContainerStyle>
            <Style BasedOn="{StaticResource DefaultListViewItemStyle}"
                   TargetType="ListViewItem">
                <Setter Property="Margin" Value="0" />
                <Setter Property="Padding" Value="4" />
            </Style>
        </ListView.ItemContainerStyle>
        <!--  Hides the overall highlight from the ListView Container  -->
        <ListView.Resources>
            <SolidColorBrush x:Key="ListViewItemBackgroundPointerOver"
                             Color="Transparent" />
        </ListView.Resources>
    </ListView>
</Page>