locked
GridViewColumn update its width when increased, not when decreased RRS feed

  • Question

  • Hi everyone,

    I have the following piece of code, where the images are shown or collapsed dynamically:

    <GridViewColumn Width="{Binding ColumnWidth, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" x:Name="MyGVCol">
        <GridViewColumn.Header>
            <Image Source="l.ico" Width="16" Height="16"/>
        </GridViewColumn.Header>
        <GridViewColumn.CellTemplate>
            <DataTemplate>
                <Border Margin="-6,0,-6,0">
                    <StackPanel Orientation="Horizontal">
                        <StackPanel Orientation="Horizontal" x:Name="CSP">
                            <Image x:Name="lImg" Width="16" Height="16"
                                   Source="l.ico" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
                            <Image x:Name="rImg" Width="16" Height="16"
                                   Source="r.ico" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
                            <Image x:Name="plImg" Width="16" Height="16"
                                   Source="pl.ico" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
                            <Image x:Name="paImg" Width="16" Height="16"
                                   Source="pa.ico" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
                        </StackPanel>
                    </StackPanel>
                </Border>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding Path=IsExp}" Value="false">
                        <Setter Property="Visibility" Value="Visible" TargetName="CSP"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=IsExp}" Value="true">
                        <Setter Property="Visibility" Value="Collapsed" TargetName="CSP"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=IsL}" Value="false">
                        <Setter Property="Visibility" Value="Collapsed" TargetName="lImg"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=IsR}" Value="false">
                        <Setter Property="Visibility" Value="Collapsed" TargetName="rImg"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=IsPl}" Value="false">
                        <Setter Property="Visibility" Value="Collapsed" TargetName="plImg"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=IsPa}" Value="false">
                        <Setter Property="Visibility" Value="Collapsed" TargetName="paImg"/>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </GridViewColumn.CellTemplate>
    </GridViewColumn>

    In the code-behind I created the ColumnWidth property which is modified by the following piece of code:

    void updateColumnWidth(int n)
    {
       try
       {
          if (n <= 2)
          {
             ColumnWidth = 0;
             ColumnWidth = double.NaN;
             ColumnWidth = 32;
          }
          else
          {
             ColumnWidth = 0;
             ColumnWidth = double.NaN;
             ColumnWidth = n * 16;
          }
       }
       catch (Exception ex)
       {
          Console.WriteLine(string.Format("Exception: {0}, {1}", ex.Message, ex.StackTrace));
       }
    }

    The problem is: when an image is shown or hidden, MyGVCol is resized perfectly, but if the user MANUALLY grab the column thumb to enlarge or shrink the column, then the column loses its capability to automatically fit to its content (according to the logic just shown).

    Any idea?

    Thanks,

    FZ

    Tuesday, October 22, 2013 9:27 AM

Answers

  • In the end, I preferred to relax just a bit the requirements: the user can modify the column lenght because it is already dynamically modified by the application.

    I used this page to implement a fixed width column.

    Regards,

    FZ

    Wednesday, October 23, 2013 3:08 PM

All replies

  • I just tried with modifying the code responsible to update the column width with this piece of code:

    void updateColumnWidth(int n)
    {
       try
       {
          if (double.IsNaN(ColumnWidth))
          {
              ColumnWidth = MyGVCol.ActualWidth;
          }
          ColumnWidth = double.NaN;
       }
       catch (Exception ex)
       {
          Console.WriteLine(string.Format("Exception: {0}, {1}", ex.Message, ex.StackTrace));
       }
    }

    In this case, if two images are shown in a row and one of them disappears, then the column doesn't shrink at all (independently from user interaction on the column thumb to modify the column width).

    FZ

    Tuesday, October 22, 2013 9:33 AM
  • Hi,

    I created a project on my end and tried to reproduce this issue. Since I did not know how to call the update Grid With method, I cannot reproduce it.

    I have an idea for this issue. If your List View is also re-sizing then you can use a behavior pattern to re-size the columns to fit the full List View width. Almost the same as you using Grid Column definitions.

    <ListView HorizontalAlignment="Stretch"
              Behaviours:GridViewColumnResize.Enabled="True">
            <ListViewItem></ListViewItem>
            <ListView.View>
                <GridView>
                    <GridViewColumn  Header="Column *"
                                       Behaviours:GridViewColumnResize.Width="*" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBox HorizontalAlignment="Stretch" Text="Example1" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn  Header="Column 2*" 
                              Behaviours:GridViewColumnResize.Width="2*" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBox HorizontalAlignment="Stretch" Text="Example1" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn  Header="Column Auto" Width="Auto"  >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBox HorizontalAlignment="Stretch" Text="Example1" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn  Header="50 S"
                                       Behaviours:GridViewColumnResize.Width="50" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBox HorizontalAlignment="Stretch" Text="E" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn  Header="50" Width="50" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBox HorizontalAlignment="Stretch" Text="E" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
            </GridView>
            </ListView.View>
    </ListView>

    For more information, You can refer to the link below,

    http://lazycowprojects.tumblr.com/post/7063214400/wpf-c-listview-column-width-auto

    Have a nice time!

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, October 23, 2013 3:27 AM
  • Thanks for the answer, Jimmy.

    The updateColumnWidth is called through an event when the IsL, IsR, IsPl and IsPa variables are set. I think you can reproduce my issue setting a timer which show and hide a couple of images alternatively every 2000 ms.

    By the way, i don't think this is what i need. The ListView is fixed and any column can be resized by the user. It just has an horizontal scrollbar to view the entire content. The problem here is that if the user modify the column width, the updateColumnWidth method is still executed as before, but without the width modification.

    FZ

    Wednesday, October 23, 2013 7:14 AM
  • Could you please provide a sample for this issue ? You can share it on SkyDrive. 
    Wednesday, October 23, 2013 2:01 PM
  • In the end, I preferred to relax just a bit the requirements: the user can modify the column lenght because it is already dynamically modified by the application.

    I used this page to implement a fixed width column.

    Regards,

    FZ

    Wednesday, October 23, 2013 3:08 PM
  • Hey,

    Thanks for sharing your solution here.

    Thursday, October 24, 2013 2:19 AM