Building custom question form and want to see which control is best(listview or stackpanel)

Question

Here is the requirement, to allow a user to go in and create a question, provide possible answers, and type of answer selection(Yes/No, True/False, Multiple Choice or handwritten)

So once they have done that, they can then select the questions they want and display a preformatted page with the questions and the appropriate controls for the type of question.

This form will be printed out and not captured on a pc.. so we are just lookign to create a form that will display the information on the screen for them to rpint..

So would a stackpanel or listview be appropriate?

Answer 1

Hi,

One of the major difference between listview and simple stackpanel is that listview supports grouping.

Regards,

Answer 2

With a listview am i able to create a layout that is not column based. I need to control how each question is laid out before printing..

Answer 3

Similar to Datalist in ASP.net i could create my layout, then repeat it on the page i need something like that.. ive looked over a few sites on listview grouping and grouping may not be the functionality i need..

Below is an image of what im looking to be able to control with some sort of template.. basically have a layout that would contain the Question #, the Question and Answers, once that is built then i can repeat it for all records returned so it will show all the questions in the format/layout we decide on..

Answer 4

I think listview is better in this case due to support for data templates, or you can use plain ItemsControl to do it.

Regards,

Answer 5

You can use DataTemplates in a StackPanel. The reason you'd you ItemsControl/ListBox/ListView is because they support an ItemsSource. Ie, in code behind you can have a Collection (List<T> for example) of Questions, bind the ItemsSource of say, the ItemsControl to Questions, and it'll automatically display all your questions. If you use a StackPanel, you'll have to manually add each question.

Answer 6

Looks like the following MAY work, but have another question about this.. what can i wrap the below code with to allow it to be scrollable so the user can verify the content before printing it out.. in other words, once you select the questions you are taken to the print page, which in some ways is kinda like a print preview.. you review and make sure your questions are there.. then click the print button..

        <ItemsControl Name="icQuestions" Width="500" Height="300">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid Width="450" Height="250">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="80*" />
                            <RowDefinition Height="150*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="80*" />
                            <ColumnDefinition Width="400*" />
                        </Grid.ColumnDefinitions>
                        <Label Content="{Binding Path=questionnumber}" Grid.RowSpan="1" HorizontalAlignment="Stretch" Name="lblNumber" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="15" FontFamily="Century Gothic" FontWeight="Bold" Foreground="White" />
                        <TextBlock Grid.Column="1" HorizontalAlignment="Stretch" Name="txtQuestion" Text="{Binding Path=question}" VerticalAlignment="Stretch" Foreground="White" FontWeight="Bold" FontSize="15" FontFamily="Century Gothic" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

Answer 7

I added the following around the itemscontrol, but it adds the scrollbar to my entire window instead of just the item control

<ScrollViewer CanContentScroll="True">

Answer 8

