Question

I cannot seem to find anyone having a problem similar to this anywhere…

So I have a custom control that inherits from Button. When I don’t apply a default style it loads the generic Button style and everything is fine and dandy. When I do apply a style the control renders as a pure white square without any functionality (clicking doesn’t work, etc.). I’m sure it is something in my style that is messing this up but when I apply the style through a key in XAML it works fine.

My code…

[TemplateVisualState(Name = "Normal", GroupName = "Common"),
TemplateVisualState(Name = "Disabled", GroupName = "Common"),
TemplateVisualState(Name = "Pressed", GroupName = "Common"),
TemplateVisualState(Name = "MouseOver", GroupName = "Common"),
TemplateVisualState(Name = "Alert", GroupName = "AlarmStates"),
TemplateVisualState(Name = "NoAlert", GroupName = "AlarmStates"),
TemplateVisualState(Name = "Warning", GroupName = "AlarmStates")]
public class AlarmButtonControl : Button
{
    /// <summary>
    /// Constructor
    /// </summary>
    public AlarmButtonControl()
    {
        this.DefaultStyleKey = typeof(AlarmButtonControl);
    }
}

and the XAML style is…

<ControlTemplate x:Key="StatusButton" >
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="Common">
                    <VisualStateGroup.Transitions>
                        <VisualTransition From="Pressed" GeneratedDuration="0:0:0.75" To="MouseOver"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Highlight2" d:IsOptimized="True"/>
                            <ColorAnimation Duration="0" To="#BF000000" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Highlight2" d:IsOptimized="True"/>
                            <ColorAnimation Duration="0" To="#33666666" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Base" d:IsOptimized="True"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <Storyboard>
                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Highlight2" d:IsOptimized="True"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Highlight1" d:IsOptimized="True"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Viewbox Stretch="Fill">
                <Grid>
                    <Path x:Name="Base" 
                          StrokeThickness="1.0" 
                          Stroke="#ff000000" 
                          StrokeMiterLimit="1.0" 
                          Fill="{TemplateBinding Background}" Data="F1 M 99.500,99.500 L 0.500,99.500 L 0.500,0.500 L 99.500,0.500 L 99.500,99.500 Z"/>
                    <Rectangle x:Name="Highlight2" Fill="#3F000000" Margin="5" StrokeThickness="1.0" StrokeMiterLimit="1.0" Opacity="0"/>
                    <Path x:Name="Interior" Opacity="0.5" StrokeThickness="1.0" Stroke="#ff191919" StrokeMiterLimit="1.0" Data="F1 M 97.500,97.500 L 2.500,97.500 L 2.500,2.500 L 97.500,2.500 L 97.500,97.500 Z">
                        <Path.Fill>
                            <LinearGradientBrush MappingMode="Absolute" StartPoint="2.500,2.499" EndPoint="97.500,97.499">
                                <LinearGradientBrush.Transform>
                                    <MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,0.000,100.000" />
                                </LinearGradientBrush.Transform>
                                <GradientStop Offset="0.00" Color="#3FFFFFFF"/>
                                <GradientStop Offset="0.151" Color="Transparent"/>
                                <GradientStop Offset="1.00" Color="#BFFFFFFF"/>
                                <GradientStop Color="#53FFFFFF" Offset="0.655"/>
                            </LinearGradientBrush>
                        </Path.Fill>
                    </Path>
                    <Path x:Name="LargeShader" Opacity="0.05" Fill="#ffffffff" Data="F1 M88.334,3.1789145E-07 L88.334,45.334 L0,45.334 C0,45.334 88.334,48.681 88.334,3.1789145E-07 z" Margin="6.333,49.333,5.333,5.284" UseLayoutRounding="False"/>
                    <Path x:Name="SmallShader" Opacity="0.05" Fill="#ffffffff" Data="F1 M74.333664,3.1789145E-07 L74.334,28.334332 L0,28.334332 C0,28.334332 60.000332,29.333 74.333664,3.1789145E-07 z" Height="28.339" Margin="20.333,0,5.333,5.328" UseLayoutRounding="False" VerticalAlignment="Bottom"/>
                    <Rectangle x:Name="Highlight1" Fill="#3FC0C0C0" Margin="5" StrokeThickness="1.0" StrokeMiterLimit="1.0" Opacity="0"/>
                </Grid>
            </Viewbox>
            <ContentPresenter x:Name="contentPresenter"
                              Height="{TemplateBinding Height}" 
                              Width="{TemplateBinding Width}" 
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                              Margin="5"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </ControlTemplate>

Any help would be greatly appreciated.

Answer 1

You haven’t include a Style just a ControlTemplate. Also for a default style you should be assiging the TargetType property of the style only. Something like the follow ought to be in the themes\generic.xaml file:

<Style TargetType="local:AlarmButtonControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:AlarmButtonControl">
                <!-- Your template contents here -->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>