To allow user to select only one checkbox at a time in LongListselector or ListBox of windows phone follow the below given steps. To achieve this the key points are implementing INotifyPropertyChanged Interface and setting Binding Mode Mode=TwoWay, so that whenever change occurs either in data or in UI, both get reflected.

Credits: Scott Logic

binding

Step 1:

First create the UI for our LongListSelector.

  1. <phone:PhoneApplicationPage
  2. x:Class="LongListSelector_With_Check_Boxes.MainPage"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  6. xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  7. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  8. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  9. mc:Ignorable="d"
  10. FontFamily="{StaticResource PhoneFontFamilyNormal}"
  11. FontSize="{StaticResource PhoneFontSizeNormal}"
  12. Foreground="{StaticResource PhoneForegroundBrush}"
  13. SupportedOrientations="Portrait" Orientation="Portrait"
  14. shell:SystemTray.IsVisible="False">
  15. <phone:PhoneApplicationPage.Resources>
  16. <Style x:Key="CheckBoxStyle" TargetType="CheckBox">
  17. <Setter Property="Template">
  18. <Setter.Value>
  19. <ControlTemplate TargetType="CheckBox">
  20. <Grid Background="Transparent" HorizontalAlignment="Left">
  21. <!--Margin input-->
  22. <VisualStateManager.VisualStateGroups>
  23. <VisualStateGroup x:Name="CommonStates">
  24. <VisualState x:Name="Normal"/>
  25. <VisualState x:Name="MouseOver"/>
  26. <VisualState x:Name="Disabled">
  27. <Storyboard>
  28. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CheckBackground">
  29. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
  30. </ObjectAnimationUsingKeyFrames>
  31. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckMark">
  32. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
  33. </ObjectAnimationUsingKeyFrames>
  34. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="IndeterminateMark">
  35. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
  36. </ObjectAnimationUsingKeyFrames>
  37. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
  38. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
  39. </ObjectAnimationUsingKeyFrames>
  40. </Storyboard>
  41. </VisualState>
  42. </VisualStateGroup>
  43. <VisualStateGroup x:Name="CheckStates">
  44. <VisualState x:Name="Checked">
  45. <Storyboard>
  46. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckMark">
  47. <DiscreteObjectKeyFrame KeyTime="0">
  48. <DiscreteObjectKeyFrame.Value>
  49. <Visibility>Visible</Visibility>
  50. </DiscreteObjectKeyFrame.Value>
  51. </DiscreteObjectKeyFrame>
  52. </ObjectAnimationUsingKeyFrames>
  53. </Storyboard>
  54. </VisualState>
  55. <VisualState x:Name="Unchecked"/>
  56. <VisualState x:Name="Indeterminate">
  57. <Storyboard>
  58. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateMark">
  59. <DiscreteObjectKeyFrame KeyTime="0">
  60. <DiscreteObjectKeyFrame.Value>
  61. <Visibility>Visible</Visibility>
  62. </DiscreteObjectKeyFrame.Value>
  63. </DiscreteObjectKeyFrame>
  64. </ObjectAnimationUsingKeyFrames>
  65. </Storyboard>
  66. </VisualState>
  67. </VisualStateGroup>
  68. </VisualStateManager.VisualStateGroups>
  69. <Grid Margin="{StaticResource PhoneTouchTargetLargeOverhang}">
  70. <Grid.ColumnDefinitions>
  71. <ColumnDefinition Width="32"/>
  72. <ColumnDefinition Width="*"/>
  73. </Grid.ColumnDefinitions>
  74. <Grid Grid.Column="0" VerticalAlignment="Top">
  75. <Border x:Name="CheckBackground" BorderBrush="#9db0b5" BorderThickness="{StaticResource PhoneBorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="Left" Height="32" IsHitTestVisible="False" VerticalAlignment="Center" Width="32"/>
  76. <Rectangle x:Name="IndeterminateMark" Fill="{StaticResource PhoneRadioCheckBoxCheckBrush}" HorizontalAlignment="Center" Height="16" IsHitTestVisible="False" Visibility="Collapsed" VerticalAlignment="Center" Width="16"/>
  77. <Path x:Name="CheckMark" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="#9db0b5" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="21" IsHitTestVisible="False" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Visibility="Collapsed" VerticalAlignment="Center" Width="23"/>
  78. </Grid>
  79. </Grid>
  80. </Grid>
  81. </ControlTemplate>
  82. </Setter.Value>
  83. </Setter>
  84. </Style>
  85. <DataTemplate x:Key="groupHeaderTemplate">
  86. <StackPanel Grid.Row="0" Background="White">
  87. <TextBlock Text="{Binding Title}" Foreground="Red"></TextBlock>
  88. </StackPanel>
  89. </DataTemplate>
  90. <phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
  91. <phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
  92. <Style x:Key="LLSJumpListStyle" TargetType="phone:LongListSelector">
  93. <Setter Property="GridCellSize" Value="113,113"/>
  94. <Setter Property="LayoutMode" Value="Grid" />
  95. <Setter Property="ItemTemplate">
  96. <Setter.Value>
  97. <DataTemplate>
  98. <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="113" Height="113" Margin="6" >
  99. <TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6"
  100. Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
  101. </Border>
  102. </DataTemplate>
  103. </Setter.Value>
  104. </Setter>
  105. </Style>
  106. <Style x:Name="DividerStyle" TargetType="Border">
  107. <Setter Property="BorderBrush" Value="Gray"></Setter>
  108. <Setter Property="BorderThickness" Value="0 0 0 1"></Setter>
  109. <Setter Property="Margin" Value="0 18 0 18"></Setter>
  110. <Setter Property="Width" Value="450"></Setter>
  111. <Setter Property="Opacity" Value="0.7"></Setter>
  112. </Style>
  113. </phone:PhoneApplicationPage.Resources>
  114. <!--LayoutRoot is the root grid where all page content is placed-->
  115. <Grid x:Name="LayoutRoot" Background="Transparent">
  116. <Grid.RowDefinitions>
  117. <RowDefinition Height="Auto"/>
  118. <RowDefinition Height="*"/>
  119. </Grid.RowDefinitions>
  120. <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
  121. <TextBlock Text="Demo App" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
  122. </StackPanel>
  123. <!--ContentPanel - place additional content here-->
  124. <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  125. <phone:LongListSelector x:Name="lbTags" Background="Transparent"
  126. Margin="10,0"
  127. LayoutMode="List"
  128. SelectionChanged="llsPref_SelectionChanged">
  129. <phone:LongListSelector.ItemTemplate>
  130. <DataTemplate>
  131. <Grid HorizontalAlignment="Stretch">
  132. <Grid.RowDefinitions>
  133. <RowDefinition Height="*"/>
  134. <RowDefinition Height="*"/>
  135. </Grid.RowDefinitions>
  136. <Grid.ColumnDefinitions>
  137. <ColumnDefinition Width="0.5*"/>
  138. <ColumnDefinition Width="3*"/>
  139. </Grid.ColumnDefinitions>
  140. <CheckBox Grid.Column="0" IsChecked="{Binding CheckboxState, Mode=TwoWay}" Grid.Row="0" Grid.RowSpan="2" x:Name="chkDelete" Visibility="Visible" Margin="2,16,10,20" Grid.ColumnSpan="2" Click="CheckBox_Click" />
  141. <TextBlock Text="{Binding NoteName}" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="Segoe WP" Grid.Row="0" Foreground="Red" Grid.Column="1" Margin="12,24,0,0" />
  142. </Grid>
  143. </DataTemplate>
  144. </phone:LongListSelector.ItemTemplate>
  145. </phone:LongListSelector>
  146. </Grid>
  147. </Grid>
  148. </phone:PhoneApplicationPage>
