We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Restyling SfMultiColumnDropDownControl to minimise height

Thread ID:

Created:

Updated:

Platform:

Replies:

130802 Jun 4,2017 08:49 AM UTC Jun 9,2017 12:57 PM UTC WPF 3
loading
Tags: SfMultiColumnDropDownControl
Sam Chan
Asked On June 4, 2017 08:49 AM UTC

Hi,

I'm using a SfMultiColumnDropDownControl in a GridTemplateColumn of a SfDataGrid. I have a requirement to allow the font size to be changed by the user to something as small as 8pt to allow more rows and columns to be viewable at once.

When the default font size is used, the row height is set such that the row is a bit taller than necessary to allow the dropdown icon of the SfMultiColumnDropDownControl to be visible. When I adjust the row height based on the font size only in the QueryRowHeight handler, the row height is too small to see the dropdown icon of the SfMultiColumnDropDownControl. I can compensate that by increasing the calculated height by 8 to make the dropdown icon fully visible. The issue with that is there appears to be too much vertical space between rows when a small font size is used. Is it possible to restyle the SfMultiColumnDropDownControl to econimise the vertical space, e.g. smaller margin and possibly a smaller dropdown icon.

I've attached an example of the issue. When you uncomment the code for adding the QueryRowHeight handler, the dropdown icon is visible, otherwise the row height is not tall enough. Could you please show me how to retyle the SfMultiColumnDropDownControl such that the dropdown button and the associated TextBox would still fit the row height of a SfDataGrid when the font size is as small as 8, even 10 would still be okay.

Regards,

Sam

Attachment: WPF1449676857_StylingSfMultiColumnDropDownControl_to_minimise_height_c27147a5.zip

Muthukumar Kalyanasundaram [Syncfusion]
Replied On June 5, 2017 09:23 AM UTC

Hi Sam, 
 
Thank you for contracting Syncfusion support. 
 
We have analyzed your query. You can achieve your requirement by customizing the style of  DropDownToggleButtonStyle in SfMultiColumnDropDownControl as shown like below code, 
 
Code Snippet: 
 
<Style x:Key="DropDownToggleButtonStyle" TargetType="ToggleButton"> 
    <Setter Property="ClickMode" Value="Release" /> 
    <Setter Property="Foreground" Value="#FF000000" /> 
    <Setter Property="IsTabStop" Value="False" /> 
    <Setter Property="Focusable" Value="False" /> 
    <Setter Property="Template"> 
        <Setter.Value> 
            <ControlTemplate> 
                <Border Background="White"> 
                    <Grid> 
                        <!-- change the height and width of dropdown button --> 
                        <Path Width="8"                                      
                        Height="6" 
                        Margin="1" 
                        Data="F1M10.6668,-9.99999999997669E-05L6.0008,4.6669L1.3328,-9.99999999997669E-05L-0.000199999999999534,1.3339L6.0008,7.3329L11.9998,1.3339z" 
                        Fill="{TemplateBinding Foreground}" 
                        RenderTransformOrigin="0.5,0.5" 
                        Stretch="Uniform" /> 
                    </Grid> 
                </Border> 
            </ControlTemplate> 
        </Setter.Value> 
    </Setter> 
</Style> 
 
 
 
 
 
Please let us know if you have any query. 
 
Regards, 
Muthukumar K 


Sam Chan
Replied On June 8, 2017 11:21 AM UTC

Thank you Muthukumar, the solution works just the way I wanted.

Regards,

Sam



Muthukumar Kalyanasundaram [Syncfusion]
Replied On June 9, 2017 12:57 PM UTC

Hi Sam, 
 
Thanks for the update. Please let us know if you need any other assistance. 
 
Regards, 
Muthukumar K 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;