WP7 vs WP8 Checkbox Style Changes

Hey. I had a small problem yesterday. Minor annoyance to be exact.

What were you trying to do?
Copy paste a WP7 control’s XAML, as is, to be used in a WP8 app.

What happened?
It didn’t work as is. A built-in control’s default style changed in WP8

Really? Which one?
The Checkbox. Well here, see for yourself :

WP7_WP8_Checkbox_Diff

What the what?? How’d that happen?
I think they just changed the controls style. Just like that.
Wait, i have a WinMerge report of the style differences as well here (D/L the html file and open it)

Tip: Open up Blend and click “Edit Template” on the Checkbox to get a copy of its style. Be sure
to do it inside the correct project each time.

Oh i see. How’d that make you feel?
I was a little bummed out..

I was bummed out

Why?
Why? Cause i am lazy and that’s extra work i didn’t want to do.

Relax. It happens. Why would Microsoft do that anyways?
Hell if i know..

Hell if i know

So what are you planning on doing?
Well, I don’t care for the new style. I want to keep the old one. At first i thought I’d make an App-wide StaticResource out of the old style.
Turns out that won’t seem to work easily. Here’s the exception i got by using the old style

CheckBoxStyleException

The new Checkbox doesn’t seem to like it’s old style anymore… Stay tuned for the solution.

-START UPDATE (WITH FIX AND BONUS TOOL) :
The fact that the old style didn’t immediately work on WP8 had to do obviously with a bunch
of missing or changed styles. Well after some dirty work here is the WP7-Like CheckBox Style for WP8 that makes it look like it did on WP7 WP7CheckBoxStyle.xaml.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Color x:Key="WP7PhoneRadioCheckBoxCheckDisabledColor">#66000000</Color>
    <Color x:Key="WP7PhoneRadioCheckBoxDisabledColor">#66FFFFFF</Color>
    <Color x:Key="WP7PhoneRadioCheckBoxPressedBorderColor">#FFFFFFFF</Color>
    <Color x:Key="WP7PhoneRadioCheckBoxColor">#BFFFFFFF</Color>
    <Color x:Key="WP7PhoneRadioCheckBoxPressedColor">#FFFFFFFF</Color>
    <Color x:Key="WP7PhoneRadioCheckBoxCheckColor">#FF000000</Color>
    <SolidColorBrush x:Key="WP7PhoneRadioCheckBoxBrush" Color="{StaticResource WP7PhoneRadioCheckBoxColor}"/>
    <SolidColorBrush x:Key="WP7PhoneRadioCheckBoxCheckDisabledBrush" Color="{StaticResource WP7PhoneRadioCheckBoxCheckDisabledColor}"/>
    <SolidColorBrush x:Key="WP7PhoneRadioCheckBoxDisabledBrush" Color="{StaticResource WP7PhoneRadioCheckBoxDisabledColor}"/>
    <SolidColorBrush x:Key="WP7PhoneRadioCheckBoxPressedBorderBrush" Color="{StaticResource WP7PhoneRadioCheckBoxPressedBorderColor}"/>
    <SolidColorBrush x:Key="WP7PhoneRadioCheckBoxPressedBrush" Color="{StaticResource WP7PhoneRadioCheckBoxPressedColor}"/>
    <SolidColorBrush x:Key="WP7PhoneRadioCheckBoxCheckBrush" Color="{StaticResource WP7PhoneRadioCheckBoxCheckColor}"/>

    <Style x:Key="WP7PhoneButtonBase" TargetType="ButtonBase">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="Padding" Value="10,3,10,5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ButtonBase">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="WP7PhoneRadioButtonCheckBoxBase" BasedOn="{StaticResource WP7PhoneButtonBase}" TargetType="ToggleButton">
        <Setter Property="Background" Value="{StaticResource WP7PhoneRadioCheckBoxBrush}"/>
        <Setter Property="BorderBrush" Value="{StaticResource WP7PhoneRadioCheckBoxBrush}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="0"/>
    </Style>
    <Style x:Key="WP7CheckBoxStyle" BasedOn="{StaticResource WP7PhoneRadioButtonCheckBoxBase}" TargetType="CheckBox">
        <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">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CheckBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource WP7PhoneRadioCheckBoxPressedBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CheckBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource WP7PhoneRadioCheckBoxPressedBorderBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckMark">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource WP7PhoneRadioCheckBoxCheckBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="IndeterminateMark">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource WP7PhoneRadioCheckBoxCheckBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CheckBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource WP7PhoneRadioCheckBoxDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CheckBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckMark">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource WP7PhoneRadioCheckBoxCheckDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="IndeterminateMark">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource WP7PhoneRadioCheckBoxCheckDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <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="CheckMark">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                                <VisualState x:Name="Indeterminate">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateMark">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid Margin="{StaticResource PhoneTouchTargetLargeOverhang}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="32"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid Grid.Column="0">
                                <Border x:Name="CheckBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{StaticResource PhoneBorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="Left" Height="32" IsHitTestVisible="False" VerticalAlignment="Center" Width="32"/>
                                <Rectangle x:Name="IndeterminateMark" Fill="{StaticResource WP7PhoneRadioCheckBoxCheckBrush}" HorizontalAlignment="Center" Height="16" IsHitTestVisible="False" Visibility="Collapsed" VerticalAlignment="Center" Width="16"/>
                                <Path x:Name="CheckMark" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{StaticResource WP7PhoneRadioCheckBoxCheckBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="21" IsHitTestVisible="False" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Visibility="Collapsed" VerticalAlignment="Center" Width="23"/>
                            </Grid>
                            <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>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Here is a screenshot that shows off 1) how to use the Style and 2) how it actually looks/works:

WP7_WP8_FixedStyle_Vertical
I needed some help for that painful process of finding out what style changed and how between WP7 and WP8 thats why i built a small tool :

WPThemeReviewerTool1 WPThemeReviewerTool2

I call it “WinPhone Theme Reviewer” , it targets WP8 only for now and you can download the source or xapfile.
What i did, essentially, is include MS’s Theme xaml files located “C:\Program Files (x86)\Microsoft SDKs\Windows Phone\vXX\Design\ThemeResources.xaml” for both WP71 and WP8 in the App.

Enjoy 🙂


-END UPDATE


Wait. That probably means even more default styles might be messed up..
know…We’ll just have to wait and see..

Btw. You know you are talking to yourself right?
….

Advertisements

One thought on “WP7 vs WP8 Checkbox Style Changes

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