WP7dev

Windows Phone 7 development tips

Custom Checkboxes using images

Styling Checkboxes with custom images is quite easy, simply apply this style :

ImageRadioButtonStyle Resource :


<Style x:Key=”ImageRadioButtonStyle” TargetType=”CheckBox”>

    <Setter Property=”Margin” Value=”0,0,0,0″/>

    <Setter Property=”Template”>

        <Setter.Value>

            <ControlTemplate TargetType=”CheckBox”>

                <Grid Background=”Transparent”>

                    <VisualStateManager.VisualStateGroups>

                        <VisualStateGroup x:Name=”CommonStates”>

                            <VisualState x:Name=”Normal”/>

                            <VisualState x:Name=”MouseOver”/>

                            <VisualState x:Name=”Pressed”/>

                            <VisualState x:Name=”Disabled”>

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=”Foreground” Storyboard.TargetName=”ContentContainer”>

                                        <DiscreteObjectKeyFrame KeyTime=”0″ Value=”{StaticResource PhoneDisabledBrush}”/>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name=”CheckStates” >

                            <VisualState x:Name=”Checked”>

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=”Visibility” Storyboard.TargetName=”UnCheckMark”>

                                        <DiscreteObjectKeyFrame KeyTime=”0″>

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Collapsed</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=”Visibility” Storyboard.TargetName=”CheckRect”>

                                        <DiscreteObjectKeyFrame KeyTime=”0″>

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Visible</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name=”Unchecked”>

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=”Visibility” Storyboard.TargetName=”CheckRect”>

                                        <DiscreteObjectKeyFrame KeyTime=”0″>

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Collapsed</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=”Visibility” Storyboard.TargetName=”UnCheckMark”>

                                        <DiscreteObjectKeyFrame KeyTime=”0″>

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Visible</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name=”Indeterminate”>

                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

 

                    <Grid Margin=”{StaticResource PhoneTouchTargetLargeOverhang}”>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width=”32″/>

                            <ColumnDefinition Width=”*”/>

                        </Grid.ColumnDefinitions>

                        <Image x:Name=”UnCheckMark” Source=”/ProjectName;component/Resources/images/btn_radio_off.png” Visibility=”Collapsed” Margin=”0,4,0,0″></Image>

                        <Image x:Name=”CheckRect” Source=”/ProjectName;component/Resources/images/btn_radio_on.png” Margin=”0,4,0,0″></Image>

                        <ContentControl x:Name=”ContentContainer” ContentTemplate=”{TemplateBinding ContentTemplate}” Content=”{TemplateBinding Content}” Grid.Column=”1″ Foreground=”{TemplateBinding Foreground}” HorizontalContentAlignment=”{TemplateBinding HorizontalContentAlignment}” Margin=”12,0,0,0″ Padding=”{TemplateBinding Padding}” VerticalContentAlignment=”{TemplateBinding VerticalContentAlignment}”/>

                    </Grid>

                    <Grid>

                    </Grid>

                </Grid>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>


This will use 2 images : /Resources/images/btn_radio_off.png and /Resources/images/btn_radio_on.png (remember to set their build action to Resource) instead of the standard checkboxes.

To apply this to any Checkbox, simply set the Style property in the XAML file :


<CheckBox x:Name=”TestCheckbox” IsChecked=”{Binding IsTest, Mode=TwoWay,

          Converter={StaticResource BoolInverterConverter}}”

          Style=”{StaticResource ImageRadioButtonStyle}”>


Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: