UNIVERSIDAD CESMAG

FACULTAD DE INGENIERÍA
INGENIERÍA DE SISTEMAS
PROGRAMACIÓN DISPOSITIVOS MÓVILES [XAMARIN]

EJERCICIO Nro. 1 (Segundo Corte)

Arquitectura gráfica de una Aplicación en [Link]

Competencia a evidenciar: Genero la arquitectura gráfica de una interfaz (Page) en

[Link] a partir del análisis del Mockup o Wireframe.

En frente de cada Mockup, realiza la arquitectura gráfica respectiva teniendo en cuenta la estructura
gráfica de XAML. Considera el ejemplo presentado en el Mockup Nro. 1.

Ten en cuenta que, debes verificar el nombre del componente a usar. Además, Para la realización
de este ejercicio, debes aplicar los conocimientos trabajados en clase, pero también puedes agregar
elementos y/o componentes que aún no hemos visto, si así lo exige el diseño.

N. Mockup/wireframe Código Xaml

 <StackLayout Orientation=”Vertical”>
o <Label Text=”First number” />
o <Entry x:Name=”n1” />
o <Label Text=”Second number” />
o <Entry x:Name=”n2” />
o <Button Text=”Add” />
o <Label Text=”?” x:Name=”ans” />
 </StackLayout>

1
N. Mockup/wireframe Código Xaml

<StackLayout>
<Frame BackgroundColor="Orange"
Margin="20" Padding="24" CornerRadius="0">
<Label Text="myCalc v1.1"
TextColor="White" FontSize="36" />
</Frame>

<StackLayout Orientation="Horizontal">
<Label Text="First number:"
FontSize="30" />
<Entry
2 HorizontalOptions="FillAndExpand"/>
</StackLayout>

<Label Text=" "/>

<StackLayout Orientation="Horizontal">
<Label Text="Second number:"
FontSize="30" />
<Entry
HorizontalOptions="FillAndExpand"/>
</StackLayout>

<Label Text=" "/>

<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<Button Text="Add"
BackgroundColor="Green" TextColor="White" />
<Button Text="Clear"
BackgroundColor="Red" TextColor="White" />
</StackLayout>

<Label Text="?" x:Name="ans"

FontSize="100" TextColor="Black"
HorizontalOptions="Center"/>

</StackLayout>

<StackLayout>
<Frame BackgroundColor="Green"
Margin="20" Padding="24" CornerRadius="0">
<Label Text="Shopping cart"
TextColor="White" FontSize="36" />
</Frame>

<StackLayout Orientation="Horizontal">
<Label Text="Product name:"
FontSize="30" />
<Entry
HorizontalOptions="FillAndExpand"/>
3 </StackLayout>
 <Label Text=" "/>

<StackLayout Orientation="Horizontal">
<Label Text="Quantity:"
FontSize="30" />
<Entry
HorizontalOptions="FillAndExpand"
Keyboard="Numeric"/>
</StackLayout>

<Label Text=" "/>

<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<Button Text="Add to cart"
BackgroundColor="Red" TextColor="White" />
</StackLayout>

<Label Text=" "/>

<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<Label Text="Product 1:"
FontSize="25" />
<Button ImageSource="[Link]"/>
<Button
ImageSource="[Link]"/>
<Button
ImageSource="[Link]"/>
</StackLayout>
<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<Label Text="Product 2:"
FontSize="25" />
<Button ImageSource="[Link]"/>
<Button
ImageSource="[Link]"/>
<Button
ImageSource="[Link]"/>
</StackLayout>
<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<Label Text="Product 3:"
FontSize="25" />
<Button ImageSource="[Link]"/>
<Button
ImageSource="[Link]"/>
<Button
ImageSource="[Link]"/>
</StackLayout>

<Label Text=" "/>

<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<Button Text="Buy"
BackgroundColor="Green" TextColor="White" />
<Button Text="Cancel"
BackgroundColor="Red" TextColor="White" />
</StackLayout>
 </StackLayout>

N. Mockup/wireframe Código Xaml

<StackLayout>
<Frame BackgroundColor="blue"
Margin="20" Padding="24" CornerRadius="0">
<Label Text="My images app"
TextColor="White" FontSize="36" />
</Frame>

<Image Source="" />

<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<ImageButton />
4 <StackLayout>
<Label Text="Name:"
FontSize="25" />
<Label Text="Descripcion:"
FontSize="25" />
</StackLayout>
<StackLayout>
<Button ImageSource="[Link]"/>
<Button
ImageSource="[Link]"/>
</StackLayout>
</StackLayout>

<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<ImageButton />
<StackLayout>
<Label Text="Name:"
FontSize="25" />
<Label Text="Descripcion:"
FontSize="25" />
</StackLayout>
<StackLayout>
<Button ImageSource="[Link]"/>
<Button
ImageSource="[Link]"/>
</StackLayout>
</StackLayout>

