[Solved] Stackpanel children can't be star sized inside grid cell

[Aaron]

I have a gridview that contains a cell which contains a stackpanel which contains 4 textboxes. I need the textboxes to be star sized so they'll fill the entire space in the grid cell. When I add Height="*" & Width="*" to the textboxes, I get an error, "Failed to create a 'System.Double' from the text '*'." The issue is there is spacing around the textboxes inside the cell. This only occurs when you have the column hidden at design time and then show it at run time. Also, GridView.UpdateLayout doesn't help.

Here is an example XAML:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="SilverlightApplication1.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="500" d:DesignWidth="500">

    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel>
            <Button Height="50" Width="50" Margin="10,10,10,10" Name="Button1" />
            <telerik:RadGridView Name="FileList" Width="450" BorderThickness="0" AutoGenerateColumns="False">
                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn IsVisible="True" DataMemberBinding="{Binding FirstName}" Header="First Name" Width="100" UniqueName="FirstNameColumn"/>
                    <telerik:GridViewDataColumn IsVisible="True" DataMemberBinding="{Binding LastName}" Header="Last Name" UniqueName="LastNameColumn" Width="*"/>
                    <telerik:GridViewDataColumn IsVisible="False" DataMemberBinding="{Binding FirstName}" Header="Last Name and Age" UniqueName="LastAndAgeColumn" Width="*">
                        <telerik:GridViewDataColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel x:Name="TestPanel">
                                    <TextBox Background="Cornsilk" Text="Last" />
                                    <TextBox Background="WhiteSmoke"  Text="{Binding LastName}" />
                                    <TextBox Background="Cornsilk" Text="Folder" />
                                    <TextBox Background="WhiteSmoke" Text="{Binding Age}" />
                                </StackPanel>
                            </DataTemplate>
                        </telerik:GridViewDataColumn.CellTemplate>
                    </telerik:GridViewDataColumn>
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>
        </StackPanel>
    </Grid>
</UserControl>

[Vanya Pavlova]

Hi Aaron,


There are a couple of issues that comes to me from the snippet your provided. First it is not recommended to place the RadGridView inside a StackPanel, because internally it measures its children with Infinity, you can read more about this in the following section Degraded Performance.
I have modified your code a little bit and now it is working both in design time and at runtime.
Also at the attached picture you can see the final result.

<UserControl.Resources>
    <!--<You should remove the default padding of a GridViewCell to achieve the best result>-->
        <Style x:Key="s1" TargetType="telerik:GridViewCell">
            <Setter Property="Padding" Value="0"/>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
           <telerik:RadButton Grid.Row="0" Content="I am a RadButton"/>
            <telerik:RadGridView Grid.Row="1" x:Name="gridView1" Width="450" ItemsSource="{Binding}"  AutoGenerateColumns="False">
                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn IsVisible="True" DataMemberBinding="{Binding FirstName}" Header="First Name" Width="100" UniqueName="FirstNameColumn"/>
                    <telerik:GridViewDataColumn IsVisible="False" DataMemberBinding="{Binding LastName}" Header="Last Name" UniqueName="LastNameColumn" Width="*"/>
                    <telerik:GridViewDataColumn IsVisible="True" DataMemberBinding="{Binding FirstName}" CellStyle="{StaticResource s1}" Header="Last Name and Age" UniqueName="LastAndAgeColumn" Width="*">
                        <telerik:GridViewDataColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel x:Name="TestPanel" >
                                    <TextBox Background="Cornsilk" Text="Last" />
                                    <TextBox Background="WhiteSmoke"  Text="{Binding LastName}" />
                                    <TextBox Background="Cornsilk"  Text="Folder" />
                                    <TextBox Background="WhiteSmoke" Text="{Binding Age}" />
                                </StackPanel>
                            </DataTemplate>
                        </telerik:GridViewDataColumn.CellTemplate>
                    </telerik:GridViewDataColumn>
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>

    </Grid>

Regards,
Vanya Pavlova
the Telerik team

[Aaron]

Thanks Vanya. I appreciate you looking into this. I replaced my existing grid xaml with yours and reran the project. I'm still seeing the problem and so I've added the updated XAML and the code behind so you can duplicate the problem on your end. I made two changes to the XAML you provided; I changed the name to of the gridview to the name I'm using in the code behind, and I made the "LastNameColumn" be visible and am I hiding the "LastAndAgeColumn."
When I run the project in debug mode, the "LastNameColumn" is showing. When I click on the button, this hides the "LastNameColumn" and shows the "LastAndAgeColumn." When the column is shown, it shows the textboxes height does not take up the entire vertical space where there is some space above and below the textboxes (see attached ss). The real project I am working on has space on the left and right side of the textboxes as well as the above and below.
Thanks again for looking into this.
Aaron

