Silverlight WrapPanel RadTreeView Cut-Off by 10 pixels

Question

Hello and thanks for your help in advance. I have two panels, one with a series of the buttons and a Telerik RadTreeView boxed by a border, and on the right another border encompassing a grid and some other controls. Everything is sized properly as I resize the page etc however for some reason there are about 10 pixels being cut-off and cannot think of why. If it was a page container issue it would affect the border on the right side of the page. So I'm thinking it must have something to do with the RadTreeView or WrapPanel I'm using. (Boiled-down code is right after the image below)

Left black border shows the 10 pixels being cut-off, while the black border on the right shows the border to the grid extending the full length of the page.

<!-- Code -->
<controls:ViewBase xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                             xmlns:WindowControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
                             xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
                             xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
                             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>

  <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" x:Name="titleTxt" Text="My Title" Style="{StaticResource textBlockHeaderStyle}"/>

  <toolkit:WrapPanel Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" MaxWidth="400" Margin="2,2,2,10">   

        <!-- Some Buttons Here.... -->

            <telerik:RadTreeView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SelectionMode="Single" IsLineEnabled="True"
                               ItemsOptionListType="None" IsOptionElementsEnabled="True" IsDragDropEnabled="False"
                               IsRootLinesEnabled="True" Margin="0,5,0,0" IsTriStateMode="True" FontSize="11" BorderThickness="1" BorderBrush="Black"/>

  </toolkit:WrapPanel>

  <sdk:GridSplitter Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Stretch" Style="{StaticResource gridSplitterStyle}"/>

  <Border Grid.Row="1" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                Background="Transparent" BorderThickness="1" BorderBrush="Black">
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

      <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>

      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>

      <Grid Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">

        <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid Grid.Row="0" Grid.Column="0">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
          </Grid.ColumnDefinitions>

            <!-- Some Buttons Here.... -->

        </Grid>

        <telerik:RadGridView  Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

      </Grid>

    </Grid>
  </Border>

</Grid>

So we can see you have a border set on the control itself, and your space exists within it. That leaves the style templates for the controls itself you'll have to dig through to find your culprit. Inside your treeview style template there's various other parts like ToggleButton's and Expander etc, you'll just have to go pull off the right Margins set on things in there to find what's causing the space, may have to drill down several levels to find it. — Chris W., Nov 17 '14 at 17:28
@Chris I guess I'm not following, I'm not using a custom style or template. Simply the default stylings that came from Telerik (aside from adding the border and the border brush). — Matt L, Nov 17 '14 at 17:51
Right, so somewhere in the default template, either like the treeviewitem, or the ToggleButton content that acts as the item, or something else in the default template has either hard coded margin or isn't stretching, so you'll have to dig into the control template(s) to find where. — Chris W., Nov 17 '14 at 18:03

score 0 · Accepted Answer · answered Nov 17 '14 at 20:57

Didn't have time nor the inclination to look into the underlying template/styling for either the RadTreeView or the WrapPanel. I was able to fix the issue and maintain the layout by simply putting the RadTreeView in it's own row and leaving just the buttons and other controls in the wrap panel. Suppose it is simpler this way anyway.

Definitely must be a bug or compatibility issue with these two controls that will probably go unsolved.

Silverlight WrapPanel RadTreeView Cut-Off by 10 pixels

1 Answers1