none
Datagrid colmun width * question RRS feed

  • Question

  • hi

    i have a WPF app , in my main view i have a stack panel with 2 group boxes , each group box have a datagrid inside 

    it look like this


    when i try to change the width of the last column  "notesColumn2" to be * instead of a fixed size , so it take all the space available , this what happened

    all the columns have wrong width , why ?

    note if the grid where outside the stack panel , the * with work fine

    Tuesday, January 7, 2014 10:36 PM

Answers

  • Hi,

    >>in my main view i have a stack panel with 2 group boxes , each group box have a datagrid inside

    Because I can't see your xaml code, so I made a test in my side:

    <StackPanel Orientation="Horizontal">
                <GroupBox Width="450" Height="200" >
                    <DataGrid x:Name="ContentDataGrid"  RowHeight="30" IsSynchronizedWithCurrentItem = "true"
                              CellStyle="{StaticResource Body_Content_DataGrid_Centering}"
                              ItemsSource="{StaticResource MyCustomers}" AutoGenerateColumns="False" >
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="UserID"
                                                Width="100" 
                                                IsReadOnly="True"
                                                Binding="{Binding Path=ID}" />
                            <DataGridTextColumn Header="UserName"
                                                Width="100"
                                                Binding="{Binding Path=Name}" />
                            <DataGridTextColumn Header="UserAccessLevel"
                                                Width="100"
                                                Binding="{Binding Path=AccessLevel}" />
                            <DataGridTextColumn Header="UserPassword"
                                                Width="*"
                                                Binding="{Binding Path=Password}" />
                        </DataGrid.Columns>
                    </DataGrid>
                </GroupBox>
                <GroupBox Width="450" Height="200" >
                    <DataGrid x:Name="ContentDataGrid2"  RowHeight="30" IsSynchronizedWithCurrentItem = "true"
                              CellStyle="{StaticResource Body_Content_DataGrid_Centering}"
                              ItemsSource="{StaticResource MyCustomers}" AutoGenerateColumns="False" >
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="UserID"
                                                Width="100" 
                                                IsReadOnly="True"
                                                Binding="{Binding Path=ID}" />
                            <DataGridTextColumn Header="UserName"
                                                Width="100"
                                                Binding="{Binding Path=Name}" />
                            <DataGridTextColumn Header="UserAccessLevel"
                                                Width="100"
                                                Binding="{Binding Path=AccessLevel}" />
                            <DataGridTextColumn Header="UserPassword"
                                                Width="*"
                                                Binding="{Binding Path=Password}" />
                        </DataGrid.Columns>
                    </DataGrid>
                </GroupBox>
            </StackPanel>

    As we see, the width of last column has been set to "*", it works fine:


    Based on your screenshot, looks like that the second DataGrid is next to the first one, maybe you should provide some xaml code for troubleshooting.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by Hani Safa Wednesday, January 8, 2014 12:40 PM
    Wednesday, January 8, 2014 10:36 AM
    Moderator
  • Hi Hani Safa,

    If you refer the code given by Franklin Chen

    He has given some width for the parent groupbox and he not getting the problem.

    Can you try the same.

    • Marked as answer by Hani Safa Wednesday, January 8, 2014 12:38 PM
    Wednesday, January 8, 2014 11:49 AM

