CODEWITHSUNDEEP
c#wpfwpf-controls
codematrix
codematrix

Reputation: 1611

Issues with WPF RadioButton control template

I am using below Control Template for my Radio Button. I have an issue with this code. Noticed CheckMark doesn't get collapsed when Radio Button is unchecked. Any help is appreciated.

   <ControlTemplate x:Key="RadioButtonControlTemplate" TargetType="{x:Type RadioButton}">
        <BulletDecorator x:Name="bulletDecorator" SnapsToDevicePixels="True" Background="Transparent">
            <BulletDecorator.Bullet>
                <Grid Width="30" 
              Height="30" >
                    <Ellipse x:Name="Border"  
                Fill="{StaticResource NormalBrush}"
                StrokeThickness="3"
                Stroke="{StaticResource NormalBorderBrush}" />
                    <Ellipse x:Name="CheckMark"
                Margin="9"
                Fill="{StaticResource GlyphBrush}" />
                </Grid>
            </BulletDecorator.Bullet>
            <ContentPresenter Margin="4,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" RecognizesAccessKey="True"></ContentPresenter>
        </BulletDecorator>
        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="False">
                <Setter Property="Visibility" TargetName="CheckMark" Value="Collapsed"/>
            </Trigger>
            <Trigger Property="HasContent" Value="True">
                <Setter Property="FocusVisualStyle">
                    <Setter.Value>
                        <Style>
                            <Setter Property="Control.Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="14,0,0,0" SnapsToDevicePixels="True"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="Padding" Value="2,0,0,0"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Opacity" TargetName="bulletDecorator" Value="0.2"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

Upvotes: 0

Views: 2668

Answers (1)

Sheridan
Sheridan

Reputation: 69959

Your code is working just fine. I replaced your resource Brushes because you didn't provide them in your code, but using this basic example, I could see that the RadioButtons do work... you may need to sort out the label though, because they are disconnected from the 'check marks':

<ControlTemplate x:Key="RadioButtonControlTemplate" TargetType="{x:Type RadioButton}">
    <BulletDecorator x:Name="bulletDecorator" SnapsToDevicePixels="True" Background="Transparent">
        <BulletDecorator.Bullet>
            <Grid Width="30" Height="30">
                <Ellipse x:Name="Border" Fill="Red" StrokeThickness="3" Stroke="Black" />
                <Ellipse x:Name="CheckMark" StrokeThickness="1" Margin="9" Fill="Green" />
            </Grid>
        </BulletDecorator.Bullet>
        <ContentPresenter Margin="4,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" RecognizesAccessKey="True"></ContentPresenter>
    </BulletDecorator>
    <ControlTemplate.Triggers>
        <Trigger Property="IsChecked" Value="False">
            <Setter Property="Visibility" TargetName="CheckMark" Value="Collapsed"/>
            <Setter Property="Stroke" TargetName="CheckMark" Value="Blue"/>
        </Trigger>
        <Trigger Property="HasContent" Value="True">
            <Setter Property="FocusVisualStyle">
                <Setter.Value>
                    <Style>
                        <Setter Property="Control.Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="14,0,0,0" SnapsToDevicePixels="True"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="Padding" Value="2,0,0,0"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Opacity" TargetName="bulletDecorator" Value="0.2"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

...

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <RadioButton Template="{StaticResource RadioButtonControlTemplate}" Content="Yes" />
    <RadioButton Template="{StaticResource RadioButtonControlTemplate}" Content="No" />
</StackPanel>

Here's what it looks like (sorry about the horrible colours):

enter image description here

Upvotes: 1

Related Questions