Add styling

This commit is contained in:
Christian Arenas 2017-06-22 19:05:34 +02:00
parent 55c2c666c0
commit 290057789b
2 changed files with 34 additions and 42 deletions

View File

@ -44,6 +44,7 @@
RowSpacing="0"> RowSpacing="0">
<Grid.RowDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions> </Grid.RowDefinitions>
<!-- CAMPAIGNS --> <!-- CAMPAIGNS -->
<Grid <Grid

View File

@ -6,12 +6,16 @@
xmlns:controls="clr-namespace:eShopOnContainers.Core.Controls;assembly=eShopOnContainers.Core" xmlns:controls="clr-namespace:eShopOnContainers.Core.Controls;assembly=eShopOnContainers.Core"
xmlns:animations="clr-namespace:eShopOnContainers.Core.Animations;assembly=eShopOnContainers.Core" xmlns:animations="clr-namespace:eShopOnContainers.Core.Animations;assembly=eShopOnContainers.Core"
xmlns:triggers="clr-namespace:eShopOnContainers.Core.Triggers;assembly=eShopOnContainers.Core" xmlns:triggers="clr-namespace:eShopOnContainers.Core.Triggers;assembly=eShopOnContainers.Core"
xmlns:behaviors="clr-namespace:eShopOnContainers.Core.Behaviors;assembly=eShopOnContainers.Core"
viewModelBase:ViewModelLocator.AutoWireViewModel="true" viewModelBase:ViewModelLocator.AutoWireViewModel="true"
Title="Settings"> Title="Settings">
<ContentPage.Resources> <ContentPage.Resources>
<ResourceDictionary> <ResourceDictionary>
<Style x:Key="SettingsStackLayoutStyle" TargetType="{x:Type StackLayout}">
<Setter Property="Margin"
Value="6" />
</Style>
<Style x:Key="SettingsTitleStyle" <Style x:Key="SettingsTitleStyle"
TargetType="{x:Type Label}"> TargetType="{x:Type Label}">
<Setter Property="FontFamily" <Setter Property="FontFamily"
@ -24,6 +28,7 @@
Value="Center" /> Value="Center" />
<Setter Property="Margin" <Setter Property="Margin"
Value="12, 0" /> Value="12, 0" />
<Setter Property="TextColor" Value="{StaticResource GreenColor}" />
</Style> </Style>
<Style x:Key="SettingsDescriptionStyle" <Style x:Key="SettingsDescriptionStyle"
@ -31,6 +36,7 @@
BasedOn="{StaticResource SettingsTitleStyle}"> BasedOn="{StaticResource SettingsTitleStyle}">
<Setter Property="FontSize" <Setter Property="FontSize"
Value="{StaticResource LittleSize}" /> Value="{StaticResource LittleSize}" />
<Setter Property="TextColor" Value="{StaticResource BlackColor}" />
</Style> </Style>
<Style x:Key="SettingsWarningMessageStyle" <Style x:Key="SettingsWarningMessageStyle"
@ -38,7 +44,7 @@
BasedOn="{StaticResource SettingsTitleStyle}"> BasedOn="{StaticResource SettingsTitleStyle}">
<Setter Property="FontSize" <Setter Property="FontSize"
Value="{StaticResource LittleSize}" /> Value="{StaticResource LittleSize}" />
<Setter Property="TextColor" Value="Red" /> <Setter Property="TextColor" Value="{StaticResource ErrorColor}" />
</Style> </Style>
<Style x:Key="SettingsToggleButtonStyle" <Style x:Key="SettingsToggleButtonStyle"
@ -49,8 +55,12 @@
Value="48" /> Value="48" />
<Setter Property="VerticalOptions" <Setter Property="VerticalOptions"
Value="Center" /> Value="Center" />
<Setter Property="HorizontalOptions"
Value="Center" />
<Setter Property="Margin" <Setter Property="Margin"
Value="12, 12, 12, 0" /> Value="12,0" />
<Setter Property="Animate"
Value="True" />
</Style> </Style>
<Style x:Key="HeaderLabelStyle" <Style x:Key="HeaderLabelStyle"
@ -63,6 +73,8 @@
Value="{StaticResource GreenColor}" /> Value="{StaticResource GreenColor}" />
<Setter Property="HorizontalOptions" <Setter Property="HorizontalOptions"
Value="Start" /> Value="Start" />
<Setter Property="Margin"
Value="12,0" />
</Style> </Style>
<animations:StoryBoard <animations:StoryBoard
@ -95,7 +107,6 @@
<ScrollView> <ScrollView>
<StackLayout <StackLayout
x:Name="MockServices"> x:Name="MockServices">
<!-- MOCK SERVICES -->
<Grid> <Grid>
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="*" /> <ColumnDefinition Width="*" />
@ -105,22 +116,17 @@
<RowDefinition Height="1" /> <RowDefinition Height="1" />
<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />
<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />
<RowDefinition Height="1" />
<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />
<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />
<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />
</Grid.RowDefinitions> </Grid.RowDefinitions>
<Grid <!-- MOCK SERVICES -->
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
BackgroundColor="Gray"/>
<StackLayout <StackLayout
Grid.Column="0" Grid.Column="0"
Grid.Row="1"> Grid.Row="1"
Style="{StaticResource SettingsStackLayoutStyle}">
<Label <Label
Text="{Binding TitleUseAzureServices}" Text="{Binding TitleUseAzureServices}"
TextColor="{StaticResource GreenColor}"
Style="{StaticResource SettingsTitleStyle}"/> Style="{StaticResource SettingsTitleStyle}"/>
<Label <Label
Text="{Binding DescriptionUseAzureServices}" Text="{Binding DescriptionUseAzureServices}"
@ -129,8 +135,7 @@
<!-- ON / OFF --> <!-- ON / OFF -->
<controls:ToggleButton <controls:ToggleButton
Grid.Column="1" Grid.Column="1"
Grid.Row="1" Grid.Row="1"
Animate="True"
Checked="{Binding UseAzureServices, Mode=TwoWay}" Checked="{Binding UseAzureServices, Mode=TwoWay}"
Command="{Binding ToggleMockServicesCommand}" Command="{Binding ToggleMockServicesCommand}"
Style="{StaticResource SettingsToggleButtonStyle}"> Style="{StaticResource SettingsToggleButtonStyle}">
@ -152,7 +157,7 @@
Grid.Row="2" Grid.Row="2"
Grid.Column="0" Grid.Column="0"
Grid.ColumnSpan="2" Grid.ColumnSpan="2"
Margin="12, 0, 12, 12" Style="{StaticResource SettingsStackLayoutStyle}"
IsVisible="{Binding UseAzureServices}"> IsVisible="{Binding UseAzureServices}">
<Label <Label
Text="Endpoint" Text="Endpoint"
@ -168,17 +173,15 @@
</Entry.Style> </Entry.Style>
</Entry> </Entry>
</StackLayout> </StackLayout>
<Grid
Grid.Row="3" <!-- USE LOCATIONS -->
Grid.Column="0"
Grid.ColumnSpan="2"/>
<StackLayout <StackLayout
Grid.Column="0" Grid.Column="0"
Grid.Row="4" Grid.Row="3"
IsVisible="{Binding UserIsLogged}"> IsVisible="{Binding UserIsLogged}"
Style="{StaticResource SettingsStackLayoutStyle}">
<Label <Label
Text="{Binding TitleUseFakeLocation}" Text="{Binding TitleUseFakeLocation}"
TextColor="{StaticResource GreenColor}"
Style="{StaticResource SettingsTitleStyle}"/> Style="{StaticResource SettingsTitleStyle}"/>
<Label <Label
Text="{Binding DescriptionUseFakeLocation}" Text="{Binding DescriptionUseFakeLocation}"
@ -187,8 +190,7 @@
<!-- ON / OFF --> <!-- ON / OFF -->
<controls:ToggleButton <controls:ToggleButton
Grid.Column="1" Grid.Column="1"
Grid.Row="4" Grid.Row="3"
Animate="True"
Checked="{Binding UseFakeLocation, Mode=TwoWay}" Checked="{Binding UseFakeLocation, Mode=TwoWay}"
Command="{Binding ToggleFakeLocationCommand}" Command="{Binding ToggleFakeLocationCommand}"
Style="{StaticResource SettingsToggleButtonStyle}" Style="{StaticResource SettingsToggleButtonStyle}"
@ -208,10 +210,10 @@
</controls:ToggleButton> </controls:ToggleButton>
<!-- FAKE LOCATIONS --> <!-- FAKE LOCATIONS -->
<StackLayout <StackLayout
Grid.Row="5" Grid.Row="4"
Grid.Column="0" Grid.Column="0"
Grid.ColumnSpan="2" Grid.ColumnSpan="2"
Margin="12, 0, 12, 12" Style="{StaticResource SettingsStackLayoutStyle}"
IsVisible="{Binding UseFakeLocation}"> IsVisible="{Binding UseFakeLocation}">
<Label <Label
Text="Latitude" Text="Latitude"
@ -245,25 +247,15 @@
Command="{Binding ToggleSendLocationCommand}" Command="{Binding ToggleSendLocationCommand}"
Text="Send Location"/> Text="Send Location"/>
</StackLayout> </StackLayout>
<!-- GPS USAGE --> <!-- ALLOW GPS LOCATION -->
<StackLayout
Grid.Row="5"
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="12, 0, 12, 12"
IsVisible="{Binding UseFakeLocation, Converter={StaticResource InverseBoolConverter}}">
</StackLayout>
<!--<Grid
Grid.Row="6"
Grid.Column="0"
Grid.ColumnSpan="2"/>-->
<StackLayout <StackLayout
Grid.Column="0" Grid.Column="0"
Grid.Row="6" Grid.Row="5"
Style="{StaticResource SettingsStackLayoutStyle}"
IsVisible="{Binding UseFakeLocation, Converter={StaticResource InverseBoolConverter}}"> IsVisible="{Binding UseFakeLocation, Converter={StaticResource InverseBoolConverter}}">
<Label <Label
Text="{Binding TitleAllowGpsLocation}" Text="{Binding TitleAllowGpsLocation}"
TextColor="{StaticResource GreenColor}"
Style="{StaticResource SettingsTitleStyle}"/> Style="{StaticResource SettingsTitleStyle}"/>
<Label <Label
Text="{Binding DescriptionAllowGpsLocation}" Text="{Binding DescriptionAllowGpsLocation}"
@ -275,8 +267,7 @@
<!-- ON / OFF --> <!-- ON / OFF -->
<controls:ToggleButton <controls:ToggleButton
Grid.Column="1" Grid.Column="1"
Grid.Row="6" Grid.Row="5"
Animate="True"
Checked="{Binding AllowGpsLocation, Mode=TwoWay}" Checked="{Binding AllowGpsLocation, Mode=TwoWay}"
Command="{Binding ToggleAllowGpsLocationCommand}" Command="{Binding ToggleAllowGpsLocationCommand}"
Style="{StaticResource SettingsToggleButtonStyle}" Style="{StaticResource SettingsToggleButtonStyle}"