RadPanel sizing inside ViewBox

[Nicole]

I have a RadPanelBar inside a ViewBox.  The RadPanelBar items are created dynamically in code behind, and inside each RadPanelBarItem is a Grid.

We need the VIewBox to support a wide range of screen resolutions as well as our TileView control, and it works great for that.  However, The RadPanelBar resizes itself based on the contents of the RadPanelBarItem, and those can vary dramatically.  A grid with 15 items, for example, is rather small.  A grid with one or two items is very large.  We cannot control the number of items in the Grids.  The fonts and controls resizing so much is difficult for the user to read.

Is there any way to specify the RadPanelBar width as a percentage of the ViewBox container?  If the RadPanelBar were always 90% of the width of the ViewBox, for example, that would help alleviate the discord moving from one RadPanelBarItem to another.

Similarly, if the contents of the RadPanelBarItems could be programmatically set to a percentage width of the RadPanelBar, we could decide on a happy medium that worked for most items.

[Petar Mladenov]

Hi Nicole,

 You can try to place Grid with 3 Columns in the ViewBox and set the second column to take 90 % of the whole width like so:

<Viewbox  x:Name="viewBox" Stretch="Fill">
            <Grid Width="500">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.05*"/>
                    <ColumnDefinition Width="0.9*"/>
                    <ColumnDefinition Width="0.05*"/>
                </Grid.ColumnDefinitions>

                <telerik:RadPanelBar Grid.Column="1">
                    <telerik:RadPanelBarItem Header="Item A">
                        <Rectangle Width="100" Height="200" Fill="DeepSkyBlue" />
                    </telerik:RadPanelBarItem>
                    <telerik:RadPanelBarItem Header="Item B">
                        <Rectangle Width="100" Height="400" Fill="DeepSkyBlue" />
                    </telerik:RadPanelBarItem>
                    <telerik:RadPanelBarItem Header="Item C">
                        <Rectangle Width="100" Height="600" Fill="DeepSkyBlue" />
                    </telerik:RadPanelBarItem>
                </telerik:RadPanelBar>
            </Grid>
        </Viewbox>

Is this suitable for you ? All the best,
Petar Mladenov
the Telerik team

[Nicole]

Thanks, Petar.  Unfortunately it doesn't behave the way I'd want it to.  Even if I set the middle column to 40 or 50% width, the RadPanelBar still takes up all the width between the margins.  I tried putting a rectangle on either side of the panel bar just so there would be something in those columns, but the behavior didn't change.

I think we are out of luck on this one.

[Petar Mladenov]

Hi Nicole,

 When it comes to Layout, every symbol in XAML makes sense. Could you please share more from your Layout scenario via XAML code so that we could advice you much better? Thank you in advance.

All the best,
Petar Mladenov
the Telerik team

[Nicole]

Hi Petar,

There isn't much in the way of xaml since it's mostly constructed in code behind.  Here is the xaml:

<sc:RefreshableUserControl
    x:Class="Dashboard.Silverlight.Views.Aviation.FixedWingLocation"
    xmlns:sc="clr-namespace:Dashboard.Silverlight.SupportClasses"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:telerikData="clr-namespace:Telerik.Windows.Data;assembly=Telerik.Windows.Data"
    mc:Ignorable="d"
    d:DesignHeight="762" d:DesignWidth="1024" >

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.Resources>
            <sc:FooterValueConverter x:Key="FooterValueConverter" />
            <sc:FooterForeColorValueConverter x:Key="ForeColorValueConverter"/>
            <ControlTemplate x:Key="GridViewFooterCellTemplate" TargetType="telerik:GridViewFooterCell">
                <Border Background="{Binding Path=CurrentItem.Value,  Converter ={StaticResource FooterValueConverter}}"
                    x:Name="PART_FooterCellBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
                    <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <ContentPresenter.ContentTemplate>
                            <DataTemplate>
                                <ContentControl Foreground="{Binding Path=CurrentItem.Value,  Converter ={StaticResource ForeColorValueConverter}}"
                                                Content="{Binding CurrentItem.Value}" />
                            </DataTemplate>
                        </ContentPresenter.ContentTemplate>
                    </ContentPresenter>
                </Border>
            </ControlTemplate>
            <SolidColorBrush x:Key="ControlOuterBorder" Color="#FF848484"/>
            <Style x:Key="GridViewFooterCellStyle1" TargetType="telerik:GridViewFooterCell">
                <Setter Property="Template" Value="{StaticResource GridViewFooterCellTemplate}"/>
                <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}"/>
                <Setter Property="BorderThickness" Value="0,0,1,0"/>
                <Setter Property="Padding" Value="5,0,3,0"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="Background" Value="Transparent"/>
            </Style>
        </Grid.Resources>
        <Viewbox x:Name="vbViewbox" Visibility="Visible">
            <Grid x:Name="grdViewbox" Margin="5,5,5,5">
                <Grid.RowDefinitions>
                    <RowDefinition Height=".9*"/>
                    <RowDefinition Height=".1*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <telerik:RadPanelBar x:Name="pbAviation" Margin="12,8,12,20" FontWeight="Bold" Grid.Row="0" Width="auto" telerik:StyleManager.Theme="Transparent" ExpandMode="Single" >
                    <!--Contents of panel bar inserted programmatically in code behind-->
                </telerik:RadPanelBar>

                <StackPanel Name="stackRectangles" Grid.Row="1" Margin="0,12,0,0" telerik:StyleManager.Theme="Transparent" HorizontalAlignment="Center"
                            VerticalAlignment="Top" Orientation="Horizontal">
                    <TextBlock Grid.Row="1" Foreground="#FF080707" Margin="3,0">Legend: FMC %</TextBlock>
                    <Rectangle Width="65" Height="17" RadiusX="5" RadiusY="5" Stroke="Black" StrokeThickness="1.5">
                        <Rectangle.Projection>
                            <PlaneProjection CenterOfRotationX="0" CenterOfRotationY="0"/>
                        </Rectangle.Projection>
                        <Rectangle.Effect>
                            <telerik:ReflectionEffect/>
                        </Rectangle.Effect>
                        <Rectangle.Fill>
                            <LinearGradientBrush x:Name="lgbGreen" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                                <GradientStop Color="#FF075207" Offset="0.759"/>
                                <GradientStop Color="#FF21C221" Offset="0.056"/>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <TextBlock Foreground="#FF080707" HorizontalAlignment="Center" Margin="3,0">75-100%</TextBlock>
                    <Rectangle Width="65" Height="17" RadiusX="5" RadiusY="5" Stroke="Black" StrokeThickness="1.5">
                        <Rectangle.Effect>
                            <telerik:ReflectionEffect/>
                        </Rectangle.Effect>
                        <Rectangle.Fill>
                            <LinearGradientBrush x:Name="lgbYellow" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                                <GradientStop Color="Yellow" Offset="0.043"/>
                                <GradientStop Color="#FF898925" Offset="0.866"/>
                                <GradientStop Color="#FFC2C246" Offset="0.47"/>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <TextBlock Foreground="#FF080707" HorizontalAlignment="Center" Margin="3,0">74-60%</TextBlock>
                    <Rectangle Width="65" Height="17" RadiusX="5" RadiusY="5" StrokeThickness="1.5" Stroke="Black">
                        <Rectangle.Fill>
                            <LinearGradientBrush x:Name="lgbRed" EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF5C221C" Offset="0.72"/>
                                <GradientStop Color="#FFF72E2E" Offset="0.013"/>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                        <Rectangle.Effect>
                            <telerik:ReflectionEffect/>
                        </Rectangle.Effect>
                    </Rectangle>
                    <TextBlock Foreground="#FF080707" HorizontalAlignment="Center" Margin="3,0">59-50%</TextBlock>
                    <Rectangle Width="65" Height="17" RadiusX="5" RadiusY="5" Stroke="Black" StrokeThickness="1.5">
                        <Rectangle.Effect>
                            <telerik:ReflectionEffect/>
                        </Rectangle.Effect>
                        <Rectangle.Fill>
                            <LinearGradientBrush x:Name="lgbBlack" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                                <GradientStop Color="#FF0C0C0C" Offset="0.543" />
                                <GradientStop Color="#FFA9A7A7" Offset="0.004"/>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <TextBlock Foreground="Black" HorizontalAlignment="Center" Margin="3,0">0-49%</TextBlock>
                </StackPanel>
            </Grid>
        </Viewbox>
    </Grid>
