JanwalkarPooja
Top achievements
Rank 2
JanwalkarPooja
asked on 24 Oct 2013, 08:59 AM
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
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
3 Answers, 1 is accepted
0
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
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
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
JanwalkarPooja
Top achievements
Rank 2
answered on 29 Oct 2013, 10:53 AM
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
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
0
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
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
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>