Question

I’m using the Jetpack theme in an application that some use of Datagrids. When editing the bound content using a DataGridTextColumn, the textbox does not stretch all the way across and down. This is a problem when adding new items to my model, since the value of the text would be null, the textbox’s click area is tiny, and is causing problems for our users.

How do I go about overriding the textbox style so the textbox stretches completely, horizontally and vertically, inside the cell of the datagrid? I have the same problem for comboboxes that are inside a DataGridTemplateColumn. When there is no default value, the combobox is tiny until a value is selected, and once a value is selected, the combobox only stretches to the width of the content selected, instead of filling itself inside the grid.

I created a new project using no theming, and everything worked correctly, so it has to do with the Jetpack theme, but I just can’t figure out where. Anyone have any ideas?

UPDATE: I tried using this style as the EditElementStyle of the column:

<Style TargetType="TextBox" x:Key="StretchTextBox">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>

This did not work either.

Answer 1

Find the DataGridTemplateColumn template/style TargetType="data:DataGridCell"

<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>

Find the ContentPresenter element and set the
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
and VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

or maybe you have to change the ContentTemplate

I don’t have the Jetpack theme, but I hope this helps. I am just guessing what could be wrong.