</sc:RefreshableUserControl>

And here is the relevant code behind:

public void CreatePanelBar()
        {
            List<string> locations = GetLocations();
            foreach (string location in locations)
            {
                RadPanelBarItem item = new RadPanelBarItem();

                item.Name = location;
                item.Header = location;
                pbAviation.Items.Insert(0, item);

                StackPanel stackGrid = new StackPanel();

                //gvFixed contains the grid of data for each location
                RadGridView gvFixed = new RadGridView();
                gvFixed.ShowColumnFooters = true;
                gvFixed.ShowGroupPanel = false;
                gvFixed.IsFilteringAllowed = false;
                StyleManager.SetTheme(gvFixed, new TransparentTheme());
                stackGrid.Children.Add(gvFixed);

                #region gvFixed columns
                //Add the columns to the grid
                GridViewDataColumn Name = new GridViewDataColumn();
                Name.DataType = typeof(string);
                Name.DataMemberBinding = new Binding("FixedType");
                Name.Header = "MDS";
                Name.UniqueName = "Name";
                gvFixed.AutoGenerateColumns = false;
                gvFixed.Columns.Add(Name);

                CountFunction NameTotal = new CountFunction();
                NameTotal.ResultFormatString = location.ToString() + " Totals ";
                ((GridViewDataColumn)gvFixed.Columns["Name"]).AggregateFunctions.Add(NameTotal);

                GridViewDataColumn ColOnHand = new GridViewDataColumn();
                ColOnHand.DataType = typeof(double);
                ColOnHand.DataMemberBinding = new Binding("OnHand");
                ColOnHand.Header = "On Hand";
                ColOnHand.UniqueName = "OnHand";
                gvFixed.AutoGenerateColumns = false;
                gvFixed.Columns.Add(ColOnHand);

                SumFunction OnHandTotal = new SumFunction();
                ((GridViewDataColumn)gvFixed.Columns["OnHand"]).AggregateFunctions.Add(OnHandTotal);

                GridViewDataColumn ColFMC = new GridViewDataColumn();
                ColFMC.DataType = typeof(double);
                ColFMC.DataMemberBinding = new Binding("FMC");
                ColFMC.Header = "FMC";
                ColFMC.UniqueName = "FMC";
                gvFixed.AutoGenerateColumns = false;
                gvFixed.Columns.Add(ColFMC);

                SumFunction FMCTotal = new SumFunction();
                ((GridViewDataColumn)gvFixed.Columns["FMC"]).AggregateFunctions.Add(FMCTotal);

                GridViewDataColumn ColNMCS = new GridViewDataColumn();
                ColNMCS.DataType = typeof(double);
                ColNMCS.DataMemberBinding = new Binding("NMCS");
                ColNMCS.Header = "NMCS";
                ColNMCS.UniqueName = "NMCS";
                gvFixed.AutoGenerateColumns = false;
                gvFixed.Columns.Add(ColNMCS);

                SumFunction NMCSTotal = new SumFunction();
                ((GridViewDataColumn)gvFixed.Columns["NMCS"]).AggregateFunctions.Add(NMCSTotal);

                GridViewDataColumn ColNMCM = new GridViewDataColumn();
                ColNMCM.DataType = typeof(double);
                ColNMCM.DataMemberBinding = new Binding("NMCM");
                ColNMCM.Header = "NMCM";
                ColNMCM.UniqueName = "NMCM";
                gvFixed.AutoGenerateColumns = false;
                gvFixed.Columns.Add(ColNMCM);

                SumFunction NMCMTotal = new SumFunction();
                ((GridViewDataColumn)gvFixed.Columns["NMCM"]).AggregateFunctions.Add(NMCMTotal);

                GridViewDataColumn ColPMCS = new GridViewDataColumn();
                ColPMCS.DataType = typeof(double);
                ColPMCS.DataMemberBinding = new Binding("PMCS");
                ColPMCS.Header = "PMCS";
                ColPMCS.UniqueName = "PMCS";
                gvFixed.AutoGenerateColumns = false;
                gvFixed.Columns.Add(ColPMCS);

                SumFunction PMCSTotal = new SumFunction();
                ((GridViewDataColumn)gvFixed.Columns["PMCS"]).AggregateFunctions.Add(PMCSTotal);

                GridViewDataColumn ColPMCM = new GridViewDataColumn();
                ColPMCM.DataType = typeof(double);
                ColPMCM.DataMemberBinding = new Binding("PMCM");
                ColPMCM.Header = "PMCM";
                ColPMCM.UniqueName = "PMCM";
                gvFixed.AutoGenerateColumns = false;
                gvFixed.Columns.Add(ColPMCM);

                SumFunction PMCMTotal = new SumFunction();
                ((GridViewDataColumn)gvFixed.Columns["PMCM"]).AggregateFunctions.Add(PMCMTotal);

                GridViewDataColumn ColFMCPercent = new GridViewDataColumn();
                ColFMCPercent.DataType = typeof(double);
                ColFMCPercent.DataMemberBinding = new Binding("FMCPercent");
                ColFMCPercent.Header = "FMC %";
                ColFMCPercent.UniqueName = "FMCPercent";
                gvFixed.AutoGenerateColumns = false;
                ColFMCPercent.FooterCellStyle = this.LayoutRoot.Resources["GridViewFooterCellStyle1"] as Style;
                ColFMCPercent.IsReadOnly = true;
                gvFixed.Columns.Add(ColFMCPercent);

                var roundedAggregateFunction = new AggregateFunction<FixedSystem, double>() { AggregationExpression = p => Math.Round(p.Average(prd => prd.FMCPercent)) };
                ((GridViewDataColumn)gvFixed.Columns["FMCPercent"]).AggregateFunctions.Add(roundedAggregateFunction);

                GridViewDataColumn ColScheduleS = new GridViewDataColumn();
                ColScheduleS.DataType = typeof(double);
                ColScheduleS.DataMemberBinding = new Binding("ScheduleS");
                ColScheduleS.Header = "S";
                ColScheduleS.UniqueName = "ScheduleS";
                gvFixed.AutoGenerateColumns = false;
                gvFixed.Columns.Add(ColScheduleS);

                SumFunction ScheduleSTotal = new SumFunction();
                ((GridViewDataColumn)gvFixed.Columns["ScheduleS"]).AggregateFunctions.Add(ScheduleSTotal);

                GridViewDataColumn ColScheduleM = new GridViewDataColumn();
                ColScheduleM.DataType = typeof(double);
                ColScheduleM.DataMemberBinding = new Binding("ScheduleM");
                ColScheduleM.Header = "M";
                ColScheduleM.UniqueName = "ScheduleM";
                gvFixed.AutoGenerateColumns = false;
                gvFixed.Columns.Add(ColScheduleM);

                SumFunction ScheduleMTotal = new SumFunction();
                ((GridViewDataColumn)gvFixed.Columns["ScheduleM"]).AggregateFunctions.Add(ScheduleMTotal);

                GridViewDataColumn ColScheduleT = new GridViewDataColumn();
                ColScheduleT.DataType = typeof(double);
                ColScheduleT.DataMemberBinding = new Binding("ScheduleT");
                ColScheduleT.Header = "Total";
                ColScheduleT.UniqueName = "ScheduleT";
                gvFixed.AutoGenerateColumns = false;
                gvFixed.Columns.Add(ColScheduleT);

                SumFunction ScheduleTTotal = new SumFunction();
                ((GridViewDataColumn)gvFixed.Columns["ScheduleT"]).AggregateFunctions.Add(ScheduleTTotal);

                #endregion

                gvFixed.RowLoaded += new EventHandler<RowLoadedEventArgs>(gvFixed_RowLoaded);

                //set the data source for the grid
                gvFixed.ItemsSource = from fs in fixedSystem
                                      where (fs.UnitType == "D" || fs.UnitType == "L") && fs.Owner.Location.ToString() == item.Name
                                      group fs by fs.FixedType into grouping
                                      select new FixedSystem()
                                      {
                                          Owner = new SystemOwner(),
                                          FixedType = grouping.Key,
                                          OnHand = grouping.Sum(fs => fs.OnHand),
                                          FMC = grouping.Sum(fs => fs.FMC),
                                          NMCS = grouping.Sum(fs => fs.NMCS),
                                          NMCM = grouping.Sum(fs => fs.NMCM),
                                          PMCS = grouping.Sum(fs => fs.PMCS),
                                          PMCM = grouping.Sum(fs => fs.PMCM),
                                          FMCPercent = Math.Round(grouping.Average(fs => fs.FMCPercent)),
                                          ScheduleS = grouping.Sum(fs => fs.ScheduleS),
                                          ScheduleM = grouping.Sum(fs => fs.ScheduleM),
                                          ScheduleT = grouping.Sum(fs => fs.ScheduleT)
                                      };

                //set the totals for the grid
                gvFixed.CalculateAggregates();

                item.Items.Add(stackGrid);

            }

            if (pbAviation.Items.Count > 0)
            {
                ((RadPanelBarItem)pbAviation.Items.First()).IsExpanded = true;
            }

        }

