WPF SpreadGrid Icon Sort

WPF SpreadGrid Icon Sort

Posted by: quockhanhk15tpm on 25 July 2022, 2:23 am EST

• 

  quockhanhk15tpm

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 July 2022, 2:23 am EST - Updated 29 September 2022, 3:04 pm EST

  Hi,

  How can style icon sort.
  
  Display default
  
  

  After click
  
  

  After click
  
  

  Please help me.

• 

  nitin.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 26 July 2022, 12:01 am EST

  Hi,

  Apologize for the delay and thanks for the snapshots.

  You can achieve this requirement by setting ColumnHeaderStyle.

  Style Resource for ColumnHeaderStyle:

  
          <Style x:Key="headerStyle" TargetType="gc:ColumnHeaderCellPresenter">
              <Setter Property="Template">
                  <Setter.Value>
                      <ControlTemplate>
                          <ContentControl>
                              <Grid Background="Orange">
                                  <Grid.ColumnDefinitions>
                                      <ColumnDefinition/>
                                      <ColumnDefinition Width="20"/>
                                  </Grid.ColumnDefinitions>
                                  <TextBlock TextAlignment="Center" Text="{Binding RelativeSource={RelativeSource AncestorType=gc:ColumnHeaderCellPresenter}, Path=Cell.Text}"/>
                                  <Image Grid.Column="1" Width="10" Height="10" >
                                      <Image.Style>
                                          <Style TargetType="Image">
                                              <Setter Property="Source" Value="../../Resources/sort.png" />
                                              <Setter Property="ToolTip" Value="Hello"/>
                                              <Style.Triggers>
                                                  <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=gc:ColumnHeaderCellPresenter}, Path=Cell.Position.Column, Converter={StaticResource converter}, ConverterParameter={x:Reference Name=spread}, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}" Value="Ascending">
                                                      <Setter Property="Source" Value="../../Resources/sort-up.png" />
                                                      <Setter Property="ToolTip" Value="Hello 1"/>
                                                  </DataTrigger>
                                                  <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=gc:ColumnHeaderCellPresenter}, Path=Cell.Position.Column, Converter={StaticResource converter}, ConverterParameter={x:Reference Name=spread}, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}" Value="Descending">
                                                      <Setter Property="Source" Value="../../Resources/sort-down.png" />
                                                      <Setter Property="ToolTip" Value="Hello 2"/>
                                                  </DataTrigger>
                                              </Style.Triggers>
                                          </Style>
                                      </Image.Style>
                                  </Image>
                              </Grid>
                          </ContentControl>
                      </ControlTemplate>
                  </Setter.Value>
              </Setter>
          </Style>
  
  

  Converter for ColumnHeaderStyle:

  
      public class ValueConverter : IValueConverter
      {
          public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
          {
              var spread = parameter as GcSpreadGrid;
              if (spread.Columns[(int)value].SortDirection == System.ComponentModel.ListSortDirection.Ascending)
                  return "Ascending";
              else if (spread.Columns[(int)value].SortDirection == System.ComponentModel.ListSortDirection.Descending)
                  return "Descending";
              else
                  return null;
          }
  
          public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
          {
              return null;
          }
  
  

  Please refer the attached sample for the same: SpreadSortSample.zip

  Best Regards,
  
  Nitin.

• 

  quockhanhk15tpm

  • Post Options:
  • Link
    Copy

  Posted 26 July 2022, 5:46 am EST

  Hi Nitin,

  Thanks for your answer.
  
  I have done the test.
  
  Header jumps on click.
  
  Is there any way to avoid this happening?

  Best Regards,
  
  KhanhLQ

• 

  nitin.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 26 July 2022, 7:57 am EST

  Hi,

  Apologize, but we didn’t understand your point. Could you please share a gif or video that happened at your end.

  regards,
  
  Nitin

• 

  quockhanhk15tpm

  • Post Options:
  • Link
    Copy

  Posted 26 July 2022, 9:42 pm EST

  Hi Nitin,

  Sorry for the unclear description
  
  When doing click sort, the header is jumped.
  
  I have attached the video

  Best Regards,
  
  KhanhLQ

• 

  quockhanhk15tpm

  • Post Options:
  • Link
    Copy

  Posted 26 July 2022, 9:44 pm EST

  9483F78B-8508-49F9-8A62-DA3FF6FD56EB.zip

• 

  nitin.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 26 July 2022, 11:35 pm EST

  Hi,

  This behavior is because of reapplying ColumnHeaderStyle on Sort. While sorting, the ColumnHeaderStyle is reapplied and generating Header contents. You can somehow reduce this by giving small delay(8-15 ms) in Sorted event. Update the Sorted event as:

  
         private async void Spread_Sorted(object sender, EventArgs e)
          {
              //Re-apply Column Header style
              spread.ColumnHeaderStyle = null;
              await Task.Delay(8);
              spread.ColumnHeaderStyle = this.FindResource("headerStyle") as Style;
          }
  
  

  Best Regards,
  
  Nitin.