How to insert ToggleSwitch Control in LongListMultiSelector

Question

I develop windows phone 8 application. Here is my XAML

Template for items

 <phone:PhoneApplicationPage.Resources>
    <data:AppCollection x:Key="AppCollection"/>
    <DataTemplate x:Key="AppItemTemplate">
        <StackPanel Margin="0,-14,0,24" Tap="OnItemContentTap" >
            <TextBlock Text="{Binding Name}" 
                                   Margin="0,0,0,-4"
                                   FontSize="{StaticResource PhoneFontSizeExtraLarge}" 
                                   FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
            <TextBlock Text="{Binding Body}"
                                   Margin="0,0,0,-4"
                                   Foreground="{StaticResource PhoneSubtleBrush}"
                                   FontSize="{StaticResource PhoneFontSizeNormal}"
                                   FontFamily="{StaticResource PhoneFontFamilyLight}"/>
            <TextBlock Text="{Binding Description}"
                                   Foreground="{StaticResource PhoneSubtleBrush}"
                                   FontSize="{StaticResource PhoneFontSizeNormal}"/>
        </StackPanel>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

and here is LongListMultiSelector

            <toolkit:LongListMultiSelector x:Name="AppList" 
                                            Margin="0,14,-12,0"
                                            ItemsSource="{StaticResource AppCollection}"
                                            LayoutMode="List"
                                            SelectionChanged="OnAppListSelectionChanged"
                                            IsSelectionEnabledChanged="OnAppListIsSelectionEnabledChanged"
                                            ItemTemplate="{StaticResource AppItemTemplate}"
        />
        </phone:PivotItem>

And here is screenshots of app:

So I need to have the same LongListMultiSelector but with ToggleSwitchers. Like on this picture:

Is it possible to add toggleswitches to longlist and hide switches when select is active ?

Answer 1

The ToggleSwitch is a control that can be found in the Windows Phone Toolkit library.

You can easily add that library to your project via NuGet: right click on your project -> "Manage NuGet packages" then search for "WPtoolkit".

Try adding the toggle switch within your data template.

 <ToggleSwitch Header="Toggle Switch Example" 
    OffContent="Do work" OnContent="Working" 
    Toggled="ToggleSwitch_Toggled"/>  

For more take a look here

Answer 2

Create Grid with two colums in dataTemplate. So LongListMultiSelector has ItemTemplate like this one:

<DataTemplate x:Key="ReminderItemTemplate">
        <Grid Name="ListGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="150"/>
            </Grid.ColumnDefinitions>
            <StackPanel Tap="OnItemContentTap" Grid.Column="0" >
                <TextBlock Text="{Binding Name}" 
                                   Margin="0,0,0,-4"
                                   FontSize="{StaticResource PhoneFontSizeExtraLarge}" 
                                   FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
                <TextBlock Text="{Binding Adress}"
                                   Margin="0,0,0,-4"
                                   Foreground="{StaticResource PhoneSubtleBrush}"
                                   FontSize="{StaticResource PhoneFontSizeNormal}"
                                   FontFamily="{StaticResource PhoneFontFamilyLight}"/>
                <TextBlock Text="{Binding Description}"
                                   Foreground="{StaticResource PhoneSubtleBrush}"
                                   FontSize="{StaticResource PhoneFontSizeNormal}"/>
            </StackPanel>
            <!--And here I insert toggleswitch-->
            <StackPanel  Tap="OnItemContentTap" Grid.Column="1" >
                <toolkit:ToggleSwitch  Margin="0,20,20,0" >
                </toolkit:ToggleSwitch>
            </StackPanel>
        </Grid>
    </DataTemplate>