-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathMainPage.xaml
138 lines (131 loc) · 9.11 KB
/
MainPage.xaml
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
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"
xmlns:listView="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
xmlns:local="clr-namespace:CheckBoxFiltering"
x:Class="CheckBoxFiltering.MainPage">
<ContentPage.Resources>
<local:ProductInfoViewModel x:Key="ViewModel"/>
<Style TargetType="Border" x:Key="ColorBorder">
<Setter Property="Stroke" Value="Gray"/>
<Setter Property="StrokeThickness" Value="0"/>
<Setter Property="HeightRequest" Value="15"/>
<Setter Property="WidthRequest" Value="15"/>
<Setter Property="StrokeShape" Value="RoundRectangle 7.5"/>
</Style>
</ContentPage.Resources>
<Grid ColumnDefinitions="2*,8*" >
<Border Grid.Column="0" Margin="5" Padding="5"
Stroke="Gray" StrokeThickness="0.3" StrokeShape="RoundRectangle 10">
<ScrollView>
<StackLayout Spacing="5">
<Label Margin="10,5" FontSize="16" VerticalTextAlignment="Center"
FontFamily="Roboto-Medium" Text="Filters" FontAttributes="Bold"/>
<Label Margin="10,0" FontFamily="Roboto-Medium" FontSize="14"
Padding="0,10,0,0" Text="Brand" FontAttributes="Bold"/>
<StackLayout>
<buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="Campus" IsChecked="{Binding BrandFilterChecked1}"/>
<buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="Skechers" IsChecked="{Binding BrandFilterChecked2}"/>
<buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="Red Tape" IsChecked="{Binding BrandFilterChecked3}"/>
<buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="Roadster" IsChecked="{Binding BrandFilterChecked4}"/>
</StackLayout>
<Label Margin="10,0" FontFamily="Roboto-Medium" FontSize="14"
Padding="0,20,0,0" Text="Size" FontAttributes="Bold"/>
<StackLayout>
<buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="7" IsChecked="{Binding SizeFilterChecked2}"/>
<buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="8" IsChecked="{Binding SizeFilterChecked3}"/>
<buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="9" IsChecked="{Binding SizeFilterChecked4}"/>
<buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="10" IsChecked="{Binding SizeFilterChecked5}"/>
</StackLayout>
<Label Margin="10,0" FontFamily="Roboto-Medium" FontSize="14"
Padding="0,20,0,0" Text="Colors" FontAttributes="Bold"/>
<StackLayout>
<HorizontalStackLayout >
<buttons:SfCheckBox x:Name="brown" HorizontalOptions="Start" BindingContext="{x:StaticResource ViewModel}" IsChecked="{Binding ColorFilterChecked1}"/>
<Border Style="{x:StaticResource ColorBorder}">
<BoxView Color="SandyBrown" />
</Border>
<Label Text="Brown" Margin="5" VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Label.GestureRecognizers>
</Label>
</HorizontalStackLayout>
<HorizontalStackLayout>
<buttons:SfCheckBox x:Name="green" HorizontalOptions="Start" BindingContext="{x:StaticResource ViewModel}" IsChecked="{Binding ColorFilterChecked2}"/>
<Border Style="{x:StaticResource ColorBorder}">
<BoxView Color="Green" />
</Border>
<Label Text="Green" Margin="5" VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"/>
</Label.GestureRecognizers>
</Label>
</HorizontalStackLayout>
<HorizontalStackLayout>
<buttons:SfCheckBox x:Name="red" HorizontalOptions="Start" BindingContext="{x:StaticResource ViewModel}" IsChecked="{Binding ColorFilterChecked3}"/>
<Border Style="{x:StaticResource ColorBorder}">
<BoxView Color="Red" />
</Border>
<Label Text="Red" Margin="5" VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_2"/>
</Label.GestureRecognizers>
</Label>
</HorizontalStackLayout>
<HorizontalStackLayout>
<buttons:SfCheckBox x:Name="sandal" HorizontalOptions="Start" BindingContext="{x:StaticResource ViewModel}" IsChecked="{Binding ColorFilterChecked4}"/>
<Border Style="{x:StaticResource ColorBorder}">
<BoxView Color="Tan"/>
</Border>
<Label Text="Sandal" Margin="5" VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_3"/>
</Label.GestureRecognizers>
</Label>
</HorizontalStackLayout>
<HorizontalStackLayout>
<buttons:SfCheckBox x:Name="violet" HorizontalOptions="Start" BindingContext="{x:StaticResource ViewModel}" IsChecked="{Binding ColorFilterChecked5}"/>
<Border Style="{x:StaticResource ColorBorder}">
<BoxView Color="DarkViolet" />
</Border>
<Label Text="Violet" Margin="5" VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_4"/>
</Label.GestureRecognizers>
</Label>
</HorizontalStackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
</Border>
<Border Grid.Column="1" Margin="5" Padding="5"
Stroke="Gray" StrokeThickness="0.3" StrokeShape="RoundRectangle 10">
<listView:SfListView BindingContext="{x:StaticResource ViewModel}" SelectionMode="None" ItemSpacing="5" ItemSize="260" ItemsSource="{Binding Filtered}" >
<listView:SfListView.ItemsLayout>
<listView:GridLayout SpanCount="3" />
</listView:SfListView.ItemsLayout>
<listView:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Border Stroke="Gray"
StrokeThickness="0.3" Margin="0,0,7,0"
StrokeShape="RoundRectangle 0">
<Grid Margin="5" RowDefinitions="7*,3*">
<Image Source="{Binding Image}"/>
<Grid RowDefinitions="1*,3*" Grid.Row="1" Margin="0,10"
Padding="5,0" RowSpacing="5" VerticalOptions="EndAndExpand">
<Label FontSize="14" VerticalTextAlignment="Center"
Text="{Binding Brand}" FontFamily="Roboto-Medium"/>
<Label Grid.Row="1" FontFamily="Roboto-Regular" Text="{Binding Description}" LineBreakMode="WordWrap"/>
</Grid>
</Grid>
</Border>
</ViewCell>
</DataTemplate>
</listView:SfListView.ItemTemplate>
</listView:SfListView>
</Border>
</Grid>
</ContentPage>