Search code examples
c#windows-phone-8toggleswitch

How to insert ToggleSwitch Control in LongListMultiSelector


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:

enter image description here

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

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


Solution

  • 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>