WPF SpreadGrid Icon Sort

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

    • Post Options:
    • Link

    Posted 24 July 2022, 5:23 pm EST - Updated 29 September 2022, 6:04 am EST

    Hi,

    How can style icon sort.

    Display default

    After click

    After click

    Please help me.

  • Posted 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.

  • Posted 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

  • Posted 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

  • Posted 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

  • Posted 26 July 2022, 12:44 pm EST

  • Posted 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