[Solved] LayoutControlTabGroup set background color

[Thomas]

In a RadLayoutControl I use LayoutControlTabGroup.
I can set the background of the Item's but not on the "empty" space, is there some way to do that.

  <telerik:RadLayoutControl >
      <telerik:LayoutControlTabGroup Background="White">
          <telerik:LayoutControlTabGroupItem Header="Tab 1" Background="Red">
              <Button Content="Item 1" />
          </telerik:LayoutControlTabGroupItem>
          <telerik:LayoutControlTabGroupItem Header="Tab 2"  Background="Blue">
              <Button Content="Item 2" />
          </telerik:LayoutControlTabGroupItem>
      </telerik:LayoutControlTabGroup>
  </telerik:RadLayoutControl>

 

[Stenly]

Hello Thomas,

The background is represented by a Border element inside the default ControlTemplate of the LayoutControlTabGroup element, which has its Background property set to a resource. To change it, you could either extract the ControlTemplate or retrieve the element via code and manually modify it.

With this in mind, you could follow the second suggestion, for which a custom attached property could be introduced, which will subscribe to the Loaded event of the LayoutControlTabGroup and retrieve the Border element via the ChildrenOfType extension method. On the returned element, you could set the Background property to the desired color.

The following code snippets showcase this suggestion's implementation:

<telerik:RadLayoutControl >
	<telerik:LayoutControlTabGroup local:LayoutControlTabGroupExtensions.BackgroundBrush="White">
		<telerik:LayoutControlTabGroupItem Header="Tab 1" Background="Red">
			<Button Content="Item 1" />
		</telerik:LayoutControlTabGroupItem>
		<telerik:LayoutControlTabGroupItem Header="Tab 2"  Background="Blue">
			<Button Content="Item 2" />
		</telerik:LayoutControlTabGroupItem>
	</telerik:LayoutControlTabGroup>
</telerik:RadLayoutControl>

public class LayoutControlTabGroupExtensions
{
    public static SolidColorBrush GetBackgroundBrush(DependencyObject obj)
    {
        return (SolidColorBrush)obj.GetValue(BackgroundBrushProperty);
    }

    public static void SetBackgroundBrush(DependencyObject obj, SolidColorBrush value)
    {
        obj.SetValue(BackgroundBrushProperty, value);
    }

    public static readonly DependencyProperty BackgroundBrushProperty =
		DependencyProperty.RegisterAttached("BackgroundBrush", typeof(SolidColorBrush), typeof(LayoutControlTabGroupExtensions), new PropertyMetadata(Brushes.Black, OnBackgroundBrushChanged));

	private static void OnBackgroundBrushChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
	{
		LayoutControlTabGroup layoutControlTabGroup = (LayoutControlTabGroup)d;

		layoutControlTabGroup.Loaded += LayoutControlTabGroup_Loaded;
	}

	private static void LayoutControlTabGroup_Loaded(object sender, RoutedEventArgs e)
	{
		LayoutControlTabGroup layoutControlTabGroup = (LayoutControlTabGroup)sender;

        Border border = layoutControlTabGroup.ChildrenOfType<Border>().FirstOrDefault();

        if (border != null)
        {
            border.Background = GetBackgroundBrush(layoutControlTabGroup);
		}
	}
}

The produced result is as follows:

With this being said, would it be possible to give this suggestion a try?

Regards,
Stenly
Progress Telerik

[Thomas]

Thanks that worked great!