Maui/samples/CommunityToolkit.Maui.Sample/Pages/Views/RangeSlider/RangeSliderPage.xaml at d4db6020a62c92e0a96c1e4fe823f44250cd0516 · CommunityToolkit/Maui · 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<?xml version="1.0" encoding="utf-8" ?>
<pages:BasePage
    x:Class="CommunityToolkit.Maui.Sample.Pages.Views.RangeSliderPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:pages="clr-namespace:CommunityToolkit.Maui.Sample.Pages"
    xmlns:sample="clr-namespace:CommunityToolkit.Maui.Sample"
    xmlns:viewModels="clr-namespace:CommunityToolkit.Maui.Sample.ViewModels.Views"
    Title="RangeSlider"
    Padding="12,12,12,0"
    x:DataType="viewModels:RangeSliderViewModel"
    x:TypeArguments="viewModels:RangeSliderViewModel">

    <ScrollView>
        <VerticalStackLayout Spacing="10">
            <VerticalStackLayout.Resources>
                <ResourceDictionary>
                    <Style x:Key="Heading" TargetType="Label">
                        <Setter Property="VerticalTextAlignment" Value="Center" />
                        <Setter Property="HorizontalTextAlignment" Value="Center" />
                        <Setter Property="FontSize" Value="12" />
                        <Setter Property="HorizontalOptions" Value="Center" />
                        <Setter Property="LineBreakMode" Value="WordWrap" />
                        <Setter Property="Margin" Value="10" />
                    </Style>
                    <Style x:Key="HR" TargetType="Line">
                        <Setter Property="Stroke" Value="{AppThemeBinding Light=Black, Dark=White}" />
                        <Setter Property="X2" Value="300" />
                        <Setter Property="HorizontalOptions" Value="Center" />
                    </Style>
                </ResourceDictionary>
            </VerticalStackLayout.Resources>

            <Label Style="{StaticResource Heading}" Text="Simple RangeSlider" />

            <Grid ColumnDefinitions="50,*,50" ColumnSpacing="10">
                <Label Text="{Binding SimpleLowerValue, StringFormat='{}{0:F1}'}" VerticalOptions="Center" />
                <mct:RangeSlider
                    Grid.Column="1"
                    HorizontalOptions="Fill"
                    LowerValue="{Binding SimpleLowerValue, Mode=TwoWay}"
                    MaximumValue="200"
                    MinimumValue="100"
                    UpperValue="{Binding SimpleUpperValue, Mode=TwoWay}"
                    WidthRequest="-1" />
                <Label
                    Grid.Column="2"
                    Text="{Binding SimpleUpperValue, StringFormat='{}{0:F1}'}"
                    VerticalOptions="Center" />
            </Grid>

            <Line Style="{StaticResource HR}" />

            <Label Style="{StaticResource Heading}" Text="RangeSlider with StepSize" />

            <Grid ColumnDefinitions="50,*,50" ColumnSpacing="10">
                <Label Text="{Binding LowerValueWithStep, StringFormat='{}{0:F1}'}" VerticalOptions="Center" />
                <Border Grid.Column="1" HorizontalOptions="Fill">
                    <mct:RangeSlider
                        HorizontalOptions="Fill"
                        LowerValue="{Binding LowerValueWithStep, Mode=TwoWay}"
                        MaximumValue="200"
                        MinimumValue="100"
                        StepSize="5"
                        UpperValue="{Binding UpperValueWithStep, Mode=TwoWay}"
                        WidthRequest="-1" />
                </Border>
                <Label
                    Grid.Column="2"
                    Text="{Binding UpperValueWithStep, StringFormat='{}{0:F1}'}"
                    VerticalOptions="Center" />
            </Grid>

            <Line Style="{StaticResource HR}" />

            <Label Style="{StaticResource Heading}" Text="RangeSlider with Minimum/Maximum swapped for descending behavior" />

            <Grid ColumnDefinitions="50,*,50" ColumnSpacing="10">
                <Label Text="{Binding LowerValueDescending, StringFormat='{}{0:F1}'}" VerticalOptions="Center" />
                <Border Grid.Column="1" HorizontalOptions="Fill">
                    <mct:RangeSlider
                        HorizontalOptions="Fill"
                        LowerValue="{Binding LowerValueDescending, Mode=TwoWay}"
                        MaximumValue="100"
                        MinimumValue="200"
                        UpperValue="{Binding UpperValueDescending, Mode=TwoWay}"
                        WidthRequest="-1" />
                </Border>
                <Label
                    Grid.Column="2"
                    Text="{Binding UpperValueDescending, StringFormat='{}{0:F1}'}"
                    VerticalOptions="Center" />
            </Grid>

            <Line Style="{StaticResource HR}" />

            <Label Style="{StaticResource Heading}" Text="RangeSlider with Minimum/Maximum swapped for descending with step behavior" />

            <Grid ColumnDefinitions="50,*,50" ColumnSpacing="10">
                <Label Text="{Binding LowerValueDescendingWithStep, StringFormat='{}{0:F1}'}" VerticalOptions="Center" />
                <Border Grid.Column="1" HorizontalOptions="Fill">
                    <mct:RangeSlider
                        HorizontalOptions="Fill"
                        LowerValue="{Binding LowerValueDescendingWithStep, Mode=TwoWay}"
                        MaximumValue="100"
                        MinimumValue="200"
                        StepSize="5"
                        UpperValue="{Binding UpperValueDescendingWithStep, Mode=TwoWay}"
                        WidthRequest="-1" />
                </Border>
                <Label
                    Grid.Column="2"
                    Text="{Binding UpperValueDescendingWithStep, StringFormat='{}{0:F1}'}"
                    VerticalOptions="Center" />
            </Grid>

            <Line Style="{StaticResource HR}" />

            <Label Style="{StaticResource Heading}" Text="RangeSlider with custom thumb and track colors" />

            <Grid ColumnDefinitions="50,*,50" ColumnSpacing="10">
                <Label Text="{Binding LowerValueWithCustomStyle, StringFormat='{}{0:F1}'}" VerticalOptions="Center" />
                <Border Grid.Column="1" HorizontalOptions="Fill">
                    <mct:RangeSlider
                        HorizontalOptions="Fill"
                        InnerTrackColor="Orange"
                        InnerTrackCornerRadius="5"
                        InnerTrackSize="10"
                        LowerThumbColor="Red"
                        LowerValue="{Binding LowerValueWithCustomStyle, Mode=TwoWay}"
                        MaximumValue="200"
                        MinimumValue="100"
                        OuterTrackColor="DarkGray"
                        OuterTrackCornerRadius="7"
                        OuterTrackSize="14"
                        UpperThumbColor="Green"
                        UpperValue="{Binding UpperValueWithCustomStyle, Mode=TwoWay}"
                        WidthRequest="-1" />
                </Border>
                <Label
                    Grid.Column="2"
                    Text="{Binding UpperValueWithCustomStyle, StringFormat='{}{0:F1}'}"
                    VerticalOptions="Center" />
            </Grid>

        </VerticalStackLayout>
    </ScrollView>
</pages:BasePage>