Search code examples
windows-phone-7silverlight-toolkit

Custom Toggleswitch with binding to object


I am trying to create a toggleswitch which will have multiple rows in the datatemplate bound to different properties of a single object. These toggleswitches will be inside a listbox.

My xaml code below shows the current toggleswitch template. With the code below, only the header is binding properly. I need the other two rows (in the ContentTemplate) and the toggleswitch itself to bind to a boolean property of the object.

                        <DataTemplate>
                            <toolkit:ToggleSwitch Header="{Binding Property1}" Width="450">
                                <toolkit:ToggleSwitch.HeaderTemplate>
                                    <DataTemplate>
                                        <ContentControl FontWeight="Black" FontSize="40" Foreground="{StaticResource PhoneForegroundBrush}" Content="{Binding}" VerticalAlignment="Top" />
                                    </DataTemplate>
                                </toolkit:ToggleSwitch.HeaderTemplate>
                                <toolkit:ToggleSwitch.ContentTemplate>
                                    <DataTemplate>
                                        <StackPanel>
                                            <TextBlock Text="{Binding Property2}" FontSize="32" FontWeight="Light"  Foreground="{StaticResource PhoneAccentBrush}" />
                                            <TextBlock Text="{Binding Property3}" FontSize="{StaticResource PhoneFontSizeSmall}" Foreground="{StaticResource PhoneSubtleBrush}" />
                                        </StackPanel>
                                    </DataTemplate>
                                </toolkit:ToggleSwitch.ContentTemplate>
                            </toolkit:ToggleSwitch>
                        </DataTemplate>                            

Any advice here on how to achieve the results I need?

Thanks in advance!

Here is what I am trying to achieve

Property1 
Property2:On/Off                  [===]    (this is the toggle switch)
Property3

Properties 1,2, and 3 all will have custom formatting as well. Please keep in mind these will be in a listbox, so they will be binding to a collection.


Solution

  • You'll need to modify the source of the ToggleSwitch in the converter.

    Add extra text/string properties to have something to bind Property2 and Property3 to. (These will also need to be separate items to be templated differently- like in the alarms app.)

    Then look at changing the binding for the ContentProperty or extend the OffOnConverter to include the additional new proprties.