El control ScrollViewer permite ver parte de un contenido mayor que no se puede ver en su totalidad (por ejemplo una imagen de gran tamaño)
Mediante unas barras de desplazamiento vertical y/o horizontal podemos movernos a otras áreas del elemento contenido en el ScrollViewer. En caso que se trata de un dispositivo táctil podemos desplazarnos utilizando los dedos.
Problema
Mostrar un mapa de gran tamaño por partes en la pantalla y permitir desplazarnos mediante barras de scroll.
Como primer paso creamos un nuevo proyecto llamado "Proyecto15" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto.
Procedemos a insertar un archivo del mapa a la carpeta Assets de nuestro proyecto (podemos arrastrarlo al archivo si lo tenemos en otra carpeta de nuestro equipo):
El código del archivo XAML para mostrar la imagen es:
<Page
x:Class="Proyecto15.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Proyecto15"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Image Source="Assets/mapaargentina.jpg" />
</ScrollViewer>
</Page>
El resultado de ejecutar este programa en un dispositivo de pequeñas dimensiones es:
En la etiqueta ScrollViewer cargamos el las propiedades HorizontalScrollBarVisibility y VerticalScrollBarVisibility el valor "Auto" para que las barras de scroll (desplazamiento) aparezcan solo si son necesarias.
Por otro lado insertamos un control de tipo Image dentro del ScrollViewer que tendrá por objetivo mostrar un archivo de imagen. En la propiedad Source indicamos la carpeta donde se encuentra la imagen y el nombre de archivo propiamente dicho:
<Image Source="Assets/mapaargentina.jpg" />
Este proyecto lo puede descargar en un zip desde este enlace :Proyecto15.zip
Hay que tener en cuenta que dentro de ScrollViewer podemos disponer solo un objeto que dependa directamente del mismo (por ejemplo no podemos disponer dos Image)
Para resolver el problema enunciando anteriormente lo que se hace es disponer dentro del ScrollViewer un StackPanel y luego dentro de este todos los controles visuales que necesitemos.
Problema
Confeccionar una interfaz de aplicación que permita tomar un examen de opciones múltiples. Tener en cuenta que en una pantalla de pequeñas dimensiones no se podrán ver todas las preguntas.
Como primer paso creamos un nuevo proyecto llamado "Proyecto16" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto.
El código del archivo XAML para mostrar el examen es:
<Page
x:Class="Proyecto16.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Proyecto16"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Margin="10,10,10,10">
<TextBlock x:Name="textBlock1" Text="Examen de Geografía" FontSize="30" />
<TextBlock x:Name="pregunta1" Text="¿Cuántos habitantes tiene Argentina?" FontSize="20" Margin="0,20,0,0" />
<RadioButton x:Name="respuesta1pregunta1" Content="30000000" GroupName="preg1" />
<RadioButton x:Name="respuesta2pregunta1" Content="40000000" GroupName="preg1" />
<RadioButton x:Name="respuesta3pregunta1" Content="50000000" GroupName="preg1" />
<RadioButton x:Name="respuesta4pregunta1" Content="60000000" GroupName="preg1" />
<TextBlock x:Name="pregunta2" Text="¿Cuántos habitantes tiene Chile?" FontSize="20" Margin="0,20,0,0"/>
<RadioButton x:Name="respuesta1pregunta2" Content="30000000" GroupName="preg2" />
<RadioButton x:Name="respuesta2pregunta2" Content="17000000" GroupName="preg2" />
<RadioButton x:Name="respuesta3pregunta2" Content="20000000" GroupName="preg2" />
<RadioButton x:Name="respuesta4pregunta2" Content="10000000" GroupName="preg2" />
<TextBlock x:Name="pregunta3" Text="¿Cuántos habitantes tiene Paraguay?" FontSize="20" Margin="0,20,0,0"/>
<RadioButton x:Name="respuesta1pregunta3" Content="3000000" GroupName="preg3" />
<RadioButton x:Name="respuesta2pregunta3" Content="7000000" GroupName="preg3" />
<RadioButton x:Name="respuesta3pregunta3" Content="8000000" GroupName="preg3" />
<RadioButton x:Name="respuesta4pregunta3" Content="1000000" GroupName="preg3" />
<TextBlock x:Name="pregunta4" Text="¿Cuántos habitantes tiene Bolivia?" FontSize="20" Margin="0,20,0,0"/>
<RadioButton x:Name="respuesta1pregunta4" Content="10000000" GroupName="preg4" />
<RadioButton x:Name="respuesta2pregunta4" Content="17000000" GroupName="preg4" />
<RadioButton x:Name="respuesta3pregunta4" Content="18000000" GroupName="preg4" />
<RadioButton x:Name="respuesta4pregunta4" Content="13000000" GroupName="preg4" />
<TextBlock x:Name="pregunta5" Text="¿Cuántos habitantes tiene Perú?" FontSize="20" Margin="0,20,0,0"/>
<RadioButton x:Name="respuesta1pregunta5" Content="20000000" GroupName="preg5" />
<RadioButton x:Name="respuesta2pregunta5" Content="30000000" GroupName="preg5" />
<RadioButton x:Name="respuesta3pregunta5" Content="18000000" GroupName="preg5" />
<RadioButton x:Name="respuesta4pregunta5" Content="17000000" GroupName="preg5" />
<TextBlock x:Name="pregunta6" Text="¿Cuántos habitantes tiene Uruguay?" FontSize="20" Margin="0,20,0,0"/>
<RadioButton x:Name="respuesta1pregunta6" Content="4000000" GroupName="preg6" />
<RadioButton x:Name="respuesta2pregunta6" Content="3000000" GroupName="preg6" />
<RadioButton x:Name="respuesta3pregunta6" Content="1800000" GroupName="preg6" />
<RadioButton x:Name="respuesta4pregunta6" Content="1700000" GroupName="preg6" />
<StackPanel Orientation="Horizontal">
<Button x:Name="boton1" Content="Verificar" Margin="10,10,10,10" />
<TextBlock x:Name="resultado" Text="Resultado" Margin="10,10,10,10"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</Page>
Disponemos dentro del ScrollViewer un objeto de tipo StackPanel y dentro de este último los controles visuales del examen:
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Margin="10,10,10,10">
......
</StackPanel>
</ScrollViewer>
En pantalla tenemos como resultado (podemos desplazar todo el contenido del ScrollViewer, es decir todo el contenido del StackPanel):
Ahora implementemos la funcionalidad de nuestro programa, agregamos la propiedad Click para nuestro Button (presionamos la tecla Enter cuando aparece el mensaje de "Nuevo controlador de eventos"):
Ahora vamos al archivo MainPage.xaml.cs y codificamos el método:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// La plantilla de elemento Página en blanco está documentada en https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0xc0a
namespace Proyecto16
{
/// <summary>
/// Página vacía que se puede usar de forma independiente o a la que se puede navegar dentro de un objeto Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void Boton1_Click(object sender, RoutedEventArgs e)
{
int correctas = 0;
if (respuesta2pregunta1.IsChecked == true)
correctas++;
if (respuesta2pregunta2.IsChecked == true)
correctas++;
if (respuesta2pregunta3.IsChecked == true)
correctas++;
if (respuesta1pregunta4.IsChecked == true)
correctas++;
if (respuesta2pregunta5.IsChecked == true)
correctas++;
if (respuesta2pregunta6.IsChecked == true)
correctas++;
resultado.Text = "Cantidad de correctas:" + correctas;
}
}
}
Si ejecutamos el programa podemos ver la cantidad de opciones correctas seleccionadas:
Este proyecto lo puede descargar en un zip desde este enlace :Proyecto16.zip