Hi Telerik,

I am facing resolution issue in my project.
PFA of screen shot.
Telerik controls getting overlap on each other after setting resolution on 1024*768.
As in code <Grid Grid.Row="1" Margin="0,10" HorizontalAlignment="Stretch" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="250*" />
                                <ColumnDefinition Width="250*" />
                                <ColumnDefinition Width="250*" />
                                <ColumnDefinition Width="250*" />
                                <ColumnDefinition Width="250*" />
                            </Grid.ColumnDefinitions>                         
I want it should behave as same as in resolution 1280*1024,for that please refer other screen shot of Resolution1268.
Kindly provide me the solution of this issue.How do I set width/height value in *,So control automatically set themselves fit in any resolution.
Looking forward your reply.

Regards,
Pooja

Hello Pooja,

I was not able to reproduce this issue locally. Can you please take a look at the attached sample and let me know if it works properly on your side in the different resolutions. If it does, please send over a screencast that demonstrates the steps you follow to reproduce the issue. Also, if this solution doesn't properly reflect your scenario, it would greatly help us if you can modify it accordingly.

Regards,
Tina Stancheva
Telerik

Hi Tina,

Thank you for looking into this issue.
But,If we are giving some width to the RadComboBox control as width=200.then its create the issue.
PFA of screen shot ,where i have added  width to ComboBox control.

In my project ,all controls should display properly as it seen in resolution 1280*1024.

In provided sample you didn't give any width to any control. If you are  assigned any width to control and try to resolute your screen it hampered on child controls.
So to avoid this issue ,How do i give 1*/2*/3* ratio type value to Grid Column widths.
Following is code ,
<Grid Grid.Row="1" Margin="0,10" HorizontalAlignment="Stretch" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="250*" />
                                <ColumnDefinition Width="250*" />
                                <ColumnDefinition Width="250*" />
                                <ColumnDefinition Width="250*" />
                                <ColumnDefinition Width="250*" />
                            </Grid.ColumnDefinitions>     
<StackPanel Grid.Row="0" Grid.Column="0">
                                <TextBlock x:Name="TextBlock"
                                           Style="{StaticResource CommonTxtBlk}"
                                           Text="" />
                                <StackPanel Orientation="Horizontal">
                                    <telerik:RadComboBox x:Name="ComboBox" TabIndex="1" Width="200">
                                        <telerik:RadComboBox.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <VirtualizingStackPanel />
                                            </ItemsPanelTemplate>
                                        </telerik:RadComboBox.ItemsPanel>
                                    </telerik:RadComboBox>
                                    <csla:PropertyStatus x:Name="PropertyStatus"
                                                         Style="{StaticResource ValidatorGenericStyle}"
                                                         Property="" />
                                </StackPanel>
                            </StackPanel>

                            <StackPanel Grid.Row="0" Grid.Column="1">
                                <TextBlock x:Name="TextBlock"
                                           Style="{StaticResource CommonTxtBlk}"
                                           Text="" />
                                <StackPanel Orientation="Horizontal">
                                    <telerik:RadComboBox x:Name="ComboBox" TabIndex="2"
                                                         SelectedValuePath="Key" Width="200"
                                                         >
                                        <telerik:RadComboBox.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <VirtualizingStackPanel />
                                            </ItemsPanelTemplate>
                                        </telerik:RadComboBox.ItemsPanel>
                                    </telerik:RadComboBox>
                                    <csla:PropertyStatus Style="{StaticResource ValidatorGenericStyle}"
                                                         Property="" />
                                </StackPanel>
                            </StackPanel>

                            <StackPanel Grid.Row="0" Grid.Column="2">
                                <TextBlock x:Name="TextBlock"                                              
                                               Style="{StaticResource CommonTxtBlk}"
                                               Text="" />
                                <StackPanel  Orientation="Horizontal">
                                    <telerik:RadComboBox x:Name="ComboBox" TabIndex="3"
                                              Width="200"   />

                                    <csla:PropertyStatus Style="{StaticResource ValidatorGenericStyle}"
                                                             Property="" />
                                </StackPanel>
                            </StackPanel>

                            <StackPanel Grid.Row="0" Grid.Column="3">
                                <TextBlock x:Name="TextBlock"
                                           Style="{StaticResource CommonTxtBlk}"
                                           Text="" />
                                <StackPanel Orientation="Horizontal">
                                    <sharedHelper:RadDateTimePickerEx x:Name="DateDatePicker"
                                                               TabIndex="4" Style="{StaticResource DateTimePicker}"
                                                               />
                                    <csla:PropertyStatus Style="{StaticResource ValidatorGenericStyle}"
                                                         Visibility=""
                                                         Property="" />
                                </StackPanel>
                            </StackPanel>

                            <StackPanel Grid.Row="0" Grid.Column="4">
                                <TextBlock x:Name="TextBlock"
                                           Style="{StaticResource CommonTxtBlk}"
                                           Text="" />
                                <StackPanel Orientation="Horizontal">
                                    <telerik:RadComboBox x:Name="ComboBox" TabIndex="5" Width="200">
                                                        
                                        <telerik:RadComboBox.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <VirtualizingStackPanel />
                                            </ItemsPanelTemplate>
                                        </telerik:RadComboBox.ItemsPanel>
                                    </telerik:RadComboBox>
                                    <csla:PropertyStatus Style="{StaticResource ValidatorGenericStyle}"
                                                         Property="" />
                                </StackPanel>
                            </StackPanel>

Please look into this code,provide some solution .
Looking forward your reply.

Regards,
Pooja

Hi Pooja,

Thank you for sending over your layout. If I understand your scenario correctly - you need to dynamically change your layout based on the resolution and based on the size of the window/page/browser. If this is indeed the case, then I would recommend using only Grids with Auto or Star sizing. The StackPanel control always measures its children with Infinity and therefore in a Horizontal StackPanel, its children will take up only as much horizontal space as they really need. Instead if you replace the StackPanels with Grids with Columns with Start size, then the children of the panel will take up as much space as the Column has available.

Also, when you set a specific Width on an element, then the element will maintain this Width at all times - or it will at least try. This is the reason why you get overlapping - your elements are wrapped in StackPanels and they also have a predefined Width - and when the size of the Browser is smaller, the ComboBoxes will try to keep their Width and therefore overlap each other.

You can take a look at Using the Grid control in Silverlight post - it targets an earlier version of Silverlight but the Grid specifics have not changes and it is a good starting point.

Regards,
Tina Stancheva
Telerik