none
Como personalizar un ListView en mi App para Windows 8 Metro-Style??? RRS feed

  • Pregunta

  • Hola,

    Estoy intentando personalizar un ListView en mi App Windows 8, pero estoy teniendo diversos problemas para poder darla el aspecto que yo quiero. Esta es la imagen de mi ListView:

    (Perdón, no puedo insertar imágenes hasta que mi cuenta sea revisada ....)

    Si se fijan existe espacio entre el ítem-fila seleccionado y el borde del mismo, como eliminar este espacio??

    Al mismo tiempo, la ultima columna (Title Col 4), el borde derecho no me aparece, porque???

    Parece que los ítems-filas de mi ListView tienen espacio entre ellos, también me gustaría que desapareciese dicho espacio.

    Les dejo el código XAML:

    <Page
        x:Class="CustomListView.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:CustomListView"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Page.Resources>
            <ResourceDictionary>
                <Style x:Key="ItemTitleStyle" TargetType="TextBlock">
                    <Setter Property="FontFamily" Value="Segoe UI Light"/>
                    <Setter Property="FontSize" Value="20"/>
                    <Setter Property="VerticalAlignment" Value="Center"/>
                    <Setter Property="Padding" Value="10,10,0,0"/>
                    <Setter Property="Height" Value="40"/>
                    <Setter Property="HorizontalAlignment" Value="Center"/>
                </Style>
            </ResourceDictionary>
        </Page.Resources>
    
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Border BorderThickness="1" BorderBrush="Black" Margin="30,30,30,187">
                <Grid x:Name="myGrid">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid x:Name="ListViewHeaders">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition  />
                            <ColumnDefinition  />
                            <ColumnDefinition  />
                            <ColumnDefinition  />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" Style="{StaticResource ItemTitleStyle}" Text="Title Col 1" />
                        <TextBlock Grid.Column="1" Style="{StaticResource ItemTitleStyle}" Text="Title Col 2" />
                        <TextBlock Grid.Column="2" Style="{StaticResource ItemTitleStyle}" Text="Title Col 3" />
                        <TextBlock Grid.Column="3" Style="{StaticResource ItemTitleStyle}" Text="Title Col 4" />
                    </Grid>
                    <ListView x:Name="myTable" Grid.Row="1" SelectionMode="None" IsSwipeEnabled="false" Loaded="myTable_Loaded">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <Grid Width="{Binding ElementName=myTable, Path=ActualWidth}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition  />
                                        <ColumnDefinition  />
                                        <ColumnDefinition  />
                                        <ColumnDefinition  />
                                    </Grid.ColumnDefinitions>
                                    <Border Grid.Column="0" Height="40" BorderThickness="1" BorderBrush="LightGray">
                                        <TextBlock Text="{Binding Edad}" />
                                    </Border>
                                    <Border Grid.Column="1" Height="40" BorderThickness="1" BorderBrush="LightGray">
                                        <TextBlock Text="{Binding Nombre}" />
                                    </Border>
                                    <Border Grid.Column="2" Height="40" BorderThickness="1" BorderBrush="LightGray">
                                        <TextBlock Text="{Binding Check}" />
                                    </Border>
                                    <Border Grid.Column="3" Height="40" BorderThickness="1" BorderBrush="LightGray">
                                        <TextBlock Text="{Binding Fecha}" />
                                    </Border>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </Border>
        </Grid>
    </Page>
    

    Y el código C#:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    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 http://go.microsoft.com/fwlink/?LinkId=234238
    
    namespace CustomListView
    {
        /// <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
        {
            List<Object> m_ListaPersonas;
    
            public MainPage()
            {
                this.InitializeComponent();
            }
    
            /// <summary>
            /// Se invoca cuando esta página se va a mostrar en un objeto Frame.
            /// </summary>
            /// <param name="e">Datos de evento que describen cómo se llegó a esta página. La propiedad Parameter
            /// se usa normalmente para configurar la página.</param>
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                
            }
    
            private void RellenaLista()
            {
                m_ListaPersonas = new List<Object> { 
                    new Persona("Jesus Sanchez", 40, true, DateTime.Parse("20/05/2012")), 
                    new Persona("Carola Perez", 29, false, DateTime.Parse("12/11/2009")),
                    new Persona("Andres Ferandez", 35, false, DateTime.Parse("12/11/2009")),
                    new Persona("Carola Sanchez", 30, false, DateTime.Parse("12/11/2009")),
                    new Persona("Myriam Aceituno", 35, true, DateTime.Now),
                    new Persona("Jose Perez", 35, false, DateTime.Parse("12/11/2009"))};
    
                myTable.ItemsSource = m_ListaPersonas;
            }
    
            private void myTable_Loaded(object sender, RoutedEventArgs e)
            {
                RellenaLista();
            }
        }
    }
    

    Gracias .... 
    jueves, 15 de agosto de 2013 16:53