Now Implement the Class File
  1. public class sample_data: INotifyPropertyChanged
  2. {
  3. // simple constructor
  4. public sample_data(string noteName, Boolean checkboxState)
  5. {
  6. this.NoteName = noteName;
  7. this.CheckboxState = checkboxState;
  8. }
  11. // implement the INotify
  12. public event PropertyChangedEventHandler PropertyChanged;
  13. private void NotifyPropertyChanged(String propertyName)
  14. {
  15. PropertyChangedEventHandler handler = PropertyChanged;
  16. if (null != handler)
  17. {
  18. handler(this, new PropertyChangedEventArgs(propertyName));
  19. }
  20. }
  23. // {Binding Properties}
  24. Boolean checkbox_state;
  25. public Boolean CheckboxState
  26. {
  27. get
  28. {
  29. return checkbox_state;
  30. }
  31. set
  32. {
  33. checkbox_state = value;
  34. NotifyPropertyChanged("CheckboxState");
  35. }
  36. }
  39. string note_name;
  40. public string NoteName
  41. {
  42. get {
  43. return note_name;
  44. }
  45. set {
  46. note_name = value;
  47. NotifyPropertyChanged("NoteName");
  48. }
  49. }
  52. }
NotifyPropertyChanged notifies that something is changed, Observable Collection always watches the collection for any changes.

Now go to MainPage.xaml.cs Page
  1. public partial class MainPage: PhoneApplicationPage
  2. {
  3. // Constructor
  4. List < sample_data > currentList = new List < sample_data > ();
  7. public MainPage()
  8. {
  9. InitializeComponent();
  10. lbTags.ItemsSource = CreateData();
  11. }
  12. public ObservableCollection < sample_data > CreateData()
  13. {
  14. ObservableCollection < sample_data > my_list = new ObservableCollection < sample_data > ();
  15. my_list.Add(new sample_data("one", false));
  16. my_list.Add(new sample_data("two", true));
  17. my_list.Add(new sample_data("three", false));
  18. my_list.Add(new sample_data("four", true));
  19. my_list.Add(new sample_data("five", false));
  20. my_list.Add(new sample_data("six", true));
  21. my_list.Add(new sample_data("seven", false));
  22. my_list.Add(new sample_data("eight", true));
  23. return my_list;
  24. }
  25. public void CheckBox_Click(object sender, RoutedEventArgs e)
  26. {
  27. CheckBox chk = (CheckBox) sender;
  28. var checkBox = (CheckBox) sender;
  29. var data = (sample_data) chk.DataContext;
  30. var id = data.NoteName;
  31. foreach(sample_data sd in lbTags.ItemsSource)
  32. {
  33. if (id == sd.NoteName)
  34. {
  35. sd.CheckboxState = data.CheckboxState;
  36. //Setting Current Clicked CheckBox Property Value
  37. }
  38. else
  39. {
  40. sd.CheckboxState = data.CheckboxState ? false : false;
  41. //Setting Remaining all CheckBox Other Than Selected To Unchecked
  42. }
  43. }
  46. }
  47. public void llsPref_SelectionChanged(object sender, SelectionChangedEventArgs e) {}
  48. }
If you have any doubt please comment below and find the attached demo project for any reference.
Thank You!