Materialdesigninxamltoolkit: CheckBox resize check

Created on 10 Jun 2019  路  3Comments  路  Source: MaterialDesignInXAML/MaterialDesignInXamlToolkit

Can you please extend CheckBox with a possibility to resize check?

In the touch screen app I must make a checkbox bigger. When I increase the font, only the text of the checkbox gets bigger.

I know there are several things that can be done to resize the check, but all of them are workarounds.

Currently, the most clean workaround is to put CheckBox inside ViewBox: link

Hacktoberfest enhancement good first issue up-for-grabs

Most helpful comment

This can be a good first issue:

  1. Go to MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.CheckBox.xaml
  2. Go to the Style MaterialDesignCheckBox (Line 48)
  3. Add the setters for height and width with the current values
        <Setter Property="Height" Value="18"/>
        <Setter Property="Width" Value="18"/>
  1. In line 88 (90 after adding the setters), change the Viewbox width and Height so they are binded
    <Viewbox Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" FlowDirection="LeftToRight">

Now you can change the size of the CheckBox
<CheckBox Height="80" Width="80"/>
without workarounds.

All 3 comments

This can be a good first issue:

  1. Go to MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.CheckBox.xaml
  2. Go to the Style MaterialDesignCheckBox (Line 48)
  3. Add the setters for height and width with the current values
        <Setter Property="Height" Value="18"/>
        <Setter Property="Width" Value="18"/>
  1. In line 88 (90 after adding the setters), change the Viewbox width and Height so they are binded
    <Viewbox Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" FlowDirection="LeftToRight">

Now you can change the size of the CheckBox
<CheckBox Height="80" Width="80"/>
without workarounds.

I don't think the above solution will work as it will give the check box portion of the control the entire size. As a comment on PR #1286 indicates this effectively leaves the content hidden.

I think for this we want to do the following:

  • Add a new CheckBoxAssist class with an attached property of type double with the name CheckBoxSize. You can use the ToggleButtonAssist as an example.
  • In the MaterialDesignCheckBox style set the default value of the attached property to be "18" . You can see an example of setting an attached property in a setter here
  • Use bindings on the ViewBox to apply CheckBoxAssist.CheckBoxSize to both the Height and Width. This will require using a Binding not a TemplateBinding. You can see an example of this here

I'm having the same problem where controls are too small in touch based applications and don't properly scale when setting the size. Is there any update on this? Thanks

Was this page helpful?
0 / 5 - 0 ratings

Related issues

cmeeren picture cmeeren  路  4Comments

Tyrrrz picture Tyrrrz  路  4Comments

svjansen picture svjansen  路  4Comments

gitjsdr26 picture gitjsdr26  路  4Comments

mgnslndh picture mgnslndh  路  3Comments