I’m experiencing a very strange issue where I cannot see a Custom WPF control in the visual studio designer (as if it cannot find the appropriate style) but the Style shows up correctly in the Property grid under the Style property showing Key: Default at the bottom and also showing a picture of my Control styled correctly with Content and Text set appropriately.
I guess my question is pretty obvious, but if my control is able to find the style in the property grid, why doesn’t it show up properly in the designer?
My style is declared in the Themes/Generic.xaml file and I am calling DefaultStyleKeyProperty.OverrideMetadata(typeof(DragDockPanel), new FrameworkPropertyMetadata(typeof(DragDockPanel))); in the static constructor of my control. However, I notice that my overridden function of OnApplyTemplate() isn’t getting called at all.
Here is my style located in Generic.xaml:
<Style TargetType="local:DragDockPanel">
<Setter Property="Background"
Value="#ff000000" />
<Setter Property="BorderBrush"
Value="#ff333333" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:DragDockPanel">
<Grid>
<local:OuterGlowBorder OuterGlowOpacity="0.4"
OuterGlowSize="15"
CornerRadius="3,3,3,3"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<local:InnerGlowBorder InnerGlowOpacity="1"
CornerRadius="3,3,3,3"
InnerGlowColor="#11ffffff"
InnerGlowSize="15,15,0,0"
Margin="0"
Padding="2"
ClipContent="True"
Background="Transparent"
BorderThickness="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="1"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Border Background="#7f000000"
Margin="-2"
Padding="3">
<Grid>
<Border x:Name="GripBarElement"
CornerRadius="3,3,0,0"
Background="#00ffffff"
VerticalAlignment="Top"
MinHeight="30"
Cursor="Hand"
Margin="0,0,32,0"
IsHitTestVisible="{TemplateBinding DraggingEnabled}">
<Grid>
<Rectangle Opacity="0.5">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="6.58300018310547,6.08300018310547"
StartPoint="2.31500005722046,1.81500005722046"
SpreadMethod="Repeat"
MappingMode="Absolute">
<GradientStop Color="#FFAFAFAF"
Offset="0" />
<GradientStop Color="#00FFFFFF"
Offset="1" />
<GradientStop Color="#00FFFFFF"
Offset="0.339" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}" />
</Grid>
</Border>
<ToggleButton x:Name="MaximizeToggleButton"
VerticalAlignment="Top"
HorizontalAlignment="Right"
IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, Path=IsMaximized}"
Margin="0,5,5,0"
Width="20"
Height="20"
Cursor="Hand">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border Background="#7F000000"
CornerRadius="2,2,2,2">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled" />
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="rectangle"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00"
Value="0.6" />
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000"
Value="0.3" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="rectangle"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00"
Value="0.15" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="checkedArrow"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00"
Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="uncheckedArrow"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard />
</VisualState>
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Height="Auto"
Width="Auto">
<Border Margin="0,0,0,0"
BorderBrush="#FFFFFFFF"
BorderThickness="1,1,1,1"
CornerRadius="1,1,1,1"
Width="16"
Height="16">
<Grid>
<Path HorizontalAlignment="Right"
Margin="0,1.24500000476837,1.70700001716614,5.375"
x:Name="uncheckedArrow"
VerticalAlignment="Stretch"
Width="6.752"
Stretch="Fill"
Stroke="#FFFFFFFF"
Data="M0.5,1.005 L6.2509999,1.005 M6.25,6.8800006 L6.25,0.5 M6.2520003,1.0880001 L0.50000024,6.8800001" />
<Path HorizontalAlignment="Stretch"
Margin="1.45899999141693,5.74200010299683,5.78900003433228,0.878000020980835"
x:Name="checkedArrow"
VerticalAlignment="Stretch"
Stretch="Fill"
Stroke="#FFFFFFFF"
Data="M0.5,1.005 L6.2509999,1.005 M6.25,6.8800006 L6.25,0.5 M6.2520003,1.0880001 L0.50000024,6.8800001"
Opacity="0"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform Angle="180" />
<TranslateTransform />
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Border>
<Rectangle Fill="#FFFFFFFF"
RadiusX="2"
RadiusY="2"
Margin="1,1,1,1"
Opacity="0"
x:Name="rectangle" />
</Grid>
</Border>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
</Grid>
</Border>
</Grid>
</local:InnerGlowBorder>
</local:OuterGlowBorder>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<local:DropShadowTextBlock Text="{Binding}"
FontFamily="Verdana"
FontSize="14"
VerticalAlignment="Center"
Margin="5"
DropShadowDistance="3"
DropShadowAngle="45"
Foreground="#ffffffff" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
This control uses other Custom controls as well, which are all declared in Generic.xaml, and have their DefaultStyleKeyProperty set. If you want me to post the styles for these custom controls I can, but for brevifty I have left them out.
Here’s how I’m calling the control:
<bl:DragDockPanelHost x:Name="dragDockPanelTest"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Visibility="Visible"
Margin="0,0,0,0">
<bl:DragDockPanel Name="Test1"
Header="TEST"
Content="WHERE AM I?"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Visibility="Visible">
</bl:DragDockPanel>
</bl:DragDockPanelHost>
Any help would be greatly appreciated, I’m completely out of ideas at this point. Thanks!
Edit:
Here’s some more info that may help; I added a style for the DragDropPanelHost to my Generic.xaml which very simply changes the canvas Background color. However, the background color does not change on the DragDropPanelHost in the designer (after recompiling etc.).
Here’s the style:
<Style TargetType="local:DragDockPanelHost">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Canvas Background="BLUE">
</Canvas>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
It seems something is very messed up here…For some reason the Styles aren’t loading at all…
Question solved by Brian Lagunas via msdn:
http://social.msdn.microsoft.com/Forums/pl-PL/wpf/thread/8e45f931-c6e3-4a70-91e5-39ef5c2a0b41?prof=required
“I saw the problem right away. You didn’t define a Template for your DragDockPanelHost. Change it to this for example:
“