<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<ImageButton />
<StackLayout>
<Label Text="Name:"
FontSize="25" />
<Label Text="Descripcion:"
FontSize="25" />
</StackLayout>
<StackLayout>
<Button ImageSource="[Link]"/>
<Button
ImageSource="[Link]"/>
</StackLayout>
 </StackLayout>

<Label Text=" "/>

<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<ImageButton Source="[Link]"
BackgroundColor="Black" />
<ImageButton Source="[Link]"
BackgroundColor="White" />
<ImageButton Source="[Link]"
BackgroundColor="Black" />
</StackLayout>

</StackLayout>
<StackLayout>
<Grid Padding="5,0" RowSpacing="5"
ColumnSpacing="5" >
<[Link]>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</[Link]>

<[Link]>
5 <ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</[Link]>

<Label x:Name="resultText" Text="0"

TextColor="White"
HorizontalTextAlignment="End"
VerticalTextAlignment="Center"
LineBreakMode="NoWrap"
[Link]="4" />

<Button Text="AC" [Link]="1"

[Link]="0" Clicked="OnClear" />
<Button Text="√" [Link]="1"
[Link]="1" Clicked="OnSquareRoot"/>
<Button BorderRadius="30" Text="%"
[Link]="1" [Link]="2"
Clicked="OnPercentage"/>

<Button Text="7" [Link]="2"

[Link]="0" Clicked="OnSelectNumber"/>
<Button Text="8" [Link]="2"
[Link]="1" Clicked="OnSelectNumber" />
<Button Text="9" [Link]="2"
[Link]="2" Clicked="OnSelectNumber" />

<Button Text="4" [Link]="3"

[Link]="0" Clicked="OnSelectNumber"/>

<Button Text="5" [Link]="3"

[Link]="1" Clicked="OnSelectNumber" />
<Button Text="6" [Link]="3"
[Link]="2" Clicked="OnSelectNumber" />

<Button Text="1" [Link]="4"

[Link]="0" Clicked="OnSelectNumber"/>
<Button Text="2" [Link]="4"
[Link]="1" Clicked="OnSelectNumber" />
<Button Text="3" [Link]="4"
[Link]="2" Clicked="OnSelectNumber" />
<Button Text="0" [Link]="5"
[Link]="0" [Link]="2"
Clicked="OnSelectNumber" />

<Button Text="." [Link]="5"

[Link]="2" Clicked="squareclicked" />

<Button Text="=" [Link]="5"

[Link]="3" Clicked="OnCalculate" />

<Button Text="÷" [Link]="1"

[Link]="3" Clicked="OnSelectOperator" />
<Button Text="*" [Link]="2"
[Link]="3" Clicked="OnSelectOperator" />
<Button Text="-" [Link]="3"
[Link]="3" Clicked="OnSelectOperator" />
<Button Text="+" [Link]="4"
[Link]="3" Clicked="OnSelectOperator"/>
</Grid>

</StackLayout>
6
<StackLayout>
<Image Source="Farmer's [Link]" />

<Entry Placeholder="Buscar Productos"

FontSize="20"/>

<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<StackLayout>
<Label Text="Cuarto de cuy"
FontSize="25" />
<Label Text="Con cuy asado,
papa, crispetas y ají:" FontSize="15" />
</StackLayout>
<StackLayout>
<Label Text="$11.200" />
<Button
ImageSource="[Link]"/>
</StackLayout>
</StackLayout>

<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<StackLayout>
<Label Text="Medio cuy"
FontSize="25" />
<Label Text="Con cuy asado,
papa, crispetas y ají" FontSize="15" />
</StackLayout>
<StackLayout>
<Label Text="$21.200" />
<Button
ImageSource="[Link]"/>
</StackLayout>
</StackLayout>

<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<StackLayout>
<Label Text="Cuy Entero"
FontSize="25" />
<Label Text="Con higados de
cuy fritos, papa, crispetas y ají"
FontSize="15" />
</StackLayout>
<StackLayout>
<Label Text="$42.000" />
<Button
ImageSource="[Link]"/>
</StackLayout>
</StackLayout>

<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<StackLayout>
<Label Text="Mixto con 1/4
 Cuy" FontSize="25" />
<Label Text="Con higados de
cuy fritos, papa, crispetas y ají"
FontSize="15" />
</StackLayout>
<StackLayout>
<Label Text="$22.000" />
<Button
ImageSource="[Link]"/>
</StackLayout>
</StackLayout>

<Label Text=" "/>

<StackLayout Orientation="Horizontal"
HorizontalOptions="Center">
<ImageButton
Source="[Link]"
BackgroundColor="Black" />
</StackLayout>

</StackLayout>

Método de entrega: El desarrollo de esta actividad debe ser enviada en formato PDF a través de la
Plataforma TAU en el enlace habilitado para la entrega de este ejercicio.

Nota: Para este ejercicio NO se debe realizar ninguna entrega en Visual Studio, únicamente este
documento.