ControlTemplate MahApps.Metro VisualStateManager State Transition Problems

Question

I am experimenting with the radio button control template from MahApps.Metro. My App.xaml looks the same as in http://mahapps.com/guides/quick-start.html

I copied the control template via VS context menu, my window looks like this:

<controls:MetroWindow x:Class="MahAppsRadioButtonControlTemplateWrapTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
        Title="MainWindow" Height="350" Width="525">
    <controls:MetroWindow.Resources>
        <Style x:Key="RBStyle" TargetType="{x:Type RadioButton}">
            <Setter Property="Foreground" Value="{DynamicResource LabelTextBrush}"/>
            <Setter Property="FontSize" Value="{DynamicResource ContentFontSize}"/>
            <Setter Property="FontFamily" Value="{DynamicResource ContentFontFamily}"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="6,0,0,0"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                     <!-- Uncomment the line below to break the radio button -->
                     <!-- <Grid> -->
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition x:Name="LeftCol" Width="18"/>
                                <ColumnDefinition x:Name="RightCol" Width="*"/>
                            </Grid.ColumnDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="hover"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="pressed"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.55" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="disabled"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Checked1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unchecked"/>
                                    <VisualState x:Name="Indeterminate"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="focused"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="PART_CHECKBOX">
                                <Rectangle Fill="{DynamicResource TransparentWhiteBrush}" Margin="-6,0"/>
                                <Ellipse x:Name="normal" Fill="{DynamicResource WhiteBrush}" Height="18" Opacity="1" Stroke="{DynamicResource CheckBoxBrush}" StrokeThickness="1" Width="18"/>
                                <Ellipse x:Name="hover" Fill="{DynamicResource WhiteBrush}" Height="18" Opacity="0" Stroke="{DynamicResource CheckBoxMouseOverBrush}" StrokeThickness="1" Width="18"/>
                                <Ellipse x:Name="pressed" Fill="{DynamicResource WhiteBrush}" Height="18" Opacity="0" Stroke="{DynamicResource HighlightBrush}" StrokeThickness="1" Width="18"/>
                                <Ellipse x:Name="focused" Fill="{DynamicResource WhiteBrush}" Height="18" Opacity="0" Stroke="{DynamicResource HighlightBrush}" StrokeThickness="1" Width="18"/>
                                <Ellipse x:Name="Checked1" Fill="{DynamicResource HighlightBrush}" Height="10" Opacity="0" Width="10"/>
                                <Ellipse x:Name="disabled" Fill="{DynamicResource SemiTransparentWhiteBrush}" Height="18" Opacity="0" StrokeThickness="1" Width="18"/>
                            </Grid>
                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                     <!-- Uncomment the line below to break the radio button -->
                     <!-- </Grid> -->
                        <ControlTemplate.Triggers>
                            <Trigger Property="controls:ControlsHelper.ContentDirection" Value="RightToLeft">
                                <Setter Property="Padding" Value="0,0,6,0"/>
                                <Setter Property="Width" TargetName="LeftCol" Value="*"/>
                                <Setter Property="Width" TargetName="RightCol" Value="18"/>
                                <Setter Property="Grid.Column" TargetName="PART_CHECKBOX" Value="1"/>
                                <Setter Property="Grid.Column" TargetName="contentPresenter" Value="0"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </controls:MetroWindow.Resources>
    <Grid>
        <StackPanel>
            <RadioButton Style="{DynamicResource RBStyle}">Foo</RadioButton>
            <RadioButton>Bar</RadioButton>
            <RadioButton>Baz</RadioButton>
        </StackPanel>
    </Grid>
</controls:MetroWindow>

If I wrap the outer Grid of the control template within another Grid control, the radio button works normally but the checked mark never shows.

Can someone explain me what's going on?

Answer 1

So like I was saying, it's an interesting quirk whereby the element (in this case your transition targets) that's in a ControlTemplate will only inherit from the outer-most parent FrameworkElement . Which, is one of those things that can really confuse ya when you're sitting there thinking "wtf? all I did was add a damn Grid around it..." Right?

For more info checkout this doc article about Changing the Visual Structure of a Control and you can get the full explanation.

Anyway, glad it helped!