Improve Layout
This commit is contained in:
Javier Suárez Ruiz
Родитель
258805d1fe
Коммит
ca0ba3e9d8
|
|
@ -74,7 +74,6 @@
|
|||
</Style>
|
||||
|
||||
<Style x:Key="ChatCollectionStyle" TargetType="CollectionView">
|
||||
<Setter Property="HeightRequest" Value="400" />
|
||||
<Setter Property="Margin" Value="18, 32, 18, 0" />
|
||||
</Style>
|
||||
|
||||
|
|
@ -94,7 +93,11 @@
|
|||
<Setter Property="VerticalOptions" Value="Center" />
|
||||
<Setter Property="Margin" Value="6, 0" />
|
||||
</Style>
|
||||
|
||||
<Style x:Key="SearchButtonContainerStyle" TargetType="Grid">
|
||||
<Setter Property="HorizontalOptions" Value="End" />
|
||||
<Setter Property="WidthRequest" Value="40" />
|
||||
</Style>
|
||||
|
||||
<Style x:Key="SearchButtonEllipseStyle" TargetType="BoxView">
|
||||
<Setter Property="Color" Value="{StaticResource PrimaryColor}" />
|
||||
<Setter Property="CornerRadius" Value="32" />
|
||||
|
|
@ -116,131 +119,130 @@
|
|||
<viewmodel:DetailViewModel />
|
||||
</ContentPage.BindingContext>
|
||||
<ContentPage.Content>
|
||||
<ScrollView
|
||||
BackgroundColor="{StaticResource PrimaryColor}">
|
||||
<Grid
|
||||
RowDefinitions="Auto, *">
|
||||
<Grid
|
||||
BackgroundColor="{StaticResource PrimaryColor}"
|
||||
RowDefinitions="220, *">
|
||||
<Grid
|
||||
Grid.Row="0"
|
||||
RowDefinitions="Auto, 150">
|
||||
<Grid
|
||||
Grid.Row="0"
|
||||
RowDefinitions="Auto, 150">
|
||||
<Grid
|
||||
ColumnDefinitions="Auto, *"
|
||||
Style="{StaticResource NavigationButtonContainerStyle}">
|
||||
<Label
|
||||
Text="Back"
|
||||
Style="{StaticResource NavigationButtonStyle}">
|
||||
<Label.GestureRecognizers>
|
||||
<TapGestureRecognizer
|
||||
Command="{Binding BackCommand}" />
|
||||
</Label.GestureRecognizers>
|
||||
</Label>
|
||||
<Label
|
||||
Grid.Column="1"
|
||||
Text="Search"
|
||||
HorizontalOptions="End"
|
||||
Style="{StaticResource NavigationButtonStyle}"/>
|
||||
</Grid>
|
||||
<Grid
|
||||
Grid.Row="1"
|
||||
ColumnDefinitions="*, Auto">
|
||||
<Label
|
||||
Text="{Binding User.Name}"
|
||||
Style="{StaticResource UsernameTextStyle}"/>
|
||||
<StackLayout
|
||||
Grid.Column="1"
|
||||
Style="{StaticResource ButtonsContainerStyle}">
|
||||
<Grid>
|
||||
<BoxView
|
||||
Color="{StaticResource CircularButtonEllipseColor}"
|
||||
Style="{StaticResource CircularButtonEllipseStyle}" />
|
||||
<!-- FontImageSource not rendering correctly -->
|
||||
<!--
|
||||
<Image
|
||||
Margin="8">
|
||||
<Image.Source>
|
||||
<FontImageSource
|
||||
FontFamily="Material Icons"
|
||||
Glyph=""
|
||||
Color="White"
|
||||
Size="12" />
|
||||
</Image.Source>
|
||||
</Image>
|
||||
-->
|
||||
<Image
|
||||
Source="call.png"
|
||||
Style="{StaticResource CircularButtonImageStyle}"/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<BoxView
|
||||
Color="{StaticResource CircularButtonEllipseColor}"
|
||||
Style="{StaticResource CircularButtonEllipseStyle}" />
|
||||
<!-- FontImageSource not rendering correctly -->
|
||||
<!--
|
||||
<Image
|
||||
Margin="8">
|
||||
<Image.Source>
|
||||
<FontImageSource
|
||||
FontFamily="Material Icons"
|
||||
Glyph=""
|
||||
Color="White"
|
||||
Size="12" />
|
||||
</Image.Source>
|
||||
</Image>
|
||||
-->
|
||||
<Image
|
||||
Source="record.png"
|
||||
Style="{StaticResource CircularButtonImageStyle}"/>
|
||||
</Grid>
|
||||
</StackLayout>
|
||||
</Grid>
|
||||
ColumnDefinitions="Auto, *"
|
||||
Style="{StaticResource NavigationButtonContainerStyle}">
|
||||
<Label
|
||||
Text="Back"
|
||||
Style="{StaticResource NavigationButtonStyle}">
|
||||
<Label.GestureRecognizers>
|
||||
<TapGestureRecognizer
|
||||
Command="{Binding BackCommand}" />
|
||||
</Label.GestureRecognizers>
|
||||
</Label>
|
||||
<Label
|
||||
Grid.Column="1"
|
||||
Text="Search"
|
||||
HorizontalOptions="End"
|
||||
Style="{StaticResource NavigationButtonStyle}"/>
|
||||
</Grid>
|
||||
<Grid
|
||||
Grid.Row="1">
|
||||
<BoxView
|
||||
Style="{StaticResource ChatAdornerStyle}"/>
|
||||
<Grid
|
||||
RowDefinitions="*, Auto">
|
||||
Grid.Row="1"
|
||||
ColumnDefinitions="*, Auto">
|
||||
<Label
|
||||
Text="{Binding User.Name}"
|
||||
Style="{StaticResource UsernameTextStyle}"/>
|
||||
<StackLayout
|
||||
Grid.Column="1"
|
||||
Style="{StaticResource ButtonsContainerStyle}">
|
||||
<Grid>
|
||||
<CollectionView
|
||||
ItemsSource="{Binding Messages}"
|
||||
ItemTemplate="{StaticResource MessageDataTemplateSelector}"
|
||||
Style="{StaticResource ChatCollectionStyle}" />
|
||||
<BoxView
|
||||
Color="{StaticResource CircularButtonEllipseColor}"
|
||||
Style="{StaticResource CircularButtonEllipseStyle}" />
|
||||
<!-- FontImageSource not rendering correctly -->
|
||||
<!--
|
||||
<Image
|
||||
Margin="8">
|
||||
<Image.Source>
|
||||
<FontImageSource
|
||||
FontFamily="Material Icons"
|
||||
Glyph=""
|
||||
Color="White"
|
||||
Size="12" />
|
||||
</Image.Source>
|
||||
</Image>
|
||||
-->
|
||||
<Image
|
||||
Source="call.png"
|
||||
Style="{StaticResource CircularButtonImageStyle}"/>
|
||||
</Grid>
|
||||
<Frame
|
||||
Grid.Row="1"
|
||||
Style="{StaticResource ChatEntryContainerStyle}">
|
||||
<Grid
|
||||
ColumnDefinitions="*, 32">
|
||||
<controls:BorderlessEntry
|
||||
Placeholder="Type your message..."
|
||||
Style="{StaticResource ChatEntryStyle}"/>
|
||||
<Grid
|
||||
Grid.Column="1">
|
||||
<Ellipse
|
||||
Fill="{StaticResource PrimaryBrush}"
|
||||
Style="{StaticResource SearchButtonEllipseStyle}"/>
|
||||
<!-- FontImageSource not rendering correctly -->
|
||||
<!--
|
||||
<Image
|
||||
Margin="6">
|
||||
<Image.Source>
|
||||
<FontImageSource
|
||||
FontFamily="Material Icons"
|
||||
Glyph=""
|
||||
Color="White"
|
||||
Size="12" />
|
||||
</Image.Source>
|
||||
</Image>
|
||||
-->
|
||||
<Image
|
||||
Source="send.png"
|
||||
Style="{StaticResource SearchButtonImageStyle}"/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Frame>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<BoxView
|
||||
Color="{StaticResource CircularButtonEllipseColor}"
|
||||
Style="{StaticResource CircularButtonEllipseStyle}" />
|
||||
<!-- FontImageSource not rendering correctly -->
|
||||
<!--
|
||||
<Image
|
||||
Margin="8">
|
||||
<Image.Source>
|
||||
<FontImageSource
|
||||
FontFamily="Material Icons"
|
||||
Glyph=""
|
||||
Color="White"
|
||||
Size="12" />
|
||||
</Image.Source>
|
||||
</Image>
|
||||
-->
|
||||
<Image
|
||||
Source="record.png"
|
||||
Style="{StaticResource CircularButtonImageStyle}"/>
|
||||
</Grid>
|
||||
</StackLayout>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</ScrollView>
|
||||
<Grid
|
||||
Grid.Row="1">
|
||||
<BoxView
|
||||
Style="{StaticResource ChatAdornerStyle}"/>
|
||||
<Grid
|
||||
RowDefinitions="*, Auto">
|
||||
<Grid>
|
||||
<CollectionView
|
||||
ItemsSource="{Binding Messages}"
|
||||
ItemTemplate="{StaticResource MessageDataTemplateSelector}"
|
||||
Style="{StaticResource ChatCollectionStyle}" />
|
||||
</Grid>
|
||||
<Frame
|
||||
Grid.Row="1"
|
||||
Style="{StaticResource ChatEntryContainerStyle}">
|
||||
<Grid
|
||||
ColumnDefinitions="*, Auto">
|
||||
<controls:BorderlessEntry
|
||||
Placeholder="Type your message..."
|
||||
Style="{StaticResource ChatEntryStyle}"/>
|
||||
<Grid
|
||||
Grid.Column="1"
|
||||
Style="{StaticResource SearchButtonContainerStyle}">
|
||||
<Ellipse
|
||||
Fill="{StaticResource PrimaryBrush}"
|
||||
Style="{StaticResource SearchButtonEllipseStyle}"/>
|
||||
<!-- FontImageSource not rendering correctly -->
|
||||
<!--
|
||||
<Image
|
||||
Margin="6">
|
||||
<Image.Source>
|
||||
<FontImageSource
|
||||
FontFamily="Material Icons"
|
||||
Glyph=""
|
||||
Color="White"
|
||||
Size="12" />
|
||||
</Image.Source>
|
||||
</Image>
|
||||
-->
|
||||
<Image
|
||||
Source="send.png"
|
||||
Style="{StaticResource SearchButtonImageStyle}"/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Frame>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</ContentPage.Content>
|
||||
</ContentPage>
|
||||
|
|
@ -44,57 +44,55 @@
|
|||
<viewmodel:HomeViewModel />
|
||||
</ContentPage.BindingContext>
|
||||
<ContentPage.Content>
|
||||
<ScrollView
|
||||
BackgroundColor="{StaticResource PrimaryColor}">
|
||||
<Grid
|
||||
BackgroundColor="{StaticResource PrimaryColor}"
|
||||
RowDefinitions="220, *">
|
||||
<Grid
|
||||
RowDefinitions="Auto, *">
|
||||
<Grid
|
||||
RowDefinitions="Auto, *">
|
||||
<Label
|
||||
Text="Chat with your friends"
|
||||
Style="{StaticResource TitleTextStyle}" />
|
||||
<Grid
|
||||
Grid.Row="1"
|
||||
ColumnDefinitions="Auto, *"
|
||||
Style="{StaticResource SuggestedContainerStyle}">
|
||||
<!-- SEARCH -->
|
||||
<Grid
|
||||
Style="{StaticResource SearchContainerStyle}">
|
||||
<Ellipse
|
||||
Fill="{StaticResource SearchBackgroundColor}"/>
|
||||
<Image
|
||||
Source="search.png"/>
|
||||
</Grid>
|
||||
<!-- SUGGESTED CONTACTS -->
|
||||
<ScrollView
|
||||
Grid.Column="1">
|
||||
<StackLayout
|
||||
Orientation="Horizontal"
|
||||
BindableLayout.ItemsSource="{Binding Users}">
|
||||
<BindableLayout.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<templates:SuggestedItemTemplate />
|
||||
</DataTemplate>
|
||||
</BindableLayout.ItemTemplate>
|
||||
</StackLayout>
|
||||
</ScrollView>
|
||||
<Label
|
||||
Text="Chat with your friends"
|
||||
Style="{StaticResource TitleTextStyle}" />
|
||||
<Grid
|
||||
Grid.Row="1"
|
||||
ColumnDefinitions="Auto, *"
|
||||
Style="{StaticResource SuggestedContainerStyle}">
|
||||
<!-- SEARCH -->
|
||||
<Grid
|
||||
Style="{StaticResource SearchContainerStyle}">
|
||||
<Ellipse
|
||||
Fill="{StaticResource SearchBackgroundColor}"/>
|
||||
<Image
|
||||
Source="search.png"/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid
|
||||
Grid.Row="1">
|
||||
<BoxView
|
||||
Style="{StaticResource RecentChatAdornerStyle}"/>
|
||||
<CollectionView
|
||||
ItemsSource="{Binding RecentChat}"
|
||||
Style="{StaticResource RecentChatCollectionStyle}">
|
||||
<CollectionView.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<templates:RecentChatItemTemplate />
|
||||
</DataTemplate>
|
||||
</CollectionView.ItemTemplate>
|
||||
</CollectionView>
|
||||
<!-- SUGGESTED CONTACTS -->
|
||||
<ScrollView
|
||||
Grid.Column="1">
|
||||
<StackLayout
|
||||
Orientation="Horizontal"
|
||||
BindableLayout.ItemsSource="{Binding Users}">
|
||||
<BindableLayout.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<templates:SuggestedItemTemplate />
|
||||
</DataTemplate>
|
||||
</BindableLayout.ItemTemplate>
|
||||
</StackLayout>
|
||||
</ScrollView>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</ScrollView>
|
||||
<Grid
|
||||
Grid.Row="1">
|
||||
<BoxView
|
||||
Style="{StaticResource RecentChatAdornerStyle}"/>
|
||||
<CollectionView
|
||||
ItemsSource="{Binding RecentChat}"
|
||||
Style="{StaticResource RecentChatCollectionStyle}">
|
||||
<CollectionView.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<templates:RecentChatItemTemplate />
|
||||
</DataTemplate>
|
||||
</CollectionView.ItemTemplate>
|
||||
</CollectionView>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</ContentPage.Content>
|
||||
</ContentPage>
|
||||
Загрузка…
Ссылка в новой задаче