I have a rather weird problem with a control that doesn’t want to resize. Bellow is the XAML + Code behind of the control written in SL4.
So to explain things rather shortly, the control has 4 regions – Header, Subheader, BodyContent, and Footer. Each region is represented by a “Border” element which acts as a container for it’s nested children.
This control is merely to unify the look and feel of my application and doesn’t really do anything as far as logic.
My issue is that if I want to use that control i have to explicitly set it’s width. When setting it’s width with Element-to-element binding (to a parent container) the control doesn’t even render.
I also tried to create a ” public new double Width/Height” properties, where I’d set the width of the control itself and the width of the “ControlBorder” element. Using this properties also makes the control not render at runtime :(. I also tried wiring the Size Changed event, but it kept giving me cyclic errors!
Any ideas on how to make this control more “resizable”? The intended application is using it in a grid that employs a Grid Splitter. It’s absolutely imperative that the control knows how to resize itself!
Any help would be greatly appreciated!
Thanks
Martin
<UserControl xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="SL4.Learning.LayoutPanel"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<SolidColorBrush x:Key="DarkBrush" Color="#7B4C4C4B"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="ControlBorder" Grid.Row="0" Grid.Column="0" BorderBrush="{StaticResource DarkBrush}" BorderThickness="2" CornerRadius="4" Margin="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="LayoutHeaderRow" Height="30"/>
<RowDefinition x:Name="LayoutSubHeaderRow" Height="30"/>
<RowDefinition x:Name="LayoutContentRow" Height="*"/>
<RowDefinition x:Name="LayoutFooterRow" Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle x:Name="PnlHeaderBackground" Grid.Row="0" Grid.Column="0" Fill="{StaticResource DarkBrush}"/>
<toolkit:DockPanel Grid.Row="0" Grid.Column="0" LastChildFill="False">
<TextBlock x:Name="LblHeaderTitle" Text="Header Text" FontSize="12" Foreground="White" toolkit:DockPanel.Dock="Left" VerticalAlignment="Center" Margin="4,0,0,0"/>
<Border x:Name="HeaderBorder" toolkit:DockPanel.Dock="Right" BorderThickness="0" BorderBrush="Transparent" Margin="0" CornerRadius="0">
</Border>
</toolkit:DockPanel>
<Border x:Name="SubHeaderBorder" Grid.Row="1" Grid.Column="0" BorderThickness="0" BorderBrush="Transparent" Margin="0" CornerRadius="0">
</Border>
<Border x:Name="ContentBorder" Grid.Row="2" Grid.Column="0" BorderThickness="0" BorderBrush="Transparent" Margin="0" CornerRadius="0">
</Border>
<Border x:Name="FooterBorder" Grid.Row="3" Grid.Column="0" BorderThickness="0" BorderBrush="Transparent" Margin="0" CornerRadius="0">
</Border>
</Grid>
</Border>
</Grid>
</UserControl>
And the code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Data;
namespace SL4.Learning
{
public partial class LayoutPanel : UserControl
{
public static readonly DependencyProperty BorderRadiusProperty = DependencyProperty.Register("BorderRadius", typeof(CornerRadius), typeof(KeystoneContentControl), null);
public static readonly DependencyProperty HeaderTextProperty = DependencyProperty.Register("HeaderText", typeof(string), typeof(KeystoneContentControl), null);
public static readonly DependencyProperty HeaderBackgroundProperty = DependencyProperty.Register("HeaderBackground", typeof(Brush), typeof(KeystoneContentControl), null);
public static readonly DependencyProperty HeaderForegroundProperty = DependencyProperty.Register("HeaderForeground", typeof(Brush), typeof(KeystoneContentControl), null);
public static readonly DependencyProperty HeaderFontSizeProperty = DependencyProperty.Register("HeaderFontSize", typeof(double), typeof(KeystoneContentControl), null);
public static readonly DependencyProperty HeaderFontFamilyProperty = DependencyProperty.Register("HeaderFontFamily", typeof(FontFamily), typeof(KeystoneContentControl), null);
public static readonly DependencyProperty HeaderFontWeightProperty = DependencyProperty.Register("HeaderFontWeight", typeof(FontWeight), typeof(KeystoneContentControl), null);
public static readonly DependencyProperty HeaderFontStyleProperty = DependencyProperty.Register("HeaderFontStyle", typeof(FontStyle), typeof(KeystoneContentControl), null);
public static readonly DependencyProperty HeaderFontStretchProperty = DependencyProperty.Register("HeaderFontStretch", typeof(FontStretch), typeof(KeystoneContentControl), null);
public static readonly DependencyProperty HeaderContentProperty = DependencyProperty.Register("HeaderContent", typeof(UIElement), typeof(KeystoneContentControl), null);
public static readonly DependencyProperty SubHeaderContentProperty = DependencyProperty.Register("SubHeaderContent", typeof(UIElement), typeof(KeystoneContentControl), null);
public static readonly DependencyProperty BodyContentProperty = DependencyProperty.Register("BodyContent", typeof(UIElement), typeof(KeystoneContentControl), null);
public static readonly DependencyProperty FooterContentProperty = DependencyProperty.Register("FooterContent", typeof(UIElement), typeof(KeystoneContentControl), null);
public KeystoneContentControl()
{
InitializeComponent();
}
public new double Width
{
get { return this.Width; }
set
{
this.Width = value;
this.ControlBorder.Width = value;
}
}
public new double Height
{
get { return this.Height; }
set
{
this.Height = value;
this.ControlBorder.Height = value;
}
}
public new Brush BorderBrush
{
get { return this.ControlBorder.BorderBrush; }
set { this.ControlBorder.BorderBrush = value; }
}
public new Thickness BorderThickness
{
get { return this.ControlBorder.BorderThickness; }
set { this.ControlBorder.BorderThickness = value; }
}
public CornerRadius BorderRadius
{
get{ return (CornerRadius)this.GetValue(KeystoneContentControl.BorderRadiusProperty); }
set
{
this.SetValue(KeystoneContentControl.BorderRadiusProperty, value);
this.ControlBorder.CornerRadius = value;
}
}
public Brush HeaderBackground
{
get{ return (Brush)this.GetValue(KeystoneContentControl.HeaderBackgroundProperty); }
set
{
this.SetValue(KeystoneContentControl.HeaderBackgroundProperty, value);
this.PnlHeaderBackground.Fill = value;
}
}
public Brush HeaderForeground
{
get{ return (Brush)this.GetValue(KeystoneContentControl.HeaderForegroundProperty); }
set
{
this.SetValue(KeystoneContentControl.HeaderForegroundProperty, value);
this.LblHeaderTitle.Foreground = value;
}
}
public double HeaderFontSize
{
get { return (double)this.GetValue(KeystoneContentControl.HeaderFontSizeProperty); }
set
{
this.LblHeaderTitle.FontSize = value;
}
}
public FontFamily HeaderFontFamily
{
get { return (FontFamily)this.GetValue(KeystoneContentControl.HeaderFontFamilyProperty); }
set
{
this.SetValue(KeystoneContentControl.HeaderFontFamilyProperty, value);
this.LblHeaderTitle.FontFamily = value;
}
}
public FontWeight HeaderFontWeight
{
get{ return (FontWeight)this.GetValue(KeystoneContentControl.HeaderFontWeightProperty); }
set
{
this.SetValue(HeaderFontWeightProperty, value);
this.LblHeaderTitle.FontWeight = value;
}
}
public FontStyle HeaderFontStyle
{
get { return (FontStyle)this.GetValue(KeystoneContentControl.HeaderFontStyleProperty); }
set
{
this.SetValue(KeystoneContentControl.HeaderFontStyleProperty, value);
this.LblHeaderTitle.FontStyle = value;
}
}
public FontStretch HeaderFontStretch
{
get { return (FontStretch)this.GetValue(KeystoneContentControl.HeaderFontStretchProperty); }
set
{
this.SetValue(KeystoneContentControl.HeaderFontStretchProperty, value);
this.LblHeaderTitle.FontStretch = value;
}
}
public string HeaderText
{
get { return (string)this.GetValue(KeystoneContentControl.HeaderTextProperty); }
set
{
this.SetValue(KeystoneContentControl.HeaderTextProperty, value);
this.LblHeaderTitle.Text = value;
}
}
public UIElement HeaderContent
{
get{ return (UIElement)this.GetValue(KeystoneContentControl.HeaderContentProperty); }
set
{
this.SetValue(KeystoneContentControl.HeaderContentProperty, value);
this.HeaderBorder.Child = value;
}
}
public UIElement SubHeaderContent
{
get{ return (UIElement)this.GetValue(KeystoneContentControl.SubHeaderContentProperty); }
set
{
this.SetValue(KeystoneContentControl.SubHeaderContentProperty, value);
this.SubHeaderBorder.Child = value;
}
}
public UIElement BodyContent
{
get { return (UIElement)this.GetValue(KeystoneContentControl.BodyContentProperty); }
set
{
this.SetValue(KeystoneContentControl.BodyContentProperty, value);
this.ContentBorder.Child = value;
}
}
public UIElement FooterContent
{
get{ return (UIElement)this.GetValue(KeystoneContentControl.FooterContentProperty); }
set
{
this.SetValue(KeystoneContentControl.FooterContentProperty, value);
this.FooterBorder.Child = value;
}
}
}
}
EDIT: Bellow is the usage of this user control on a page
<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="SL4.Learning.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="600"
d:DesignWidth="800"
xmlns:my="clr-namespace:SL4.Learning">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftCol" />
<ColumnDefinition x:Name="RightCol" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowHeight" />
</Grid.RowDefinitions>
<my:LayoutPanel Grid.Row="0" Grid.Column="0" Width="{Binding ElementName=LeftCol, Path=ActualWidth}" HorizontalAlignment="Left" x:Name="PnlLayout" VerticalAlignment="Top">
<my:LayoutPanel.SubHeaderContent>
<TextBlock x:Name="SubHeaderLabel" Text="SubHeader" FontWeight="Bold" VerticalAlignment="Center"/>
</my:LayoutPanel.SubHeaderContent>
<my:LayoutPanel.BodyContent>
<TextBlock x:Name="LblContentText" Text="BodyContent" VerticalAlignment="Center"/>
</my:LayoutPanel.BodyContent>
<my:LayoutPanel.FooterContent>
<TextBlock x:Name="LblFooterText" Text="Footer" VerticalAlignment="Center"/>
</my:LayoutPanel.FooterContent>
</my:LayoutPanel>
</Grid>
</UserControl>
The sizing of a user control is not set to stretch by default which it would need (as your outer grid row/col size is set to “star”).
It is an option where you insert your control. Set HorizontalAlignment and VerticalAlignment to Stretch on the instance of the SL4.Learning.LayoutPanel objects in your outer page.