How can I autosize GridViewColumn's header?

Question

Hi,

I'm new to WPF. When I use winform in the past, the DataGridivew column's AutoSizeMode have the option of "AllCells" (this including header), but in WPF's GridView (within a ListView.View), I find that the autosize function only work to cells except header, this makes some of my GridViewColumn headers only show part of its content.

Am I missing something? Are there any easy way to solve this?

 

cheers,

Tony

---

Tony Zeng [e-mail]

Answer 1

Hi Tony,

I'm a little bit confused about your issue and I think there is something else going on that is causing your issue.

The gridview (no styles etc) automatically expands to display all the text in the header. So I think that you have a width somewhere restricting how wide your gridview can be.

Is it possible to paste some xaml etc.

This might resolve your issue. you could create a style for the gridviewcolumnheader that sets your column width to auto like this -

 <Style TargetType="{x:Type GridViewColumnHeader}">
            <Setter Property="Width" Value="Auto" />
        </Style>

hopefully this will work but honestly I am not that hopeful.

 

Answer 2

Thank you Pritesh3.

To make things simple, I paste part of my GridView XAML here, remove all columes but one. Could you help me to check it and see if there are anything wrong?

<GroupBox  Header="Trader Profile List" Margin="4" Grid.Row="0"

           HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"

           VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" MinHeight="100">

    <ListView Margin="4" SelectionMode="Single" HorizontalContentAlignment="Stretch"

              ItemsSource="{Binding Path=AllTraderProfiles}"

              ItemContainerStyle="{StaticResource SelectableListItemStyle}"

              IsSynchronizedWithCurrentItem="True" >

        <ListView.View>

            <GridView>

                <GridViewColumn>

                    <GridViewColumnHeader Content="Successful Rate" Width="auto"

                                          Command="{Binding ElementName=MainGrid, Path=DataContext.CommandSortChooseStockSuccessRate}"/>

                    <GridViewColumn.CellTemplate>

                        <DataTemplate>

                            <TextBlock Text="{Binding Path=ChooseStockSuccessRate, Converter={StaticResource DoubleToPersentConverter}}"/>

                        </DataTemplate>

                    </GridViewColumn.CellTemplate>

                </GridViewColumn>

            </GridView>

        </ListView.View>

    </ListView>

</GroupBox>

Style used in the above code is here:

<Style x:Key="SelectableListItemStyle" TargetType="{x:Type ListViewItem}">

        <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />

        <Setter Property="ContextMenu" Value="{StaticResource RowContextMenu}" />

        <Setter Property="Height"

                Value="{Binding

            ElementName=MainGrid,

            Path=DataContext.UserControlFontSize,

            Converter={StaticResource FontSizeConverter},

            ConverterParameter=2}"/>

</Style>

---

Tony Zeng [e-mail]

Answer 3

<GroupBox  Header="Trader Profile List" Margin="4" Grid.Row="0" 

           HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
 
           VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" MinHeight="100">
 
    <ListView Margin="4" SelectionMode="Single" HorizontalContentAlignment="Stretch"
 
              ItemsSource="{Binding Path=AllTraderProfiles}"
 
              ItemContainerStyle="{StaticResource SelectableListItemStyle}"
 
              IsSynchronizedWithCurrentItem="True" >
 
        <ListView.View>
 
            <GridView>
 
                <GridViewColumn Header="Successful Rate" Width="auto" Command="{Binding ElementName=MainGrid, Path=DataContext.CommandSortChooseStockSuccessRate}" HeaderContainerStyle="{StaticResource WideColumnHeader}" />
 
                   
                    <GridViewColumn.CellTemplate>
 
                        <DataTemplate>
 
                            <TextBlock Text="{Binding Path=ChooseStockSuccessRate, Converter={StaticResource DoubleToPersentConverter}}"/>
 
                        </DataTemplate>
 
                    </GridViewColumn.CellTemplate>
 
                </GridViewColumn>
 
            </GridView>
 
        </ListView.View>
 
    </ListView>
 
</GroupBox>
 


Style used in the above code is here:
 


<Style x:Key="SelectableListItemStyle" TargetType="{x:Type ListViewItem}">
 
        <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
 
        <Setter Property="ContextMenu" Value="{StaticResource RowContextMenu}" />
 
        <Setter Property="Height" 

                Value="{Binding 

            ElementName=MainGrid, 

            Path=DataContext.UserControlFontSize, 

            Converter={StaticResource FontSizeConverter},
 
            ConverterParameter=2}"/>
 
</Style>

Try the above code sir. Please revert back if there are any problems in the code with more explanations about your needs.

Please mark as answer if it helps you or unpropose as answer if it does not help you.

---

Thanks Rehan Bharucha - The Tech Robot (MCTS, MCITP, MCPD, MCT, MCC)

Answer 4

Hi, REHAN,

I tried your xaml, but the following line not working for me. I'm using VS2008 now. In my app, the GridViewColumn do not have a property of "Command". And, could you provide some detail about your "WideColumnHeader" style? Thanks.

<GridViewColumn Header="Successful Rate" Width="auto" Command="{Binding ElementName=MainGrid, Path=DataContext.CommandSortChooseStockSuccessRate}" HeaderContainerStyle="{StaticResource WideColumnHeader}" />
 

---

Tony Zeng [e-mail]

Answer 5

Hi,

I meant this

