Question

As a silverlight newbie, I want to create a boxless readonly checkbox in silverlight4 to show a green checkmark. I don’t manage to get the box invisible/transparent or make the checkmark green, it stays grey.

What I tried:

        cbstatus = new CheckBox();
        cbstatus.IsEnabled = false; // read only
        cbstatus.Visibility = System.Windows.Visibility.Visible;
        cbstatus.Background =  new SolidColorBrush(Colors.Transparent);
        cbstatus.BorderBrush = new SolidColorBrush(Colors.Transparent);
        cbstatus.Foreground = new SolidColorBrush(Colors.Green);

Thanks for any ideas!

Answer 1

You’ll need to override the default template. Add the following style to your App.xaml resources as a starting point:-

<Style x:Key="BorderlessReadOnlyCheckBox" TargetType="CheckBox">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="#FF000000"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="Padding" Value="4,1,0,0"/>
    <Setter Property="IsEnabled" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="CheckBox">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="16"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="1"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked"/>
                            <VisualState x:Name="Indeterminate"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Width="16" Height="16">
                        <Path x:Name="CheckIcon" Margin="1,1,0,1.5" Fill="Green" Stretch="Fill" Opacity="0" Width="10.5" Height="10" Data="M102.03442,598.79645 L105.22962,597.78918 L106.78825,600.42358 C106.78825,600.42358 108.51028,595.74304 110.21724,593.60419 C112.00967,591.35822 114.89314,591.42316 114.89314,591.42316 C114.89314,591.42316 112.67844,593.42645 111.93174,594.44464 C110.7449,596.06293 107.15683,604.13837 107.15683,604.13837 z" FlowDirection="LeftToRight"/>
                    </Grid>
                    <ContentPresenter
                          Grid.Column="1"
                          x:Name="contentPresenter"
                          Content="{TemplateBinding Content}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          Margin="{TemplateBinding Padding}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now you style your checkbox:-

cbstatus = new CheckBox();
cbstatus.Style = (Style)Application.Current.Resources["BorderlessReadOnlyCheckBox"];