Problem with Material Design Textbox

I’m new to programming and started to make an application for school. For that I use C# WPF and for a good-looking Application I installed Material Design.

First I started the Demo of Material Design and after a quick view I found a nice TextBox with a border and a Checkbox on top of it. The code to copy was this (It’s the example from Fields -> Outlined Text field in the Demo)

<StackPanel> <CheckBox x:Name="MaterialDesignOutlinedTextFieldTextBoxEnabledComboBox" IsChecked="True" Margin="32,0,0,8"> Enabled </CheckBox> <TextBox Style="{StaticResource MaterialDesignOutlinedTextFieldTextBox}" Margin="32,0,0,0" VerticalAlignment="Top" Height="100" AcceptsReturn="True" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" materialDesign:HintAssist.Hint="This is a text area" IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignOutlinedTextFieldTextBoxEnabledComboBox}" /> </StackPanel>

Because I just needed the Textbox, I deleted the Code of the CheckBox and implemented the rest inside my application. So the code now is like this:

<TextBox Style="{StaticResource MaterialDesignOutlinedTextFieldTextBox}" Margin="32,0,0,0" VerticalAlignment="Top" Height="100" AcceptsReturn="True" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" materialDesign:HintAssist.Hint="This is a text area" />

The problem now is, that I can’t edit the textbox.

As you can see in the picture above, the TextBox on the top is a normal TextBox (which I can edit) and the TextBox below is with Style="{StaticResource MaterialDesignOutlinedTextFieldTextBox}" (which I cant edit/type in).

I guess the TextBox is still linked to the CheckBox and because I deleted it, somehow i can’t write in it anymore. It all works fine with a standard textbox, but with the copied code i cant do anything, just see the TextBox with its rounded border.

How can I fix the problem, so I have the TextBox with the rounded border while I can edit it? I would appreciate it, if somebody could help me.

Thank you.

[jespersh]

There’s nothing I can recommend you to do, except not to try to use the MaterialDesignOutlinedTextFieldTextBox in the height restricted way you’re attempting. As I see it, then you would end up with triple borders, reimplementing the entire style or breaking the validation or other effects.

If you want to ignore that, then copy paste https://raw.githubusercontent.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/master/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TextBox.xaml into a new file in your project, modify and rename the styles and add the style file in your app.xaml

[jespersh]

You can edit in it, it is just that the text is somewhere… else Try entering into the box “1234”, ctrl-a to select all and copy it. Paste it in somewhere else. Simply remove the Height <TextBox Width="85" Style="{StaticResource MaterialDesignOutlinedTextFieldTextBox}" />

I suspect that you’re trying to achieve something with MaterialDesignOutlinedTextFieldTextBox that it wasn’t intended to do. The Outlined trigger is setting some values that are hardcoded: https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/e1d240de3155654cfae52c31799bc9341f767582/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TextBox.xaml#L163-L176

My recommendation would be to create your own textbox style to suit your specific needs (it is the margin and padding values that were screwing you over)