All replies

  • Hi,

    Post you XAML code. It wolud be better to trace the issue.

    Thanks.


    srithar

    Wednesday, January 8, 2014 6:34 AM
  • Hi,

    >>in my main view i have a stack panel with 2 group boxes , each group box have a datagrid inside

    Because I can't see your xaml code, so I made a test in my side:

    <StackPanel Orientation="Horizontal">
                <GroupBox Width="450" Height="200" >
                    <DataGrid x:Name="ContentDataGrid"  RowHeight="30" IsSynchronizedWithCurrentItem = "true"
                              CellStyle="{StaticResource Body_Content_DataGrid_Centering}"
                              ItemsSource="{StaticResource MyCustomers}" AutoGenerateColumns="False" >
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="UserID"
                                                Width="100" 
                                                IsReadOnly="True"
                                                Binding="{Binding Path=ID}" />
                            <DataGridTextColumn Header="UserName"
                                                Width="100"
                                                Binding="{Binding Path=Name}" />
                            <DataGridTextColumn Header="UserAccessLevel"
                                                Width="100"
                                                Binding="{Binding Path=AccessLevel}" />
                            <DataGridTextColumn Header="UserPassword"
                                                Width="*"
                                                Binding="{Binding Path=Password}" />
                        </DataGrid.Columns>
                    </DataGrid>
                </GroupBox>
                <GroupBox Width="450" Height="200" >
                    <DataGrid x:Name="ContentDataGrid2"  RowHeight="30" IsSynchronizedWithCurrentItem = "true"
                              CellStyle="{StaticResource Body_Content_DataGrid_Centering}"
                              ItemsSource="{StaticResource MyCustomers}" AutoGenerateColumns="False" >
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="UserID"
                                                Width="100" 
                                                IsReadOnly="True"
                                                Binding="{Binding Path=ID}" />
                            <DataGridTextColumn Header="UserName"
                                                Width="100"
                                                Binding="{Binding Path=Name}" />
                            <DataGridTextColumn Header="UserAccessLevel"
                                                Width="100"
                                                Binding="{Binding Path=AccessLevel}" />
                            <DataGridTextColumn Header="UserPassword"
                                                Width="*"
                                                Binding="{Binding Path=Password}" />
                        </DataGrid.Columns>
                    </DataGrid>
                </GroupBox>
            </StackPanel>

    As we see, the width of last column has been set to "*", it works fine:


    Based on your screenshot, looks like that the second DataGrid is next to the first one, maybe you should provide some xaml code for troubleshooting.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by Hani Safa Wednesday, January 8, 2014 12:40 PM
    Wednesday, January 8, 2014 10:36 AM
    Moderator
  • hi , just create new wpf project

    past this replacing the default

     <StackPanel>
    
            <!--Ribbon UI , removed for simplicity of code-->
            <DataGrid x:Name="patientDataGrid"
                      AutoGenerateColumns="False"
                      EnableRowVirtualization="True"
                      ItemsSource="{Binding}"
                      RowDetailsVisibilityMode="VisibleWhenSelected"
                      CanUserAddRows="False"
                      CanUserDeleteRows="False">
                <DataGrid.Columns>
                    <DataGridTextColumn x:Name="firstNameColumn"
                                        Binding="{Binding FirstName,UpdateSourceTrigger=PropertyChanged}"
                                        Header="First Name"
                                        Width="SizeToHeader" />
                    <DataGridTextColumn x:Name="lastNameColumn"
                                        Binding="{Binding LastName,UpdateSourceTrigger=PropertyChanged}"
                                        Header="Last Name"
                                        Width="SizeToHeader" />
                    <DataGridTextColumn x:Name="phoneNumberColumn"
                                        Binding="{Binding PhoneNumber,UpdateSourceTrigger=PropertyChanged}"
                                        Header="Phone Number"
                                        Width="SizeToHeader" />
                    <DataGridTextColumn x:Name="mobileNumberColumn"
                                        Binding="{Binding MobileNumber,UpdateSourceTrigger=PropertyChanged}"
                                        Header="Mobile Number"
                                        Width="SizeToHeader" />
                    <DataGridTextColumn x:Name="eMailColumn"
                                        Binding="{Binding eMail,UpdateSourceTrigger=PropertyChanged}"
                                        Header="e Mail"
                                        Width="100" />
                    <DataGridTextColumn x:Name="notesColumn"
                                        Binding="{Binding Notes,UpdateSourceTrigger=PropertyChanged}"
                                        Header="Notes"
                                        Width="*" />
                </DataGrid.Columns>
            </DataGrid>
    
            <StackPanel Orientation="Horizontal"
                        Margin="5">
    
                <GroupBox Header="Visits">
                    <StackPanel>
                        <DataGrid x:Name="visitsDataGrid"
                                  AutoGenerateColumns="False"
                                  EnableRowVirtualization="True"
                                  RowDetailsVisibilityMode="VisibleWhenSelected"
                                  CanUserAddRows="False"
                                  CanUserDeleteRows="False"
                                  Margin="5">
    
                            <DataGrid.Columns>
                                <DataGridTemplateColumn x:Name="dateTimeColumn1"
                                                        Header="Date Time"
                                                        Width="100">
                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <DatePicker SelectedDate="{Binding DateTime, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true,UpdateSourceTrigger=PropertyChanged}" />
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>
                                <DataGridTextColumn x:Name="complainColumn"
                                                    Binding="{Binding Complain,UpdateSourceTrigger=PropertyChanged}"
                                                    Header="Complain"
                                                    Width="100" />
                                <DataGridTextColumn x:Name="prescriptionColumn"
                                                    Binding="{Binding Prescription,UpdateSourceTrigger=PropertyChanged}"
                                                    Header="Prescription"
                                                    Width="100" />
    
                                <DataGridTextColumn x:Name="notesColumn2"
                                                    Binding="{Binding Notes,UpdateSourceTrigger=PropertyChanged}"
                                                    Header="Notes"
                                                    Width="130" />
                            </DataGrid.Columns>
                        </DataGrid>
                        <StackPanel Orientation="Horizontal"
                                    HorizontalAlignment="Right"
                                    Margin="5">
                            <Button Content="New"
                                    Margin="0,0,5,0"
                                    Click="NewVisit" />
                            <Button Content="Save"
                                    Margin="0,0,5,0"
                                    Click="SaveVisit" />
                            <Button Content="Cancel"
                                    Margin="0,0,5,0"
                                    Click="CancelVisit" />
                            <Button Content="Delete"
                                    Margin="0,0,5,0"
                                    Click="DeleteVisit" />
                        </StackPanel>
                    </StackPanel>
                </GroupBox>
    
                <GroupBox Header="Paiement">
                    <StackPanel>
                        <DataGrid x:Name="paiementDataGrid"
                                  AutoGenerateColumns="False"
                                  EnableRowVirtualization="True"
                                  RowDetailsVisibilityMode="VisibleWhenSelected"
                                  Margin="5"
                                  CanUserAddRows="False"
                                  CanUserDeleteRows="False">
                            <DataGrid.Columns>
                                <DataGridTemplateColumn x:Name="dateTimeColumn"
                                                        Header="Date Time"
                                                        Width="100">
                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <DatePicker SelectedDate="{Binding DateTime, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true,UpdateSourceTrigger=PropertyChanged}" />
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>
    
                                <DataGridTextColumn x:Name="moneyColumn"
                                                    Binding="{Binding Money,UpdateSourceTrigger=PropertyChanged}"
                                                    Header="Money"
                                                    Width="100" />
                                <DataGridTextColumn x:Name="notesColumn1"
                                                    Binding="{Binding Notes,UpdateSourceTrigger=PropertyChanged}"
                                                    Header="Notes"
                                                    Width="200" />
                            </DataGrid.Columns>
                        </DataGrid>
                        <StackPanel Orientation="Horizontal"
                                    HorizontalAlignment="Right"
                                    Margin="5">
                            <Button Content="New"
                                    Margin="0,0,5,0"
                                    Click="NewPaiment" />
                            <Button Content="Save"
                                    Margin="0,0,5,0"
                                    Click="SavePaiment" />
                            <Button Content="Cancel"
                                    Margin="0,0,5,0"
                                    Click="CancelPaiment" />
                            <Button Content="Delete"
                                    Margin="0,0,5,0"
                                    Click="DeletePaiment" />
                        </StackPanel>
                    </StackPanel>
                </GroupBox>
            </StackPanel>
        </StackPanel>

    grid

    Wednesday, January 8, 2014 11:34 AM
  • thanks for your help ,

    i don't want to use code to fix UI things , there must be something to do with XAML

    thanks again

    Wednesday, January 8, 2014 11:36 AM
  • sorry for that ,

    i've included the XAML in my reply to

    please check it out

    Wednesday, January 8, 2014 11:38 AM
  • Hi Hani Safa,

    If you refer the code given by Franklin Chen

    He has given some width for the parent groupbox and he not getting the problem.

    Can you try the same.

    • Marked as answer by Hani Safa Wednesday, January 8, 2014 12:38 PM
    Wednesday, January 8, 2014 11:49 AM
  • Yep , that is it , i must set a width for the parent groupbox

    thanks for your help

    Wednesday, January 8, 2014 12:37 PM
  • as AyyappanSubramanian suggest , the problem was that  i didn't give the parent group box a width ,

    when i did , the problem solved .

    thanks for you time


    Wednesday, January 8, 2014 12:40 PM