Creating own toggle button in WP8?

Question

I need to port an Android app which has a widget to WP8.

For this I need to create my own toggle button (user control). So I just created a subclass of Button called MyToggleButton and use the standard callbacks to change the image and the text of the button.

To catch the click down I use onMouseEnter and when the click is finished, ie the moud button goes up again I use onMouseLeave

Wihle this works without problems - the issue is that when clicking the onMouseEnter seems to be called with a little delay and this button changes the ButtonImage with a minimal delay as opposed to a normal button ( I am using Visual Studio Express 2012 with Emulator since I do not yet have a real phone for testing)

WHile I found other ways of creating user controls specifing lots in XAML, however I find the described way of just using the standard methods easier. I am just not sure, where this minimal delay comes from.

Answer 1

You should probably not make a custom toggle in the first case. Porting an application from Android doesn't mean you also have to port its graphics. They simply don't share the same design language. You should probably stick to the native WP8 toggle.

However, if you really want to create a custom checkbox/toggle, you should check this . This was made for WP7, but it also applies to WP8.

Answer 2

Here is a simplified "Toggle" button using images. based on CheckBox

<Style TargetType="{x:Type CheckBox}" >
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <Grid>
                            <ContentPresenter x:Name="Part_Content" />
                            <Image Name="image" Source="/WpfApplication4;component/Images/avatar63.jpg" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="true" >
                                <Setter TargetName="image" Property="Source" Value="/WpfApplication4;component/Images/imagesCA7JZMMY.jpg"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="False" >
                                <Setter TargetName="image" Property="Source" Value="/WpfApplication4;component/Images/avatar63.jpg"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>