Wrap the whole ItemsControl in a ScrollViewer with VerticallScrolling (can't think of the exact property name off the top of my head) set to Auto :)

Answer 9

Wrap the whole ItemsControl in a ScrollViewer with VerticallScrolling (can't think of the exact property name off the top of my head) set to Auto :)

thats what i did in my post above yours..

but its scrolling the contents of the item control across the entire page instead of within the area i have it displaying..

Answer 10

What's the parent panel?

This is a simple XAML where a scrollviewer is place in the second row rather than the entire panel

   <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
        <TextBlock Grid.Row="0" Text="Row #1" />
        
        <ScrollViewer Grid.Row="1">
            <ItemsControl .../>
        </ScrollViewer>
    </Grid>

Regards,

Answer 11

Here is my entire XAML

<UserControl x:Class="Pages.PrintQuestion"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d" 
             d:DesignHeight="768" d:DesignWidth="1024" Loaded="UserControl_Loaded">
    <Grid>
        <Image HorizontalAlignment="Left" Margin="12,12,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Height="100" Width="400" />
        <Rectangle Height="500" HorizontalAlignment="Left" Margin="12,130,0,0" Name="rctnOutline" Stroke="White" VerticalAlignment="Top"  Fill="{x:Null}" RadiusX="10" RadiusY="10" StrokeThickness="2" Width="985" />
        <Button Content="Return to Question Page" Height="23" Name="btnBack" Click="btnBack_Click" Margin="746,672,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" />        
        <StackPanel Height="480" Width="965">
            <ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" BorderThickness="1" BorderBrush="White" Background="Red">
                <ItemsControl x:Name="icQuestions">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid Width="450" Height="200">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="60*" />
                                    <RowDefinition Height="120*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30*" />
                                    <ColumnDefinition Width="400*" />
                                </Grid.ColumnDefinitions>
                                <Label Content="{Binding Path=questionnumber}" Grid.RowSpan="1" HorizontalAlignment="Right" Name="lblNumber" VerticalAlignment="Top" HorizontalContentAlignment="Right" VerticalContentAlignment="Top" FontSize="15" FontFamily="Century Gothic" FontWeight="Bold" Foreground="White" />
                                <TextBlock Grid.Column="1" HorizontalAlignment="Stretch" Name="txtQuestion" Text="{Binding Path=question}" VerticalAlignment="Top" Foreground="White" FontWeight="Bold" FontSize="15" FontFamily="Century Gothic" Margin="0,5,0,0" TextWrapping="Wrap"/>
                                <StackPanel Grid.Column="1" Grid.Row="1" Name="spAnswers" Height="132" Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                                    <TextBlock Name="tbType" Text="{Binding Path=questiontype}" Foreground="White" FontFamily="Century Gothic" FontSize="15" FontWeight="Bold" />
                                    <RadioButton Name="rbYT" Visibility="Hidden" Content="True" FontFamily="Century Gothic" FontSize="15" FontWeight="Bold" Foreground="White" Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" />
                                    <RadioButton Name="rbNF" Visibility="Hidden" Content="False"  FontFamily="Century Gothic" FontSize="15" FontWeight="Bold" Foreground="White" Height="23" HorizontalAlignment="Left"  VerticalAlignment="Top" />
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </StackPanel>            
    </Grid>
</UserControl>

Answer 12

The scroll bar appears to occupy the entire space because of the parent stack panel which consumes the entire grid space.

For instance, you can change the XAML to something like the following

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
        <Image Grid.Row="0"
               HorizontalAlignment="Left" 
               Margin="12,12,0,0" 
               Name="image1" 
               Stretch="Fill"
               VerticalAlignment="Top"
               Height="100" 
               Width="400" />
        
        <Rectangle Grid.Row="1"
                   HorizontalAlignment="Left"
                   Name="rctnOutline" 
                   Stroke="White" 
                   VerticalAlignment="Top"
                   Fill="{x:Null}"
                   RadiusX="10"
                   RadiusY="10"
                   StrokeThickness="2" />
        
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <ScrollViewer Grid.Row="0"
                          CanContentScroll="True" 
                          VerticalScrollBarVisibility="Auto" 
                          BorderThickness="1" 
                          BorderBrush="White"
                          Background="Red">
                <ItemsControl x:Name="icQuestions" ItemsSource="{Binding Items}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30*" />
                                    <ColumnDefinition Width="400*" />
                                </Grid.ColumnDefinitions>
                                <Label Grid.Row="0" 
                                       Grid.Column="0"
                                       Content="{Binding Path=QuestionNumber}" 
                                       HorizontalAlignment="Right" 
                                       Name="lblNumber" 
                                       VerticalAlignment="Top" 
                                       HorizontalContentAlignment="Right"
                                       VerticalContentAlignment="Top"
                                       FontSize="15" 
                                       FontFamily="Century Gothic"
                                       FontWeight="Bold"
                                       Foreground="White" />
                                <TextBlock Grid.Row="1"
                                           Grid.Column="1" 
                                           HorizontalAlignment="Stretch"
                                           Name="txtQuestion" 
                                           Text="{Binding Path=Question}" 
                                           VerticalAlignment="Top" 
                                           Foreground="White"
                                           FontWeight="Bold"
                                           FontSize="15"
                                           FontFamily="Century Gothic" 
                                           Margin="0,5,0,0" 
                                           TextWrapping="Wrap"/>
                                <StackPanel Grid.Row="1"  
                                            Grid.Column="1" 
                                            Name="spAnswers"
                                            Orientation="Vertical"
                                            HorizontalAlignment="Stretch"
                                            VerticalAlignment="Top">
                                    <TextBlock Name="tbType"
                                               Text="{Binding Path=questiontype}"
                                               Foreground="White" 
                                               FontFamily="Century Gothic"
                                               FontSize="15" 
                                               FontWeight="Bold" />
                                    <RadioButton Name="rbYT" 
                                                 Visibility="Hidden" 
                                                 Content="True" 
                                                 FontFamily="Century Gothic"
                                                 FontSize="15" 
                                                 FontWeight="Bold" 
                                                 Foreground="White" 
                                                 Height="23" 
                                                 HorizontalAlignment="Left" 
                                                 VerticalAlignment="Top" />
                                    <RadioButton Name="rbNF" 
                                                 Visibility="Hidden"
                                                 Content="False"  
                                                 FontFamily="Century Gothic" 
                                                 FontSize="15"
                                                 FontWeight="Bold"
                                                 Foreground="White" 
                                                 Height="23" 
                                                 HorizontalAlignment="Left"  
                                                 VerticalAlignment="Top" />
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
            
            <Button Grid.Row="1"
                    Content="Return to Question Page"
                    Height="23" 
                    Name="btnBack" 
                    VerticalAlignment="Top" 
                    HorizontalAlignment="Left" />
        </Grid>
    </Grid>

Regards,

Answer 13

When you set up a Grid, it's purpose is to organize things into Rows and Columns. See here http://www.wpftutorial.net/gridlayout.html.

What you've got there is a single Grid cell you're packing everything in. 

Take out that StackPanel and organise your Controls into the Grid Rows and Columns and you'll be right :)

Answer 14

Johhy,

thanks, i updated my code to mimick yours and getting an error: im looking thru google results and so far what others have found to be their issues is not mine.. ive gone thru and my application build, but the page never loads and throws the below exception.

{"Provide value on 'System.Windows.Baml2006.TypeConverterMarkupExtension' threw an exception."}

Answer 15

Found the issue.. went thru a few more results online and someone had issues with a width missing a value, not my case, but did find that one of the "Auto" width had "Auto*" and removing the * reolved that error...

But that leads me to another question.. what would be the correct way to control the width of the scroller?

Ive added the red background to the scroller to see it on the page and help adjust the size, the content is now scrolling within the correct area, but the scroller takes up the entire width of the application.. would prefer to keep it within the rectangle so the page will look clean and professional when done..

Answer 16

Hey Cub...

Is this what you are after?

If so, here's the xaml for it...

<UserControl.Resources>
		<DataTemplate x:Key="ItemTemplate">
			<StackPanel Margin="0,10">
				<TextBlock Text="{Binding Property1}" Margin="0,0,0,5"/>
				<CheckBox IsChecked="{Binding Property2}" Margin="20,0,0,5"/>
				<CheckBox IsChecked="{Binding Property3}" Margin="20,0,0,5"/>
			</StackPanel>
		</DataTemplate>
	</UserControl.Resources>
	 <Grid DataContext="{Binding Source={StaticResource SampleDataSource}}">
	 	<Grid.RowDefinitions>
	 		<RowDefinition Height="124" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="424" />
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="164" />
		</Grid.ColumnDefinitions>
		
        <Image HorizontalAlignment="Left" Margin="12,12,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Height="100" Width="400" Source="img1.png" />
        <Button Content="Return to Question Page" Grid.Column="2" Height="23" Name="btnBack" Margin="12" VerticalAlignment="Bottom" HorizontalAlignment="Center" Width="140" />
        <Rectangle x:Name="rctnOutline" Stroke="Red" RadiusX="10" RadiusY="10" StrokeThickness="2" Grid.Row="1" Grid.ColumnSpan="3" Margin="12" d:LayoutOverrides="GridBox" />
        <ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" BorderThickness="1" BorderBrush="White" d:LayoutOverrides="Height, GridBox" Margin="24" Grid.Row="1" Grid.ColumnSpan="3">
        	<ItemsControl x:Name="icQuestions" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}"/>
        </ScrollViewer>            
    </Grid>

Hope you get it worked out quickly.

~Christine

---

My Gallery

Answer 17

The easies way would be using margin to control the width for the scroll viewer. Meanwhile, I strongly recommend you to find some WPF layout related articles to read through. There are plenty on the internet. It would definitely help you achieve the visual you are after. Regards,