Alinear a la Derecha Columna DataGrid Silverlight

Saludos amig@s en esta ocación haremos un ejemplo práctico que les puede ayudar cuando esten utilizando el DataGrid de Silverlight esque por ahy algún Usuario que valida el Sistema les dice "Esos son Datos son Numericos y deben estar alineados a la Derecha!!" pucha, entonces rapidamente, podriamos implementar lo siguiente:

Primero veamos como se ve nuestra Grilla el codigo XAML antes de Aplicarle el Estilo, debemos tomar en cuenta que el Atributo del DataGrid "AutoGenerateColumns" en este caso debe estar establecido con False, ya que mas abajo estamos creando cada una de las Columnas.


sdk:DataGrid AutoGenerateColumns="False" Height="142" Width="500" Name="dgProductos"  VerticalAlignment="Top" Loaded="dgProductos_Loaded" >
            <sdk:DataGrid.Columns>
               
<sdk:DataGridTextColumn Header="Producto" Binding="{Binding Producto}" />
<sdk:DataGridTextColumn Header="Precio Producto"  Binding="{Binding Precio}" />

            </sdk:DataGrid.Columns>
</sdk:DataGrid>


Vemos las 2 Columnas Producto y Precio, que solo tienen un Binding, pero aqui falta la Clase que Llenará los con datos esta Grilla.

using System;

namespace Ejm01
{
    public class clsProducto
    {
        public String Producto { get; set; }
        public Decimal Precio{ get; set; }       
    }
}


Listo Luego en el Evento Loaded del Data, lo cargamos de Datos:

private void dgProductos_Loaded(object sender, RoutedEventArgs e)
{
List<clsProducto> listProductos = new List<clsProducto>();
listProductos.Add(new clsProducto() { Producto = "Zapatos", Precio =  5425.12M });
listProductos.Add(new clsProducto() { Producto = "Mochila", Precio = 25435.12M });
listProductos.Add(new clsProducto() { Producto = "Camisa", Precio = 12320.12M});
listProductos.Add(new clsProducto() { Producto = "Reloj", Precio = 8128.12M});
listProductos.Add(new clsProducto() { Producto = "Medias", Precio = 1212.15M });
listProductos.Add(new clsProducto() { Producto = "Corbatas", Precio = 1445.10M });
  dgProductos.ItemsSource = listProductos;
}


Ejecutamos la aplicacion y Veremos queLa Columna de Precio está alineado a la Izquierda y esto no es muy agradable para los Usuarios ya que por lo General los Montos van Alineados a la Derecha.


Ahora cambiemo el codigo XAML, como sigue para que la Columna Precio este alineado a la Derecha.
<sdk:DataGrid AutoGenerateColumns="False" Height="142" Width="500" Margin="12,86,12,0" Name="dgProductos"  VerticalAlignment="Top" Loaded="dgProductos_Loaded">
<sdk:DataGrid.Columns>
               
 <sdk:DataGridTextColumn Header="Producto" Binding="{Binding Producto}" />
               
  <sdk:DataGridTextColumn Header="Precio  Producto"  Binding="{Binding Precio}" >
       <sdk:DataGridTextColumn.CellStyle >
           <Style TargetType="sdk:DataGridCell">
                <Setter Property="HorizontalAlignment" Value="Right" />
           </Style>
       </sdk:DataGridTextColumn.CellStyle>
 </sdk:DataGridTextColumn>

</sdk:DataGrid.Columns>
</sdk:DataGrid>


La Seccion Amarilla representa solo a la Columna Precio, si tuvieramos mas Columnas para Alinear a la Derecha, hariamos lo mismo para las demas. Bueno solo nos queda ejecutar la aplicación.



Gracias y espero les sirva en sus Aplicaciones Silverlight, hasta pronto!!

Comments

Post a Comment

Popular posts from this blog

Error al Iniciar Oracle SQL Developer 11g - Unable to find Java Virtual Machine

Image
Saludos amig@s , hoy quiero compartir con ustedes una experiencia que aveces suele pasarnos al momento de instalar algun SW, y se presentar errores que muchas veces investigamos y llegamos a resolverlos,entonces porque no compartirlo. En esta ocaciones despues de todo el Proceso de Instalacion del ORACLE SQL DEVELOPER 11g. tocaba iniciarlo y mando un error como este. Este error no permite iniciar nuestro ORACLE SQL DEVELOPER 11g, no se asusten, no le falta instalar nada, solo es un pequeño error de configuracion que debemos ajustarlo y nada mas, para ello vamos a la carpeta siguiente: c:\app\administrador\product\11.2.0\dbhome_1\sqldeveloper\sqldeveloper\bin OJO.: Esta ruta puede variar pero confio en su instinto para encontrarla, empiecen encontrando la carpeta "app". y abrimos el archivos SQLDEVELOPER.CONF.  Ahy dentro ubiquense en la linea donde dice SetJavaHome, y seguramente tendran la ruta que apunta a la carpeta de instalacion del JRE de Java. c:\ Pro
Read more

Como Mantener el Scroll despues de un PostBack ASP.net ( As Maintain Scroll after a PostBack ASP.net )

Saludos amig@s, Cuando trabajamos con ASP.net nos hemos dado cuenta que si tenemos una pagina muy extensa Horizontalmente y damos click en un boton que esta muy abajo de la página esto generará un PostBack, en termino simples "Refrescará la pagina" y nos llevará al Inicio de la Pagina, lo cual es incomodo porque nuevamente tendrémos que deslizar el Scroll de la pagina hacia abajo. OPCION 1: Agreguen la linea de codigo que se encuentra resaltada, indicandole que mantenga la posicion del Scroll en el PostBack <% @ Page Language ="C#" AutoEventWireup ="true" MaintainScrollPositionOnPostback ="true"     CodeFile ="Default.aspx.cs" Inherits ="_Default" %> <! DOCTYPE html > < html xmlns ="http://www.w3.org/1999/xhtml"> < head runat ="server"> < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8"/>
Read more

How to run ng serve in a different port
Como ejecutar ng serve en un puerto diferente

Image
Hello Everyone, In his post I'm going to explain How we can use a different port that ng use for default(4200). Maybe if we have an Angular 2 Project running, and then we also need another project running, and when we try to execute the ng serve command, CLI give us a message like this. Port 4200 is already in use. Use '-port' to specify a different port port 4200 is busy So we should execute a new command like this, it has to fix the problem. Altough you might use a different port 4202,4203 etc. ng serve --port 4201 ng serve running in a different port I hope this will help all of you in your amazing Angular 2 Project. See you next time.
Read more