eliteKit: ProductView.xaml

ProductView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:ek="clr-namespace:eliteKit.eliteElements;assembly=eliteKit"
             xmlns:converters="clr-namespace:DemoEliteKit.Converters"
             xmlns:vm="clr-namespace:DemoEliteKit.ViewModels"
             x:Class="DemoEliteKit.Views.ProductView"
             mc:Ignorable="d">

    <ContentPage.BindingContext>
        <vm:ProductViewModel/>
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <converters:InverseBoolConverter x:Key="InverseBoolConverter"/>
    </ContentPage.Resources>
    
    <ContentPage.Content>
        <StackLayout>
            <ek:eliteHeader ColorPrimary="{StaticResource MainColor}" 
                            ColorSecondary="{StaticResource AuxColor}"
                            VerticalOptions="Start"
                            HeightRequest="75">
                <ek:eliteHeader.HeaderView>
                    <Image Source="{Binding HeaderImage}" 
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           HeightRequest="84"
                           WidthRequest="75"/>
                </ek:eliteHeader.HeaderView>
            </ek:eliteHeader>

            <ek:eliteLoaderRadial IsVisible="{Binding IsBusy}"
                                  ColorPrimary="{StaticResource MainColor}"
                                  ColorSecondary="{StaticResource AuxColor}"
                                  VerticalOptions="Center"
                                  HorizontalOptions="Center"
                                  IsGradient="True"
                                  HeightRequest="50"
                                  WidthRequest="50"/>

            <ScrollView>
                <Grid Margin="10" IsVisible="{Binding IsBusy, Converter={StaticResource InverseBoolConverter}}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="2*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <Label Grid.Row="0"
                           Grid.Column="0"
                           VerticalOptions="Center"
                           Text="Product Name"/>

                    <Entry Grid.Row="0"
                           Grid.Column="1"
                           Text="{Binding ProductName}"
                           BackgroundColor="{StaticResource MainColor}"
                           TextColor="White"
                           VerticalOptions="Center"/>

                    <Label Grid.Row="1"
                           Grid.Column="0"
                           VerticalOptions="Center"
                           Text="Product Stock"/>

                    <ek:eliteSlider Grid.Row="1"
                                    Grid.Column="1"
                                    x:Name="stockSlider"
                                    CurrentValue="{Binding ProductStock}"
                                    ColorSliderBar="{StaticResource AuxColor}"
                                    ColorSliderBarActive="{StaticResource MainColor}"
                                    ColorThumb="{StaticResource MainColor}"
                                    VerticalOptions="Center"
                                    WidthRequest="200"
                                    HeightRequest="50"
                                    MinValue="0"
                                    MaxValue="10"/>

                        <ek:eliteBadge Grid.Row="1"
                                   Grid.Column="2"
                                   ContentBadge="{Binding Source={x:Reference stockSlider}, Path=CurrentValue}"
                                   x:Name="badge"
                                   BadgeDirection="TopRight"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center"/>

                    <Label Grid.Row="2"
                           Grid.Column="0"
                           VerticalOptions="Center"
                           Text="Category"/>

                    <StackLayout Grid.Row="2"
                                 Grid.Column="1"
                                 Grid.ColumnSpan="2">
                        <StackLayout Orientation="Horizontal">
                            <ek:eliteRadiobutton IsChecked="{Binding IsTechnology}"
                                                 Style="{StaticResource ek_rbStyle}"
                                                 x:Name="rbTechnology">
                                <ek:eliteRadiobutton.Triggers>
                                    <DataTrigger TargetType="ek:eliteRadiobutton" 
                                                 Binding="{Binding Source={x:Reference rbFood}, Path=IsChecked}"
                                                 Value="True">
                                        <Setter Property="IsChecked" 
                                                Value="False"/>
                                    </DataTrigger>
                                </ek:eliteRadiobutton.Triggers>
                            </ek:eliteRadiobutton>

                            <Label Text="Technology"
                                   VerticalOptions="Center"/>

                            <ek:eliteRadiobutton IsChecked="{Binding IsFood}"
                                                 Style="{StaticResource ek_rbStyle}"
                                                 x:Name="rbFood"
                                                 Margin="10,0,0,0">
                                <ek:eliteRadiobutton.Triggers>
                                    <DataTrigger TargetType="ek:eliteRadiobutton" 
                                                 Binding="{Binding Source={x:Reference rbTechnology}, Path=IsChecked}"
                                                 Value="True">
                                        <Setter Property="IsChecked" 
                                                Value="False"/>
                                    </DataTrigger>
                                </ek:eliteRadiobutton.Triggers>
                            </ek:eliteRadiobutton>

                            <Label Text="Food"
                                   VerticalOptions="Center"/>
                        </StackLayout>
                    </StackLayout>

                    <Label Grid.Row="3"
                           Grid.Column="0"
                           VerticalOptions="Center"
                           Text="Discontinued?"/>

                    <ek:eliteCheckbox Grid.Row="3"
                                      Grid.Column="1"
                                      IsChecked="{Binding Discontinued}"
                                      ColorUnchecked="{StaticResource AuxColor}"
                                      ColorChecked="{StaticResource MainColor}"
                                      ColorHighlighted="{StaticResource MainColor}"
                                      ColorIcon="White"
                                      WidthRequest="50"
                                      HeightRequest="50"
                                      VerticalOptions="Center"
                                      HorizontalOptions="Start"
                                      HasShadow="True"/>

                    <StackLayout Grid.Row="4"
                                 Grid.Column="0"
                                 Grid.ColumnSpan="3">
                        <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
                            <ek:eliteButtonOutline ButtonClickCommand="{Binding ValidateCommand}"
                                                   ColorPrimary="{StaticResource MainColor}"
                                                   ColorSecondary="{StaticResource AuxColor}"
                                                   WidthRequest="150"
                                                   HeightRequest="60"
                                                   ColorText="White"
                                                   IsGradient="True"
                                                   HorizontalOptions="Center"
                                                   VerticalOptions="Center"
                                                   ButtonTitle="Validate"/>

                            <ek:eliteButton IsEnabled="{Binding IsValid}"
                                            ButtonClickCommand="{Binding RegisterCommand}"
                                            WidthRequest="150"
                                            HeightRequest="60"
                                            ColorText="White"
                                            IsGradient="True"
                                            HorizontalOptions="Center"
                                            VerticalOptions="Center"
                                            ButtonTitle="Register"
                                            Margin="10,0,0,0">
                                <ek:eliteButton.Triggers>
                                    <DataTrigger TargetType="ek:eliteButton" 
                                                 Binding="{Binding IsValid}" 
                                                 Value="false">
                                        <Setter Property="ColorPrimary" 
                                                Value="{StaticResource DeActivatedMainColor}"/>
                                        <Setter Property="ColorSecondary" 
                                                Value="{StaticResource DeActivatedAuxColor}"/>
                                    </DataTrigger>
                                    <DataTrigger TargetType="ek:eliteButton" 
                                                 Binding="{Binding IsValid}" 
                                                 Value="true">
                                        <Setter Property="ColorPrimary" 
                                                Value="{StaticResource MainColor}"/>
                                        <Setter Property="ColorSecondary" 
                                                Value="{StaticResource AuxColor}"/>
                                    </DataTrigger>
                                </ek:eliteButton.Triggers>
                            </ek:eliteButton>
                        </StackLayout>
                    </StackLayout>

                    <ek:eliteProgressBar Grid.Row="5"
                                         Grid.Column="0"
                                         Grid.ColumnSpan="3"
                                         ColorPrimary="{StaticResource MainColor}"
                                         ColorSecondary="{StaticResource AuxColor}"
                                         ColorBackground="LightGray"
                                         IsGradient="True"
                                         CurrentValue="{Binding SaveProgress}">
                        <ek:eliteProgressBar.Triggers>
                            <DataTrigger TargetType="ek:eliteProgressBar"
                                         Binding="{Binding SaveProgress}"
                                         Value="0">
                                <Setter Property="IsVisible"
                                        Value="False"/>
                            </DataTrigger>
                        </ek:eliteProgressBar.Triggers>
                    </ek:eliteProgressBar>

                    <Label Grid.Row="5"
                           Grid.Column="0"
                           Grid.ColumnSpan="3"
                           Text="{Binding SaveProgress, StringFormat='Saving... {0}%'}"
                           TextColor="DarkGreen"
                           FontAttributes="Bold"
                           FontSize="Large"
                           HorizontalOptions="Center"
                           VerticalOptions="Center">
                        <Label.Triggers>
                            <DataTrigger TargetType="Label"
                                         Binding="{Binding SaveProgress}"
                                         Value="0">
                                <Setter Property="IsVisible"
                                        Value="False"/>
                            </DataTrigger>
                        </Label.Triggers>
                    </Label>
                </Grid>
            </ScrollView>

            <ek:eliteFooter ColorPrimary="{StaticResource MainColor}" 
                            ColorSecondary="{StaticResource AuxColor}"
                            VerticalOptions="EndAndExpand"
                            HeightRequest="75">
                <ek:eliteFooter.FooterView>
                    <Image Source="{Binding FooterImage}" 
                           WidthRequest="75" 
                           HeightRequest="75"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"/>
                </ek:eliteFooter.FooterView>
            </ek:eliteFooter>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>