Equal Sized Columns in ListView in Windows Store app

Question

I want to make all the columns in a listview of equal width in the sense, all the columns under username header should be equal width. Currently it is looking like the attached Following is my code,

         <ListView HorizontalAlignment="Left" Width="1000" x:Name="MainLIst">
        <ListView.Resources>
            <DataTemplate x:Key="DataTemplate1">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Border Background="SaddleBrown" MaxWidth="213">
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding FirstName}" VerticalAlignment="Top" Margin="0,0,30,0"/>
                    </Border>
                    <Border Background="Maroon" Grid.Column="1" MaxWidth="200">
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding LastName}" VerticalAlignment="Top"  Margin="0,0,30,0"/>
                    </Border>
                    <Border Background="Brown" Grid.Column="2" >
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Username}" VerticalAlignment="Top" Margin="0,0,30,0"/>
                    </Border>
                    <Border Background="RosyBrown" Grid.Column="3" >
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Passwrd}" VerticalAlignment="Top" Grid.Column="3" Margin="0,0,30,0"/>
                    </Border>
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="HeaderTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Border Background="SaddleBrown" MaxWidth="213">
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="First Name" VerticalAlignment="Top" Margin="0,0,30,0"/>
                    </Border>
                    <Border Background="Maroon" Grid.Column="1" MaxWidth="200">
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Last Name" VerticalAlignment="Top"  Margin="0,0,30,0"/>
                    </Border>
                    <Border Background="Brown" Grid.Column="2" >
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="User Name" VerticalAlignment="Top" Margin="0,0,30,0"/>
                    </Border>
                    <Border Background="RosyBrown" Grid.Column="3" >
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Password" VerticalAlignment="Top" Grid.Column="3" Margin="0,0,30,0"/>
                    </Border>
                </Grid>
            </DataTemplate>
        </ListView.Resources>
        <ListView.HeaderTemplate>
            <StaticResource ResourceKey="HeaderTemplate"/>
        </ListView.HeaderTemplate>
        <ListView.ItemTemplate>
            <StaticResource ResourceKey="DataTemplate1"/>
        </ListView.ItemTemplate>
    </ListView>

and Code behind,

 public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        ObservableCollection<ClassItem> classItemObj = new ObservableCollection<ClassItem>();
        classItemObj.Add(new ClassItem() { FirstName = "1234567890", LastName = "1234567890", Passwrd = "sdf", Username = "123445567788894564512345678906" });
        classItemObj.Add(new ClassItem() { FirstName = "12345678901234567890", LastName = "1234567890", Passwrd = "sdf", Username = "12344556778889456456" });
        classItemObj.Add(new ClassItem() { FirstName = "1234567890", LastName = "123456789012345678901234567890", Passwrd = "sdf", Username = "123445567788894564561234567890" });
        classItemObj.Add(new ClassItem() { FirstName = "1234567890", LastName = "12345678901234567890", Passwrd = "sdf", Username = "1234455677888945645612345678901234567890" });
        classItemObj.Add(new ClassItem() { FirstName = "1234567890123456789012345678901234567890", LastName = "1234567890", Passwrd = "sdf", Username = "12344556778889456456" });
        MainLIst.ItemsSource = classItemObj;
    }
}

public class ClassItem
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Username { get; set; }
    public string Passwrd { get; set; }
}

}

score 0 · Answer 1 · answered May 14 '14 at 16:20

0

You currently set the column Widths to Auto. If you specify pixel values - they should be the same.

answered May 14 '14 at 16:20

Filip Skakun

31,624
6
74
100

My text content size will vary. I am not supposed to wrap the text or add ellipses. Is there any way that the all the column width be of that of the widest textblock? – Ramya May 14 '14 at 17:13
Yes, but you'll need to update them manually every time your `TextBlock` sizes change. You'd need to handle the `SizeChanged` event on each `TextBlock` and determine the max size of these. You could then use something like my `DoubleViewModel` I described in the answer to [this question](http://stackoverflow.com/questions/23144519/gridview-with-2-columns-fill-width) to bind your `Border.Width` properties to that view model. – Filip Skakun May 14 '14 at 18:01

Equal Sized Columns in ListView in Windows Store app

1 Answers1