-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathMainPage.xaml
136 lines (108 loc) · 8.85 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
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="WatchWall.MainPage"
xmlns:vm="clr-namespace:WatchWall.ViewModel"
xmlns:st="clr-namespace:Plugin.SharedTransitions;assembly=Plugin.SharedTransitions"
BackgroundColor="#f5f6f6"
NavigationPage.HasNavigationBar="False">
<ContentPage.BindingContext>
<vm:MainViewModel x:Name="vm"/>
</ContentPage.BindingContext>
<Grid>
<Grid RowDefinitions="Auto, Auto, Auto, *" RowSpacing="30" Padding="30">
<Grid ColumnDefinitions="Auto, * , Auto">
<ImageButton x:Name="Menu" Source="menu.png" BackgroundColor="Transparent" VerticalOptions="Center" HeightRequest="24" WidthRequest="24"/>
<Label Grid.Column="1" Text="Watch Wall" TextColor="#2D2942" FontSize="20" FontAttributes="Bold"
VerticalOptions="Center" HorizontalOptions="Center" FontFamily="LightFont"/>
<Image Grid.Column="2" Source="cartUpdate.png" VerticalOptions="Center" HeightRequest="28" WidthRequest="28"/>
</Grid>
<Grid Grid.Row="1" ColumnDefinitions="*, Auto" ColumnSpacing="15">
<Frame Padding="10" BackgroundColor="#E6EAEA" CornerRadius="25" BorderColor="Transparent">
<StackLayout Spacing="15" Orientation="Horizontal">
<Path Fill="#2D2942" Opacity="0.5" Data="M12.323,2.398c-0.741-0.312-1.523-0.472-2.319-0.472c-2.394,0-4.544,1.423-5.476,3.625C3.907,7.013,3.896,8.629,4.49,10.102c0.528,1.304,1.494,2.333,2.72,2.99L5.467,17.33c-0.113,0.273,0.018,0.59,0.292,0.703c0.068,0.027,0.137,0.041,0.206,0.041c0.211,0,0.412-0.127,0.498-0.334l1.74-4.23c0.583,0.186,1.18,0.309,1.795,0.309c2.394,0,4.544-1.424,5.478-3.629C16.755,7.173,15.342,3.68,12.323,2.398z M14.488,9.77c-0.769,1.807-2.529,
2.975-4.49,2.975c-0.651,0-1.291-0.131-1.897-0.387c-0.002-0.004-0.002-0.004-0.002-0.004c-0.003,0-0.003,0-0.003,0s0,0,0,
0c-1.195-0.508-2.121-1.452-2.607-2.656c-0.489-1.205-0.477-2.53,0.03-3.727c0.764-1.805,2.525-2.969,
4.487-2.969c0.651,0,1.292,0.129,1.898,0.386C14.374,4.438,15.533,7.3,14.488,9.77z"
Aspect="Uniform" VerticalOptions="Center" HeightRequest="18" WidthRequest="18"/>
<Label Text="Search" TextColor="#2D2942" FontSize="15" Opacity="0.5" VerticalOptions="Center" HorizontalOptions="Center"/>
</StackLayout>
</Frame>
<Grid Grid.Column="1" HorizontalOptions="End">
<Ellipse HeightRequest="42" WidthRequest="42" Fill="white"/>
<Image Source="Filter.png" VerticalOptions="Center" HeightRequest="20" WidthRequest="20"/>
</Grid>
</Grid>
<Grid Grid.Row="2" ColumnDefinitions="*, Auto" ColumnSpacing="15">
<Label Text="Popular" TextColor="#2D2942" FontSize="17" FontAttributes="Bold" VerticalOptions="Center"/>
<Image Grid.Column="1" Source="threedots.png" VerticalOptions="Center" HeightRequest="20" WidthRequest="20"/>
</Grid>
<CollectionView Grid.Row="3" SelectionMode="Single" ItemsSource="{Binding Products}"
SelectedItem="{Binding SelectedProduct}" SelectionChanged="ProductSelected">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.EmptyView>
<Label Text="No item found." TextColor="Gray" HorizontalOptions="Center" VerticalOptions="Center"/>
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="*, 2.5*" HeightRequest="190" BackgroundColor="White" Padding="15">
<Grid.Clip>
<PathGeometry Figures="M20 96.5596C20 92.4719 22.0807 88.6655 25.5215
86.4586L146.521 8.8517C154.508 3.72922 165 9.46434 165
18.9527V185C165 191.627 159.627 197 153 197H32C25.3726 197
20 191.627 20 185V96.5596Z"/>
</Grid.Clip>
<Grid HorizontalOptions="End" VerticalOptions="Start">
<Ellipse Fill="white" HeightRequest="20" WidthRequest="20"/>
<Path Fill="red" Aspect="Uniform" VerticalOptions="Center" HorizontalOptions="Center"
Data="M13.22,2.984c-1.125,0-2.504,0.377-3.53,1.182C8.756,3.441,7.502,2.984,6.28,2.984c-2.6,0-4.714,2.116-4.714,4.716c0,0.32,0.032,0.644,0.098,0.96c0.799,4.202,6.781,7.792,7.46,8.188c0.193,0.111,0.41,0.168,0.627,0.168c0.187,0,0.376-0.041,0.55-0.127c0.011-0.006,1.349-0.689,2.91-1.865c0.021-0.016,0.043-0.031,
0.061-0.043c0.021-0.016,0.045-0.033,0.064-0.053c3.012-2.309,4.6-4.805,4.6-7.229C17.935,5.1,15.819,2.984,13.22,
2.984z M12.544,13.966c-0.004,0.004-0.018,0.014-0.021,0.018s-0.018,0.012-0.023,0.016c-1.423,1.076-2.674,1.734-2.749,1.771c0,
0-6.146-3.576-6.866-7.363C2.837,8.178,2.811,7.942,2.811,7.7c0-1.917,1.554-3.47,3.469-3.47c1.302,0,2.836,0.736,
3.431,1.794c0.577-1.121,2.161-1.794,3.509-1.794c1.914,0,3.469,1.553,3.469,3.47C16.688,10.249,14.474,12.495,12.544,13.966z"/>
</Grid>
<StackLayout Grid.Row="1" Orientation="Horizontal" VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" Padding="10,0,0,0">
<Image Source="{Binding Image}" WidthRequest="55" HorizontalOptions="Start"
st:Transition.Name="WatchImage"
st:Transition.Group="{Binding Name}"/>
<StackLayout Spacing="5" VerticalOptions="CenterAndExpand">
<Label Text="{Binding Name}" TextColor="#2d2942" FontSize="14"/>
<Label Text="{Binding Model}" TextColor="#2d2942" FontSize="12" Opacity="0.5"/>
<Label Text="{Binding Price,StringFormat='${0}'}" TextColor="#2d2942" FontSize="14" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
<Grid x:Name="MenuGrid" IsVisible="false">
<BoxView x:Name="MenuOverlay" BackgroundColor="Black" Opacity="0.35">
<BoxView.GestureRecognizers>
<TapGestureRecognizer Tapped="OverlayTapped"/>
</BoxView.GestureRecognizers>
</BoxView>
<Grid x:Name="MenuView" WidthRequest="260" BackgroundColor="#483635" HorizontalOptions="Start" TranslationX="-260">
<Grid.Clip>
<PathGeometry Figures="M0,0V511.043H140.714186.992-116.012V0Z"/>
</Grid.Clip>
<StackLayout Margin="30,100" Spacing="20" BindableLayout.ItemsSource="{Binding MenuList}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" Spacing="20">
<Grid Grid.Row="2" HorizontalOptions="Start" VerticalOptions="Start" HeightRequest="46" WidthRequest="46">
<Ellipse WidthRequest="46" HeightRequest="46" Fill="white" Opacity="0.5"/>
<Image Source="{Binding Icon}" WidthRequest="22" HeightRequest="22" HorizontalOptions="Center" VerticalOptions="Center"/>
</Grid>
<Label Text="{Binding Name}" TextColor="White" FontSize="16" VerticalOptions="Center" FontFamily="NormalFont"/>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</Grid>
</Grid>
</ContentPage>