WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones
-
Upload
danae-aguilar-guzman -
Category
Software
-
view
98 -
download
4
Transcript of WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones
![Page 1: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/1.jpg)
Mejorando la funcionalidad y usabilidad de las aplicaciones D A N A E A G U I L A R G U Z M Á N .
M C T , M C P , M C T S
D A N A E A G U I L A R @ G M A I L . C O M
![Page 2: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/2.jpg)
Contenido del Módulo Lección 1. Integrando controles WinForms y WPF.
Lección 2. Implementando Drag and Drop.
Lección 3. Globalización, localización y accesibilidad.
![Page 3: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/3.jpg)
Lección 1. Integrando controles WinForms y WPF
1. Usando ElementHosts en Windows Forms
2. Usando ControlHosts en WPF
![Page 4: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/4.jpg)
1.Usando ElementHosts en Windows Forms
1. Agregando ElementHost
2. Controles WPF en WinForms: System.Windows.Controls.Expander expander = new System.Windows.Controls.Expander(); expander.Header = "WPF Expander"; expander.Content = "Contenido"; elementHost1.Child = expander;
![Page 5: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/5.jpg)
2. Usando ControlHosts en WPF Agregando controles Winforms en WPF desde C#:
1. Agregar referencia a System.Windows.Forms
2. Declarar e inicializar los controles:
3. Usarlos normalmente:
System.Windows.Forms.OpenFileDialog dialogo =
new System.Windows.Forms.OpenFileDialog();
System.Windows.Forms.DialogResult resultado; resultado = dialogo.ShowDialog(); if (resultado == System.Windows.Forms.DialogResult.OK) { MessageBox.Show(dialogo.FileName); }
![Page 6: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/6.jpg)
2. Usando ControlHosts en WPF Agregando controles Winforms en WPF en XAML:
1. Referenciar System.Windows.Forms.Integration
2. Referenciar el namespace System.Windows.Forms
xmlns:my="clr-
namespace:System.Windows.Forms.Integration;
assembly=WindowsFormsIntegration"
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
![Page 7: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/7.jpg)
2. Usando ControlHosts en WPF
Agregando controles Winforms en WPF en XAML:
3. Agregar WindowsFormsHost y los controles WinForms dentro.
* Los controles WinForms tomarán el tamaño del WindowsFormsHost
<my:WindowsFormsHost Margin="48,106,30,56" Name="winFormsHost1"> <wf:Button Text="Un Botón Windows Forms" /> </my:WindowsFormsHost>
![Page 8: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/8.jpg)
Lección 2. Implementando Drag and Drop
1. Drag and Drop en aplicaciones
2. Drag and Drop entre aplicaciones
![Page 9: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/9.jpg)
1.Drag and Drop en aplicaciones
![Page 10: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/10.jpg)
1.Drag and Drop en aplicaciones
![Page 11: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/11.jpg)
2. Drag and Drop entre aplicaciones
El sistema soporta por defecto Drag & Drop entre aplicaciones .NET
Condiciones:
El control destino debe permitir uno de los drag Effects especificados en la llamada a DoDragDrop
El control destino debe aceptar los datos en el formato especificado en la llamada a DoDragDrop
![Page 12: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/12.jpg)
Lección 3. Globalización, localización y accesibilidad
1. Manejo de recursos locales
2. Usando configuraciones de culturas en validadores y conversores.
3. Usando archivos de recursos para localización.
4. Configuraciones regionales.
5. Implementando características de accesibilidad.
![Page 13: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/13.jpg)
1. Manejo de recursos locales Cultura de la aplicacion:
en indica el idioma inglés
es indica el idioma español
de indica el idioma alemán
Cultura específica: en-CA indica el idioma inglés y la region de Canada
af-ZA indica el idioma africano y la region de Sud Africa
es-ES indica el idioma español y la region de España
![Page 14: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/14.jpg)
1. Manejo de recursos locales • Modificando la cultura de la aplicación en Application.Startup:
(CurrentCulture y CurrentUICulture)
• Especificando la cultura neutra en WPF:
System.Threading.Thread.CurrentThread.CurrentUICulture =
new System.Globalization.CultureInfo("es-ES");
[assembly: NeutralResourcesLanguage("en-US", UltimateResourceFallbackLocation.Satellite)]
![Page 15: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/15.jpg)
1. Manejo de recursos locales Localizando la aplicación:
1. Agregar el atributo UICulture al proyecto Al compilar se generan los subdirectorios para las culturas
2. Marcar las propiedades localizables con el atributo Uid (para cada archivo XAML)
<UICulture>es-ES</UICulture>
<Button x:Uid="Button_1" Name="Button1">Un botón</Button>
![Page 16: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/16.jpg)
1. Manejo de recursos locales 2. Marcar las propiedades localizables con el atributo Uid (para cada archivo XAML)
3. Extraer el contenio localizable
4. Traducir
5. Crear los assemblies Satelite
msbuild /t:updateuid miAplicacion.csproj
locbaml /generate es-ES\miAplicacion.resources.dll
/trans:miAplicacion.resources.FrenchCan.csv /cul:fr-CA /out:fr-CA
![Page 17: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/17.jpg)
3. Usando configuraciones de culturas en validadores y conversores.
1. Agregar un traductor a nuestros conversores: [ValueConversion(typeof(string), typeof(string))] public class LanguageConverter : IValueConverter { Traductor _traductor = new Traductor(); public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { string cadena = (string)value; switch (culture.ToString()) { case "fr-FR": return _traductor.EspaniolAFrances(cadena); case "de-DE": return _traductor.EspaniolAAleman(cadena); default: return cadena; } }
![Page 18: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/18.jpg)
3. Usando configuraciones de culturas en validadores y conversores.
1. Agregar un traductor a nuestros conversores (ConvertBack):
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { string cadena = (string)value; switch (culture.ToString()) { case "fr-FR": return _traductor.FrancesAEspaniol(cadena); case "de-DE": return _traductor.AlemanAEspaniol(cadena); default: return cadena; } }
![Page 19: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/19.jpg)
4. Usando archivos de recursos para localización.
1. Agregar un folder de Recursos
2. Agregar archivos resx (Resource.de-DE.resx, Resource.en-US.resx, Resources.resx)
![Page 20: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/20.jpg)
4. Usando archivos de recursos para localización.
3. Cambiar el modificador de acceso del archivo resx a public
4. Agregar el namespace del recurso en nuestra ventana:
5. Agregar un Binding a la propiedad deseada:
xmlns:resx="clr-namespace:WpfApplication1.Resources"
<TextBlock Text="{x:Static resx:Resource.CadenaSaludo}" />
![Page 21: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/21.jpg)
5. Configuraciones regionales. 1. Se aplican al cambiar la cultura de la aplicación
2. Los datos que sin formato no serán afectados por un cambio de cultura.
3. Aplicar formatos a los datos como fechas, cantidades monetarias
4. Usar IFormatProvider en los metodos Convert
DateTime.Now.ToString(CultureInfo.CurrentCulture);
![Page 22: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/22.jpg)
5. Configuraciones regionales. 5. Validar con CODE_ANALYSIS en VS o con FxCop
6. Para datos que no se muestran al usuario usar InvariantCulture
DateTime.Now.ToString(CultureInfo.InvariantCulture);
![Page 23: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/23.jpg)
6. Implementando características de accesibilidad.
• WPF usa el nuevo API de accesibilidad UIA (UI Automation)
• UIA expone programáticamente información a usuarios de tecnologías asistidas (AT).
![Page 24: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/24.jpg)
6. Implementando características de accesibilidad.
Propiedades requeridas para la accesibilidad:
•Name • Debe ser claro. No usar notación húngara.
•Alt Text • Cuando el texto no es visible o se usan imágenes
•Automation ID • Identifica al elemento UIA como único
<ListBox AutomationProperties.Name = "Estados"/>
![Page 25: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/25.jpg)
6. Implementando características de accesibilidad.
Navegación por teclado:
• Toda la aplicación debe ser navegable usando solo el teclado
•Especificar el orden de tabulación
•Especificar teclas de acceso directo.
![Page 26: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/26.jpg)
6. Implementando características de accesibilidad.
Navegación por teclado:
•Las teclas de navegación deben ser funcionales: • TAB, SHIFT+TAB, CTRL+TAB, CTRL+SHIFT+TAB, UPARROW, DOWNARROW,
LEFTARROW, y RIGHTARROW.
•Se puede cambiar la navegación:
Menu menuNavegable = new Menu(); /*...*/ KeyboardNavigation.SetTabNavigation(menuNavegable, KeyboardNavigationMode.Cycle);
![Page 27: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/27.jpg)
6. Implementando características de accesibilidad.
DPI alto:
• WPF es dpi-aware pero: • Evitar hardcodear layouts, tamaños o fuentes,
• Usar porcentajes donde sea posible.
![Page 28: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/28.jpg)
6. Implementando características de accesibilidad.
Contraste Alto:
•El modo de contraste alto debe: • Remover animaciones flasheantes
• Remover o reducir animaciones de transición
• Omitir imágenes no funcionales, gradientes o patrones detrás del texto.
•No se debe hardcodear colores.
•Se debe tener iconos de color alternativo para alto contraste.
![Page 29: WPF 10. mejorando la funcionalidad y usabilidad de las aplicaciones](https://reader031.fdocumento.com/reader031/viewer/2022021420/58e8baf41a28abc9058b4f8f/html5/thumbnails/29.jpg)
6. Implementando características de accesibilidad.
Validar la accesibilidad de nuestra aplicación:
• UI Accessibility Checker: • http://acccheck.codeplex.com/