Imports System.Collections.ObjectModel

Partial Public Class MainPage
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        FileList.ItemsSource = EmployeeService.GetEmployees
    End Sub


    Private Sub RadButton1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles RadButton1.Click
        FileList.RowHeight = 160
        FileList.Columns("LastNameColumn").IsVisible = False
        FileList.Columns("LastAndAgeColumn").IsVisible = True
        FileList.UpdateLayout()
    End Sub
End Class
Public Class Employee
    Private _FirstName As String
    Public Property FirstName() As String
        Get
            Return _FirstName
        End Get
        Set(ByVal value As String)
            _FirstName = value
        End Set
    End Property

    Private _LastName As String
    'Public LastName As String
    Public Property LastName() As String
        Get
            Return _LastName
        End Get
        Set(ByVal value As String)
            _LastName = value
        End Set
    End Property

    Private _Age As Integer
    Public Property Age() As Integer
        Get
            Return _Age
        End Get
        Set(ByVal value As Integer)
            _Age = value
        End Set
    End Property

    Private _Married As Boolean
    Public Property Married() As Boolean
        Get
            Return _Married
        End Get
        Set(ByVal value As Boolean)
            _Married = value
        End Set
    End Property
End Class

Public Class EmployeeService
    Public Shared Function GetEmployees() As ObservableCollection(Of Employee)
        Dim employees As New ObservableCollection(Of Employee)()

        Dim employee As New Employee()

        employee.FirstName = "Maria"
        employee.LastName = "Anders"
        employee.Married = True
        employee.Age = 24
        employees.Add(employee)

        employee = New Employee()
        employee.FirstName = "Ana"
        employee.LastName = "Trujillo"
        employee.Married = True
        employee.Age = 44
        employees.Add(employee)

        employee = New Employee()
        employee.FirstName = "Antonio"
        employee.LastName = "Moreno"
        employee.Married = True
        employee.Age = 33
        employees.Add(employee)

        employee = New Employee()
        employee.FirstName = "Thomas"
        employee.LastName = "Hardy"
        employee.Married = False
        employee.Age = 13
        employees.Add(employee)

        Return employees
    End Function
End Class

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="SilverlightApplication1.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="500" d:DesignWidth="500">

    <UserControl.Resources>
        <!--<You should remove the default padding of a GridViewCell to achieve the best result>-->
        <Style x:Key="s1" TargetType="telerik:GridViewCell">
            <Setter Property="Padding" Value="0"/>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <telerik:RadButton Grid.Row="0" Content="I am a RadButton" Name="RadButton1" />
        <telerik:RadGridView Grid.Row="1" x:Name="FileList" Width="450" ItemsSource="{Binding}"  AutoGenerateColumns="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn IsVisible="True" DataMemberBinding="{Binding FirstName}" Header="First Name" Width="100" UniqueName="FirstNameColumn"/>
                <telerik:GridViewDataColumn IsVisible="True" DataMemberBinding="{Binding LastName}" Header="Last Name" UniqueName="LastNameColumn" Width="*"/>
                <telerik:GridViewDataColumn IsVisible="False" DataMemberBinding="{Binding FirstName}" CellStyle="{StaticResource s1}" Header="Last Name and Age" UniqueName="LastAndAgeColumn" Width="*">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel x:Name="TestPanel" >
                                <TextBox Background="Cornsilk" Text="Last" />
                                <TextBox Background="WhiteSmoke"  Text="{Binding LastName}" />
                                <TextBox Background="Cornsilk"  Text="Folder" />
                                <TextBox Background="WhiteSmoke" Text="{Binding Age}" />
                            </StackPanel>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

    </Grid>


</UserControl>

[Vanya Pavlova]

Hi Aaron,


Just remove the RowHeight that you specified and in combination with the snippet in your previous post it will work as expected:

Private Sub RadButton1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles RadButton1.Click
       FileList.Columns("LastNameColumn").IsVisible = False
        FileList.Columns("LastAndAgeColumn").IsVisible = True
        FileList.UpdateLayout()
    End Sub

Best wishes,
Vanya Pavlova
the Telerik team