Hello Developers,
I am using DataTemplateSelector
for survey. I have 4 or 5 question each page and each page have two button “Previous and Next”.
I am able to storing more than one question in page First but unable to create more then one page.
Below I written my code please see and help me I am surfing in this issue from a week.
This is my DataTemplateSelector Class
public class QuestionDataTemplateSelector : DataTemplateSelector
{
public DataTemplate RadioButtonTem { get; set; }
public DataTemplate FreeTextTem{ get; set; }
public DataTemplate CheckBoxTem { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
DataTemplate resultTemp = new DataTemplate();
var questionModel = item as QuestionModel;
if (questionModel != null)
{
switch (questionModel.QuestionType)
{
case "RadioButton":
resultTemp = RadioButtonTem;
break;
case "FreeText":
resultTemp = FreeTextTem;
break;
case "CheckBox":
resultTemp = CheckBoxTem;
break;
}
}
return resultTemp;
}
}
These are my model classes
public class QuestionModel
{
public QuestionModel()
{
RadioButtonList = new ObservableCollection<RadioButtonModel>();
CheckBoxList = new ObservableCollection<CheckBoxModel>();
}
public ObservableCollection<RadioButtonModel> RadioButtonList { get; set; }
public ObservableCollection<CheckBoxModel> CheckBoxList { get; set; }
public int Id { get; set; }
public string Question { get; set; }
public string QuestionType { get; set; }
}
public class RadioButtonModel
{
public int Id { get; set; }
public string value { get; set; }
public bool IsChecked { get; set; }
}
public class CheckBoxModel
{
public int Id { get; set; }
public string value { get; set; }
public bool IsChecked { get; set; }
}
This is my ViewModel Class
public class QuestionViewModel : INotifyPropertyChanged
{
public QuestionViewModel()
{
RadioButtonList = new ObservableCollection<RadioButtonModel>
{
new RadioButtonModel
{
Id = 1,
IsChecked = false,
value = "Yes",
},
new RadioButtonModel
{
Id = 2,
IsChecked = false,
value = "No",
}
};
CheckBoxList = new ObservableCollection<CheckBoxModel>
{
new CheckBoxModel
{
Id = 1,
IsChecked = false,
value = "Yes"
},
new CheckBoxModel
{
Id = 2,
IsChecked = false,
value = "No"
},
new CheckBoxModel
{
Id = 3,
IsChecked = false,
value = "Na"
},
};
QuestionList = new ObservableCollection<QuestionModel>
{
new QuestionModel
{
Id =1,
RadioButtonList = RadioButtonList,
CheckBoxList = CheckBoxList,
Question = "Is this Radio button",
QuestionType = "RadioButton",
},
new QuestionModel
{
Id =2,
RadioButtonList = RadioButtonList,
CheckBoxList = CheckBoxList,
Question = "Is this Free Text",
QuestionType = "FreeText",
},
new QuestionModel
{
Id =3,
RadioButtonList = RadioButtonList,
CheckBoxList = CheckBoxList,
Question = "Is this Check box",
QuestionType = "CheckBox",
},
};
}
private ObservableCollection<QuestionModel> _questionList;
public ObservableCollection<QuestionModel> QuestionList
{
get { return _questionList; }
set
{
_questionList = value;
OnPropertyChanged("QuestionList");
}
}
private ObservableCollection<CheckBoxModel> _checkBoxList;
public ObservableCollection<CheckBoxModel> CheckBoxList
{
get { return _checkBoxList; }
set
{
_checkBoxList = value;
OnPropertyChanged("CheckBoxList");
}
}
private ObservableCollection<RadioButtonModel> _radioButtonList;
public ObservableCollection<RadioButtonModel> RadioButtonList
{
get { return _radioButtonList; }
set
{
_radioButtonList = value;
OnPropertyChanged("RadioButtonList");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}
This is my design(Xaml) code
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="TemplateFreeText">
<ViewCell>
<Grid RowSpacing="15">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="{Binding Question}" TextColor="Black" FontAttributes="Bold" FontSize="18"/>
<Editor Grid.Row="1" Placeholder="Enter..." />
</Grid>
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="TempRadioButton">
<ViewCell>
<Grid RowSpacing="15" >
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="{Binding Question}" TextColor="Black" FontAttributes="Bold" FontSize="18"/>
<Grid Grid.Row="1" Padding="20,0" VerticalOptions="Center">
<rb:BindableRadioGroup x:Name="RadiouGroup" SelectionMode="Single" ItemsSource="{Binding RadioButtonList, Mode=TwoWay}"
<grial:Repeater.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" Spacing="15" >
<grial:Checkbox IsChecked="{Binding IsChecked, Mode=TwoWay}">
<Label Text="{ Binding value}" Margin="0,0" />
</grial:Checkbox>
</StackLayout>
</DataTemplate>
</grial:Repeater.ItemTemplate>
<grial:Repeater.SelectedItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<grial:Checkbox IsChecked="{Binding IsChecked,Mode=TwoWay}" >
<Label Text="{ Binding value}" Margin="0,0" />
</grial:Checkbox>
</StackLayout>
</DataTemplate>
</grial:Repeater.SelectedItemTemplate>
</rb:BindableRadioGroup>
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="TempCheckBox">
<ViewCell>
<Grid RowSpacing="15">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="{Binding Question}" TextColor="Black" FontAttributes="Bold" FontSize="18"/>
<Grid Grid.Row="1" Padding="20,0" VerticalOptions="Center">
<rb:BindableRadioGroup x:Name="RadiouGroup" SelectionMode="Single" ItemsSource="{Binding CheckBoxList, Mode=TwoWay}">
<grial:Repeater.ItemTemplate>
<DataTemplate>
<StackLayout>
<grial:Checkbox IsChecked="{Binding IsChecked, Mode=TwoWay}">
<Label Text="{ Binding value}"/>
</grial:Checkbox>
</StackLayout>
</DataTemplate>
</grial:Repeater.ItemTemplate>
<grial:Repeater.SelectedItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" >
<grial:Checkbox IsChecked="{Binding IsChecked,Mode=TwoWay}" >
<Label Text="{ Binding value}" Margin="8,0" />
</grial:Checkbox>
</StackLayout>
</DataTemplate>
</grial:Repeater.SelectedItemTemplate>
</rb:BindableRadioGroup>
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
<vc:QuestionDataTemplateSelector x:Key="QuestionDataTemplateSel"
RadioButtonTem="{StaticResource TempRadioButton}"
FreeTextTem="{StaticResource TemplateFreeText}"
CheckBoxTem="{StaticResource TempCheckBox}"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout x:Name="stk">
<ListView x:Name="list"
ItemsSource="{Binding QuestionList}"
HasUnevenRows="True"
ItemTemplate="{StaticResource QuestionDataTemplateSel}"
SeparatorVisibility="None"/>
</StackLayout>
</ContentPage.Content>
I want to more than one question each page and more than one page.