[Petar Mladenov]

Hello Nicole,

 I can see only one Column in your XAML:

<Viewbox x:Name="vbViewbox" Visibility="Visible">
           <Grid x:Name="grdViewbox" Margin="5,5,5,5">
               <Grid.RowDefinitions>
                   <RowDefinition Height=".9*" />
                   <RowDefinition Height=".1*" />
               </Grid.RowDefinitions>
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="*" />
               </Grid.ColumnDefinitions>
               <telerik:RadPanelBar x:Name="pbAviation"
                                    Grid.Row="0"
                                    Width="auto"
                                    Margin="12,8,12,20"
                                    ExpandMode="Single"
                                    FontWeight="Bold">
                   <!--  Contents of panel bar inserted programmatically in code behind  -->
               </telerik:RadPanelBar>

I added two more columns and set the middle one to be 50 % of the Width. All changes in the following code are green-coloured:

<Viewbox x:Name="vbViewbox" Visibility="Visible">
           <Grid x:Name="grdViewbox" Margin="5,5,5,5">
               <Grid.RowDefinitions>
                   <RowDefinition Height=".9*" />
                   <RowDefinition Height=".1*" />
               </Grid.RowDefinitions>
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="0.25*" />
                   <ColumnDefinition Width="0.5*" />
                   <ColumnDefinition Width="0.25*" />
               </Grid.ColumnDefinitions>
               <telerik:RadPanelBar x:Name="pbAviation"
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    Width="Auto"
                                    Margin="12,8,12,20"
                                    ExpandMode="Single"
                                    FontWeight="Bold">
                   <!--  Contents of panel bar inserted programmatically in code behind  -->
               </telerik:RadPanelBar>

               <StackPanel Name="stackRectangles"
                           Grid.Row="1"
                           Grid.ColumnSpan="3"
                           Margin="0,12,0,0"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Top"
                           Orientation="Horizontal">
                   <TextBlock Grid.Row="1"
                              Margin="3,0"
                              Foreground="#FF080707">
                       Legend: FMC %
                   </TextBlock>
                   <Rectangle Width="65"
                              Height="17"
                              RadiusX="5"
                              RadiusY="5"
                              Stroke="Black"
                              StrokeThickness="1.5">
                       <Rectangle.Projection>
                           <PlaneProjection CenterOfRotationX="0" CenterOfRotationY="0" />
                       </Rectangle.Projection>
                       <Rectangle.Effect>
                           <telerik:ReflectionEffect />
                       </Rectangle.Effect>
                       <Rectangle.Fill>
                           <LinearGradientBrush x:Name="lgbGreen" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0" EndPoint="0.5,1">
                               <GradientStop Offset="0.759" Color="#FF075207" />
                               <GradientStop Offset="0.056" Color="#FF21C221" />
                           </LinearGradientBrush>
                       </Rectangle.Fill>
                   </Rectangle>
                   <TextBlock Margin="3,0"
                              HorizontalAlignment="Center"
                              Foreground="#FF080707">
                       75-100%
                   </TextBlock>
                   <Rectangle Width="65"
                              Height="17"
                              RadiusX="5"
                              RadiusY="5"
                              Stroke="Black"
                              StrokeThickness="1.5">
                       <Rectangle.Effect>
                           <telerik:ReflectionEffect />
                       </Rectangle.Effect>
                       <Rectangle.Fill>
                           <LinearGradientBrush x:Name="lgbYellow" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0" EndPoint="0.5,1">
                               <GradientStop Offset="0.043" Color="Yellow" />
                               <GradientStop Offset="0.866" Color="#FF898925" />
                               <GradientStop Offset="0.47" Color="#FFC2C246" />
                           </LinearGradientBrush>
                       </Rectangle.Fill>
                   </Rectangle>
                   <TextBlock Margin="3,0"
                              HorizontalAlignment="Center"
                              Foreground="#FF080707">
                       74-60%
                   </TextBlock>
                   <Rectangle Width="65"
                              Height="17"
                              RadiusX="5"
                              RadiusY="5"
                              Stroke="Black"
                              StrokeThickness="1.5">
                       <Rectangle.Fill>
                           <LinearGradientBrush x:Name="lgbRed" StartPoint="0.5,0" EndPoint="0.5,1">
                               <GradientStop Offset="0.72" Color="#FF5C221C" />
                               <GradientStop Offset="0.013" Color="#FFF72E2E" />
                           </LinearGradientBrush>
                       </Rectangle.Fill>
                       <Rectangle.Effect>
                           <telerik:ReflectionEffect />
                       </Rectangle.Effect>
                   </Rectangle>
                   <TextBlock Margin="3,0"
                              HorizontalAlignment="Center"
                              Foreground="#FF080707">
                       59-50%
                   </TextBlock>
                   <Rectangle Width="65"
                              Height="17"
                              RadiusX="5"
                              RadiusY="5"
                              Stroke="Black"
                              StrokeThickness="1.5">
                       <Rectangle.Effect>
                           <telerik:ReflectionEffect />
                       </Rectangle.Effect>
                       <Rectangle.Fill>
                           <LinearGradientBrush x:Name="lgbBlack" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0" EndPoint="0.5,1">
                               <GradientStop Offset="0.543" Color="#FF0C0C0C" />
                               <GradientStop Offset="0.004" Color="#FFA9A7A7" />
                           </LinearGradientBrush>
                       </Rectangle.Fill>
                   </Rectangle>
                   <TextBlock Margin="3,0"
                              HorizontalAlignment="Center"
                              Foreground="Black">
                       0-49%
                   </TextBlock>
               </StackPanel>
           </Grid>
       </Viewbox>

Please let us know if this solution fits in your scenario. All the best,
Petar Mladenov
the Telerik team

[Nicole]

Hi Petar,

I tried setting 3 columns already.  I just tried again, to be sure, but the RadPanelBar still takes up all the width between the margins, even if I add invisible elements in the outside columns.

The customer hasn't noticed the size discrepancy between panels (at least not yet), so we are giving this issue a rest while we work on other concerns.

Thanks,
Nicole

[Petar Mladenov]

Hello Nicole,

 I prepared a video for you showing how I test the last project I sent you. I added a Background to the Grid in order to see how it resizes when I resize the browser. On the other hand, is it possible for you to send us some pictures/drawings which will describe the desired scenario when you come back to this issue? This would be the best way for us to understand the exact requirement and help you find a proper solution. Thank you in advance.

Best wishes,
Petar Mladenov
the Telerik team