WPF SpreadGrid Icon Sort

Posted by: quockhanhk15tpm on 24 July 2022, 5:23 pm EST

  • Posted 24 July 2022, 5:23 pm EST

    Hi,

    How can style icon sort.
    Display default


    After click


    After click


    Please help me.
  • Replied 25 July 2022, 3:01 pm 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.
  • Replied 25 July 2022, 8:46 pm 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
  • Replied 25 July 2022, 10:57 pm 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
  • Replied 26 July 2022, 12: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
  • Replied 26 July 2022, 12:44 pm EST

    9483F78B-8508-49F9-8A62-DA3FF6FD56EB.zip
  • Replied 26 July 2022, 2: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.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels