|
| 1 | +<?xml version="1.0" encoding="utf-8" ?> |
| 2 | +<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" |
| 3 | + xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" |
| 4 | + xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons" |
| 5 | + xmlns:listView="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView" |
| 6 | + xmlns:local="clr-namespace:CheckBoxFiltering" |
| 7 | + x:Class="CheckBoxFiltering.MainPage"> |
| 8 | + |
| 9 | + <ContentPage.Resources> |
| 10 | + <local:ProductInfoViewModel x:Key="ViewModel"/> |
| 11 | + |
| 12 | + <Style TargetType="Border" x:Key="ColorBorder"> |
| 13 | + <Setter Property="Stroke" Value="Gray"/> |
| 14 | + <Setter Property="StrokeThickness" Value="0"/> |
| 15 | + <Setter Property="HeightRequest" Value="15"/> |
| 16 | + <Setter Property="WidthRequest" Value="15"/> |
| 17 | + <Setter Property="StrokeShape" Value="RoundRectangle 7.5"/> |
| 18 | + </Style> |
| 19 | + </ContentPage.Resources> |
| 20 | + |
| 21 | + <Grid ColumnDefinitions="2*,8*" > |
| 22 | + <Border Grid.Column="0" Margin="5" Padding="5" |
| 23 | + Stroke="Gray" StrokeThickness="0.3" StrokeShape="RoundRectangle 10"> |
| 24 | + <ScrollView> |
| 25 | + <StackLayout Spacing="5"> |
| 26 | + <Label Margin="10,5" FontSize="16" VerticalTextAlignment="Center" |
| 27 | + FontFamily="Roboto-Medium" Text="Filters" FontAttributes="Bold"/> |
| 28 | + <Label Margin="10,0" FontFamily="Roboto-Medium" FontSize="14" |
| 29 | + Padding="0,10,0,0" Text="Brand" FontAttributes="Bold"/> |
| 30 | + <StackLayout> |
| 31 | + <buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="Campus" IsChecked="{Binding BrandFilterChecked1}"/> |
| 32 | + <buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="Skechers" IsChecked="{Binding BrandFilterChecked2}"/> |
| 33 | + <buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="Red Tape" IsChecked="{Binding BrandFilterChecked3}"/> |
| 34 | + <buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="Roadster" IsChecked="{Binding BrandFilterChecked4}"/> |
| 35 | + </StackLayout> |
| 36 | + <Label Margin="10,0" FontFamily="Roboto-Medium" FontSize="14" |
| 37 | + Padding="0,20,0,0" Text="Size" FontAttributes="Bold"/> |
| 38 | + <StackLayout> |
| 39 | + <buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="7" IsChecked="{Binding SizeFilterChecked2}"/> |
| 40 | + <buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="8" IsChecked="{Binding SizeFilterChecked3}"/> |
| 41 | + <buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="9" IsChecked="{Binding SizeFilterChecked4}"/> |
| 42 | + <buttons:SfCheckBox BindingContext="{x:StaticResource ViewModel}" HorizontalOptions="Start" Text="10" IsChecked="{Binding SizeFilterChecked5}"/> |
| 43 | + </StackLayout> |
| 44 | + <Label Margin="10,0" FontFamily="Roboto-Medium" FontSize="14" |
| 45 | + Padding="0,20,0,0" Text="Colors" FontAttributes="Bold"/> |
| 46 | + <StackLayout> |
| 47 | + <HorizontalStackLayout > |
| 48 | + <buttons:SfCheckBox x:Name="brown" HorizontalOptions="Start" BindingContext="{x:StaticResource ViewModel}" IsChecked="{Binding ColorFilterChecked1}"/> |
| 49 | + <Border Style="{x:StaticResource ColorBorder}"> |
| 50 | + <BoxView Color="SandyBrown" /> |
| 51 | + </Border> |
| 52 | + <Label Text="Brown" Margin="5" VerticalTextAlignment="Center"> |
| 53 | + <Label.GestureRecognizers> |
| 54 | + <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/> |
| 55 | + </Label.GestureRecognizers> |
| 56 | + </Label> |
| 57 | + </HorizontalStackLayout> |
| 58 | + <HorizontalStackLayout> |
| 59 | + <buttons:SfCheckBox x:Name="green" HorizontalOptions="Start" BindingContext="{x:StaticResource ViewModel}" IsChecked="{Binding ColorFilterChecked2}"/> |
| 60 | + <Border Style="{x:StaticResource ColorBorder}"> |
| 61 | + <BoxView Color="Green" /> |
| 62 | + </Border> |
| 63 | + <Label Text="Green" Margin="5" VerticalTextAlignment="Center"> |
| 64 | + <Label.GestureRecognizers> |
| 65 | + <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"/> |
| 66 | + </Label.GestureRecognizers> |
| 67 | + </Label> |
| 68 | + </HorizontalStackLayout> |
| 69 | + <HorizontalStackLayout> |
| 70 | + <buttons:SfCheckBox x:Name="red" HorizontalOptions="Start" BindingContext="{x:StaticResource ViewModel}" IsChecked="{Binding ColorFilterChecked3}"/> |
| 71 | + <Border Style="{x:StaticResource ColorBorder}"> |
| 72 | + <BoxView Color="Red" /> |
| 73 | + </Border> |
| 74 | + <Label Text="Red" Margin="5" VerticalTextAlignment="Center"> |
| 75 | + <Label.GestureRecognizers> |
| 76 | + <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_2"/> |
| 77 | + </Label.GestureRecognizers> |
| 78 | + </Label> |
| 79 | + </HorizontalStackLayout> |
| 80 | + <HorizontalStackLayout> |
| 81 | + <buttons:SfCheckBox x:Name="sandal" HorizontalOptions="Start" BindingContext="{x:StaticResource ViewModel}" IsChecked="{Binding ColorFilterChecked4}"/> |
| 82 | + <Border Style="{x:StaticResource ColorBorder}"> |
| 83 | + <BoxView Color="Tan"/> |
| 84 | + </Border> |
| 85 | + <Label Text="Sandal" Margin="5" VerticalTextAlignment="Center"> |
| 86 | + <Label.GestureRecognizers> |
| 87 | + <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_3"/> |
| 88 | + </Label.GestureRecognizers> |
| 89 | + </Label> |
| 90 | + </HorizontalStackLayout> |
| 91 | + <HorizontalStackLayout> |
| 92 | + <buttons:SfCheckBox x:Name="violet" HorizontalOptions="Start" BindingContext="{x:StaticResource ViewModel}" IsChecked="{Binding ColorFilterChecked5}"/> |
| 93 | + <Border Style="{x:StaticResource ColorBorder}"> |
| 94 | + <BoxView Color="DarkViolet" /> |
| 95 | + </Border> |
| 96 | + <Label Text="Violet" Margin="5" VerticalTextAlignment="Center"> |
| 97 | + <Label.GestureRecognizers> |
| 98 | + <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_4"/> |
| 99 | + </Label.GestureRecognizers> |
| 100 | + </Label> |
| 101 | + </HorizontalStackLayout> |
| 102 | + </StackLayout> |
| 103 | + </StackLayout> |
| 104 | + </ScrollView> |
| 105 | + </Border> |
| 106 | + |
| 107 | + <Border Grid.Column="1" Margin="5" Padding="5" |
| 108 | + Stroke="Gray" StrokeThickness="0.3" StrokeShape="RoundRectangle 10"> |
| 109 | + |
| 110 | + <listView:SfListView BindingContext="{x:StaticResource ViewModel}" SelectionMode="None" ItemSpacing="5" ItemSize="260" ItemsSource="{Binding Filtered}" > |
| 111 | + <listView:SfListView.ItemsLayout> |
| 112 | + <listView:GridLayout SpanCount="3" /> |
| 113 | + </listView:SfListView.ItemsLayout> |
| 114 | + <listView:SfListView.ItemTemplate> |
| 115 | + <DataTemplate> |
| 116 | + <ViewCell> |
| 117 | + <Border Stroke="Gray" |
| 118 | + StrokeThickness="0.3" Margin="0,0,7,0" |
| 119 | + StrokeShape="RoundRectangle 0"> |
| 120 | + <Grid Margin="5" RowDefinitions="7*,3*"> |
| 121 | + <Image Source="{Binding Image}"/> |
| 122 | + <Grid RowDefinitions="1*,3*" Grid.Row="1" Margin="0,10" |
| 123 | + Padding="5,0" RowSpacing="5" VerticalOptions="EndAndExpand"> |
| 124 | + <Label FontSize="14" VerticalTextAlignment="Center" |
| 125 | + Text="{Binding Brand}" FontFamily="Roboto-Medium"/> |
| 126 | + <Label Grid.Row="1" FontFamily="Roboto-Regular" Text="{Binding Description}" LineBreakMode="WordWrap"/> |
| 127 | + </Grid> |
| 128 | + </Grid> |
| 129 | + </Border> |
| 130 | + </ViewCell> |
| 131 | + </DataTemplate> |
| 132 | + </listView:SfListView.ItemTemplate> |
| 133 | + </listView:SfListView> |
| 134 | + </Border> |
| 135 | + </Grid> |
| 136 | + |
| 137 | + |
| 138 | +</ContentPage> |
0 commit comments