Post
Ask Question

Allow user to select only one Checkbox at a time in LongListSelector Windows Phone 8 App

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.     }  
  9.   
  10.   
  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.     }  
  21.   
  22.   
  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.     }  
  37.   
  38.   
  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.     }  
  50.   
  51.   
  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 > ();  
  5.   
  6.   
  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.         }  
  44.   
  45.   
  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! 
Next Recommended Reading Save And Retrieve Image File From Stream To Local Storage In Windows Phone 8.1 Runtime Apps