Designing Problem with Ribbon view When i Used Grid Column width as (*).

[Srinivasareddy]

Hi Team,

When ever i used grid column width as * , the width of the next column value is changing dynamically based on the content of * width Column. But the same code working nicely in RibbonBar and  Normal Window. But when the same code paste in Ribbon View BackstageItem the designing is disturbing. Please look at the below code snippet and help me.

  <Grid DataContext="{StaticResource ViewModel}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="11"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="7"></RowDefinition>
                                    <RowDefinition Height="*"></RowDefinition>
                                    <RowDefinition Height="7"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="11"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="11"></ColumnDefinition>
                                    <ColumnDefinition Width="*"></ColumnDefinition> ( if  Width="1000' , it is working superb..)
                                    <ColumnDefinition Width="7"></ColumnDefinition>
                                    <ColumnDefinition Width="auto"></ColumnDefinition>
                                    <ColumnDefinition Width="7"></ColumnDefinition>
                                    <ColumnDefinition Width="auto"></ColumnDefinition>
                                    <ColumnDefinition Width="11"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                
                                <ItemsControl Name="lstLocations" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5"  ItemsSource="{Binding _lstLevels}">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Button Margin="10" Name="btnLevel" Command="{Binding GetRoomsbyLevelCommand,Source={StaticResource ViewModel}}" CommandParameter="{Binding Path=Tag,ElementName=btnLevel}" Tag="{Binding}" MinHeight="80" MinWidth="80" Content="{Binding Name}"/>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <telerik:RadWrapPanel />
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                </ItemsControl>


                                <Border Background="LightGray" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="5" CornerRadius="10">
                                <ItemsControl Name="lstRooms" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="5" ItemsSource="{Binding lstRooms,Mode=TwoWay}">
                                        <ItemsControl.ItemTemplate>
                                            <DataTemplate>
                                                <Button Margin="25,10,0,10" Background="{Binding RoomClass.Color,Converter={StaticResource ColorConverter}}" Name="btnRooms" Height="50" Width="50" Content="{Binding Name}"/>
                                            </DataTemplate>
                                        </ItemsControl.ItemTemplate>
                                        <ItemsControl.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <WrapPanel HorizontalAlignment="Left"></WrapPanel>
                                            </ItemsPanelTemplate>
                                        </ItemsControl.ItemsPanel>
                                    </ItemsControl>
                                </Border>


                                <Border Background="Gray" CornerRadius="10"  Grid.Row="5" Grid.Column="1">
                                    <ItemsControl Name="lstRoomsClass"  ItemsSource="{Binding _lstRoomClass}">
                                        <ItemsControl.ItemTemplate>
                                            <DataTemplate>
                                                <Button Margin="25,10,0,10" Name="btnRoomClass"  Background="{Binding Color,Converter={StaticResource ColorConverter}}" Command="{Binding CreateRoomsInLevelCommand,Source={StaticResource ViewModel}}" CommandParameter="{Binding Path=Tag,ElementName=btnRoomClass}" Tag="{Binding}" Height="50" Width="50" Content="{Binding Name}"/>
                                            </DataTemplate>
                                        </ItemsControl.ItemTemplate>
                                        <ItemsControl.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <WrapPanel Orientation="Horizontal" HorizontalAlignment="Left"></WrapPanel>
                                            </ItemsPanelTemplate>
                                        </ItemsControl.ItemsPanel>
                                    </ItemsControl>
                                </Border>

                                <Button IsDefault="True" Content="OK" Grid.Row="5" Grid.Column="3" Height="80" Width="80"  Name="btnAddRooms"  Command="{Binding SaveFirmDataCommand}"    />

                                <Button  Content="Cancel" Grid.Row="5" Grid.Column="5" Height="80" Width="80"  Name="btnCancelRooms" />

                            </Grid> 

Thanks, 
Srinivas.

[Tina Stancheva]

Hi Srinivas,

The RibbonBackstage ControlTemplate contains a ScrollViewer and the content of each RadRibbonBackstageItem is wrapped in this ScrollViewer. However as the ScrollViewer measures its Children size with infinity, the layout of your content is different than if it's wrapped in another panel like Grid.

I am not sure how you would like to layout the BackstageItem content and this is why I'm not sure if removing the ScrollViewer will help, but please give it a try. You need to edit the default ControlTemplate of the RibbonBackstage - if you're using the default theme of the control, you can extract the template from Blend, otherwise you can find it in the Themes folder under your installation directory.

In this forum thread you can find projects demonstrating how to remove the ScrollViewer element from the RibbonBackstage.Template in the OfficeBlack default theme and the Windows7 theme.

Regards,
Tina Stancheva
the Telerik team