locked
gridview column width not adjusting RRS feed

  • Question

  • My app has a window with a frame. The frame contains a page with a listview/gridview and buttons for adding a new row or editing an existing row. If the user selects the add button, the current page is pushed on a stack, and a details page is loaded in the frame. The details page receives the listview's itemscollection as an input arg. The user fills out some fields and clicks ok. A new item is added to the itemscollection. The first page is popped from the stack and loaded in the frame. The listview displays the new item. But the listview will not adjust its column widths if the new element has wider fields. How can I make the listview adjust its layout to accommodate the new item? I have tried myListView.InvalidateMeasure(), but it doesn't work.

    Bill


    Bill Swartz

    Wednesday, June 26, 2013 6:32 PM

Answers

  • Thanks for the reply. I went back to not saving the first page on the stack. Instead of reloading the saved page, I load a newly created instance of the page. The newly created instance lays itself out correctly. WPF layout voodoo works great, except when it doesn't.

    Bill Swartz

    • Proposed as answer by Dummy yoyo Thursday, July 4, 2013 10:17 AM
    • Marked as answer by Bill Swartz Thursday, July 4, 2013 9:58 PM
    Thursday, June 27, 2013 2:24 PM

All replies

  • Hi Bill,

    Welcome.

    Have you tried to set the Width of GridVeiwColumn to "auto"?  

    If it does not work, we can use ValueConverter to set the column's width.

    Please have a look at the following code:

    <Window x:Class="ListViewColumnWidthProject.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:ListViewColumnWidthProject"
            Title="MainWindow" Height="350" Width="525">
        <Window.Resources>
            <local:StarWidthConverter x:Key="starWidthConverter"></local:StarWidthConverter>
        </Window.Resources>
        <ListView   Width="400" Background="Beige"  >
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Title" DisplayMemberBinding="{Binding}" Width="100"/>
                    <GridViewColumn Header="Title" DisplayMemberBinding="{Binding}" Width="50"/>
                    <GridViewColumn Header="Title" DisplayMemberBinding="{Binding}" Width="50"/>
                    <GridViewColumn Header="Title" DisplayMemberBinding="{Binding}" 
                            Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListView}, Converter={StaticResource starWidthConverter}}"/>
                </GridView>
            </ListView.View>
            <ListViewItem>item1</ListViewItem>
            <ListViewItem>item2</ListViewItem>
            <ListViewItem>item3</ListViewItem>
            <ListViewItem>item4</ListViewItem>
        </ListView>
    </Window>


        public class StarWidthConverter : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            {
                ListView listview = value as ListView;
                double width = listview.Width;
                GridView gv = listview.View as GridView;
                for (int i = 0; i < gv.Columns.Count; i++)
                {
                    if (!Double.IsNaN(gv.Columns[i].Width))
                        width -= gv.Columns[i].Width;
                }
                return width - 5;// this is to take care of margin/padding
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            {
                return null;
            }
        }

    Or you may try to use the ListViewLayout Manager in this article to control the width of the columns. 

    ListView Layout Manager

    http://www.codeproject.com/Articles/25058/ListView-Layout-Manager

    Refer to:

    "Star" size of a ListView column

    http://social.msdn.microsoft.com/Forums/vstudio/en-US/83bd7ab9-3407-461f-a0bc-69e04870075c/star-size-of-a-listview-column

    Good day.


    Yoyo Jiang[MSFT]
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, June 27, 2013 8:04 AM
  • Thanks for the reply. I went back to not saving the first page on the stack. Instead of reloading the saved page, I load a newly created instance of the page. The newly created instance lays itself out correctly. WPF layout voodoo works great, except when it doesn't.

    Bill Swartz

    • Proposed as answer by Dummy yoyo Thursday, July 4, 2013 10:17 AM
    • Marked as answer by Bill Swartz Thursday, July 4, 2013 9:58 PM
    Thursday, June 27, 2013 2:24 PM
  • Hi Bill, 

    So you have solved the problem, haven't you?

    Good day.


    Yoyo Jiang[MSFT]
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, July 4, 2013 10:17 AM