<GridViewColumn Header="Route" DisplayMemberBinding="{Binding Path=Route}"  
     Width="Auto" 
     HeaderContainerStyle="{StaticResource WideColumnHeader}" 
/> 
... 
‹!--Somewhere in your resources--› 
... 
‹Style x:Key="WideColumnHeader" TargetType="{x:Type GridViewColumnHeader}"› 
   ‹Setter Property="HorizontalContentAlignment" Value="Left" /› 
   ‹Setter Property="Padding" Value="40,0,0,0" 
‹/Style› 
... 

Visit this link http://stackoverflow.com/questions/445524/how-do-you-automatically-set-the-width-of-columns-of-a-databound-listview

http://stackoverflow.com/questions/82323/how-to-set-grid-column-maxwidth-depending-on-window-or-screen-size-in-xaml

Please mark as answer if it helps you or unpropose as answers if it does not help you.

---

Thanks Rehan Bharucha - The Tech Robot (MCTS, MCITP, MCPD, MCT, MCC)

Answer 6

Hi REHAN,

I tried your method but it's not working for me. Either I set Width="auto" or change other settings or styles not work.  But something is pretty strange in my app, my ListView having problems is in a UserControl, and I have other ListViews in other UserControl, which do not have the same problem. I compared these UserControls but find no significant differences. Maybe I lost something, so I paste both of my UserControl's xaml bellow (removed something to make it looks simple), could you have a look on them and see if there are any problem or differences?

This is the UserControl having problems(I removed something to make it looks simple) ,

<UserControl x:Class="UserClientUI.AllTradersView"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:local="clr-namespace:UserClientUI"

             Height="auto" Width="auto"

             VerticalAlignment="Top"

             x:Name="ThisUserControl"

             HorizontalAlignment="Left" FontSize="{Binding UserControlFontSize}"

             >

    <Grid x:Name="MainGrid"

        VerticalAlignment="Stretch" Width="auto">

        <Grid.Resources>

                            ……….I removed some converters here…..

            <ContextMenu x:Key="RowContextMenu"

                         ItemsSource="{Binding MenuOptions}">

                <ContextMenu.ItemContainerStyle>

                    <Style TargetType="{x:Type MenuItem}">

                        <Setter Property="Header" Value="{Binding Path=DisplayName}" />

                        <Setter Property="Command" Value="{Binding Path=Command}"/>

                    </Style>

                </ContextMenu.ItemContainerStyle>

            </ContextMenu>

            <Style x:Key="SelectableListItemStyle" TargetType="{x:Type ListViewItem}">

                <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />

                <Setter Property="ContextMenu" Value="{StaticResource RowContextMenu}" />

                <Setter Property="Height"

                        Value="{Binding

                    ElementName=MainGrid,

                    Path=DataContext.UserControlFontSize,

                    Converter={StaticResource FontSizeConverter},

                    ConverterParameter=2}"/>

            </Style>

        </Grid.Resources>

        <Grid.RowDefinitions>

            <RowDefinition  />

            <RowDefinition Height="auto" />

            <RowDefinition  Height="auto"/>

        </Grid.RowDefinitions>

        <GroupBox Grid.Row="0"   Margin="4" Header="Traders"

                   VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" MinHeight="100">

            <ListView Margin="4" SelectionMode="Single"

                      ItemsSource="{Binding Path=AllTraderProfiles}"

                      ItemContainerStyle="{StaticResource SelectableListItemStyle}"

                      IsSynchronizedWithCurrentItem="True" >

                <ListView.View>

                    <GridView>

                                              …………..some other columns here

                        <GridViewColumn >

                             <GridViewColumnHeader Content="Choose stock success" HorizontalAlignment="Left" Padding="10,0,0,0"

                                                  Command="{Binding ElementName=MainGrid, Path=DataContext.CommandSortChooseStockSuccessRate}"/>

                            <GridViewColumn.CellTemplate>

                                <DataTemplate>

                                    <TextBlock Text="{Binding Path=ChooseStockSuccessRate, Converter={StaticResource DoubleToPersentConverter}}"/>

                                </DataTemplate>

                            </GridViewColumn.CellTemplate>

                        </GridViewColumn>

                        ……….some other columns

                    </GridView>

                </ListView.View>

            </ListView>

        </GroupBox>

        <GroupBox Header="{Binding HisStocksInHandHeader}" Grid.Row="1" MaxHeight="150"

                  HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"

                  >

            ……….another ListView here

        </GroupBox>

    </Grid>

</UserControl>

This is the UserControl that do not have metioned problems(I removed something to make it looks simple)

<UserControl x:Class="UserClientUI.TrayIconPopupView"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:local="clr-namespace:UserClientUI"

    Height="auto" Width="auto">

    <Grid>

        <Grid.Resources>

            ………some converters here….

        </Grid.Resources>

        <Border BorderBrush="DarkGreen" Background="Azure" BorderThickness="1" CornerRadius="8">

            <GroupBox Header="{Binding AllTodaysOrdersHeader}" Margin="4">

                <ListView ItemsSource="{Binding AllTodaysOrders}"

                          Visibility="{Binding Path=AllTodaysOrders.Count, Converter={StaticResource IntToVisibilityConverter}}"

                          MaxHeight="500">

                    <ListView.View>

                        <GridView>

                            …some columns here

                    </GridView>

                </ListView.View>

            </ListView>

        </GroupBox>

        </Border>

    </Grid>

</UserControl>

---

Tony Zeng [e-mail]