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

2 posts, 0 answers
  1. Srinivasareddy
    Srinivasareddy avatar
    5 posts
    Member since:
    Sep 2012

    Posted 17 Sep 2012 Link to this post

    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.
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 19 Sep 2012 Link to this post

    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

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

  3. UI for WPF is Visual Studio 2017 Ready
Back to Top