Silverlight Datagrid using Jetpack theme does not stretch textboxes when editing contents

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.

Answer 2

I have figured out the answer, but I'm marking Rumplin's answer as accepted because he clued me on what to do. If you look at http://www.silverlight.net/content/samples/sl4/themes/jetpack.html the datagrid there does the same thing. Starting a new SL app with no theme makes the datagrid work as expected. Commenting out the whole ContentTemplate makes the content in the cells fill up as it should be:

<Style TargetType="sdk:DataGridCell">
    <Setter Property="FontFamily" Value="{StaticResource NormalFontFamily}" />
    <Setter Property="FontSize" Value="{StaticResource DefaultFontSize}" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Padding" Value="7"/>
    <!--
    <Setter Property="Template" Value="{StaticResource DataGridCellTemplate}" />
-->
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>

I do not know much about theming and animations, but that seemed to do the trick. I have a blue line surrounding the active row but it's insignificant.

Answer 3

The DataGrid template in the JetPack theme has this problem (cell contents not stretching) and the default template in the SDK does not. The answer above doesn't address the problem of the JetPack template; rather it shows how to use the default SDK template instead of the JetPack template. I thought I would post the fix for the JetPack template itself.

In the JetPack theme's SDKStyles.xaml resource dictionary:

1. Locate the ControlTemplate element with x:Key="DataGridCellTemplate"
2. In the ControlTemplate, locate the ContentControl element
3. Set HorizontalContentAlignment and VerticalContentAlignment to Stretch on the ContentControl.

The reason for the difference between the default SDK template and the JetPack template is that the SDK uses a ContentPresenter while the JetPack template uses a ContentControl.