none
No click inside listbox when using datapager

    Question

  • Hello,

    I am devloping a SL5 site. I used a listbox with domaindatasource retrieving data from database. A List is in a ScrollViewer and listbox uses WapPanel so the content would scale to any screen width.  Without datapager, the listbox item could get highlight as my mouse hovers over an item and an item could be selected by clicking on the item row. The page scales its width properly. everything seems fine. But after I add a DataPager, the listbox pages well and scrollbar works as well. But with DataPager added, I cannot click on any listbox item and an item would not highlight as my mouse moves and hovers over it. No mouse event within listbox area. What could be the reason?

    By the way, I have partitioned my SL app into multiple modules with their own XAp files. But that should not not matter.

    Thank you for any help.    

    Here is my XAML:

    <ScrollViewer Name="svHPListScrollViewer" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" >

    <Grid Name="grdInScrollViewer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ><riaControls:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my:PROPERTY, CreateList=true}" Height="0"  LoadedData="pROPERTYDomainDataSource_LoadedData"  Name="pROPERTYDomainDataSource" QueryName="GetPROPERTiesQuery" Width="0">
    <riaControls:DomainDataSource.DomainContext>

    <my1:HomePropertyContext/></riaControls:DomainDataSource.DomainContext>

    <riaControls:DomainDataSource.SortDescriptors>

    <riaControls:SortDescriptor PropertyPath="CREATED_DT" Direction="Ascending"></riaControls:SortDescriptor

    >

    </riaControls:DomainDataSource.SortDescriptors></riaControls:DomainDataSource><ListBox Name="pROPERTYListBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding ElementName=pROPERTYDomainDataSource, Path=Data}" Margin="0,0,0,0" SelectionMode="Single" >

    <ListBox.ItemsPanel><ItemsPanelTemplate>

    <toolkit:WrapPanel/>

    </ItemsPanelTemplate></ListBox.ItemsPanel>

    <ListBox.ItemTemplate>

    <DataTemplate>

    <Grid Name="grdInDataTemplate" Height="160" >

    <Grid.ColumnDefinitions>

    <ColumnDefinition Width="200"/><ColumnDefinition Width="*" /></Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

    <RowDefinition Height="140" />

    <RowDefinition Height="15" />

    <RowDefinition Height="5" /></Grid.RowDefinitions>

    <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Margin="2" Width="200" Height="150"

    VerticalAlignment="Top" HorizontalAlignment="Left" Stretch="Fill"

    Source="{Binding Path=THUMBNAIL_URL}" />

    <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1" Height="150" Margin="5 0 0 0" >

    <toolkit:WrapPanel Name="wpnlSTREET_CITY_PROVINCEColumn" >

    <TextBlock x:Name="sTREET_CITY_PROVINCEColumn" Text="{Binding Path=STREET_CITY_PROVINCE}"

    Margin="2" FontWeight="Bold" FontSize="12" HorizontalAlignment="Left" />

    </toolkit:WrapPanel>

    <toolkit:WrapPanel Grid.Row="1" Grid.Column="0" Width="{Binding ElementName=wpnlSTREET_CITY_PROVINCEColumn, Path=Width }" >

    <TextBlock x:Name="pRICEColumn" Text="{Binding Path=PRICE, StringFormat=\{0:c0\} }"

    Margin="2" HorizontalAlignment="Left" /><TextBlock Text=" | phone " Margin="2" />

    <TextBlock x:Name="Phone_NumColumn" Text="{Binding Path=PHONE_NUM}" Margin="2" />

    </toolkit:WrapPanel>

    <toolkit:WrapPanel x:Name="wpnlBriefDescription">

    <TextBlock x:Name="oNE_SENTENCE_DESCRIPTIONColumn" Width="{Binding ElementName=wpnlBriefDescription, Path=Width }"

    HorizontalAlignment="Left" Text="{Binding Path=BRIEF_DESCRIPTION}" Margin="2" TextWrapping="Wrap"/>

    </toolkit:WrapPanel></StackPanel>

    <toolkit:WrapPanel Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" Margin="5 0 0 0" >

    <HyperlinkButton FontWeight="Bold" >More details</HyperlinkButton>

    </toolkit:WrapPanel>

    <Rectangle Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="824"

    Height="1" Stroke="#FF627EDB" Fill="#FF7FB6D8"></Rectangle>

    </Grid>

    </DataTemplate>

    </ListBox.ItemTemplate>

    </ListBox>

    <sdk:DataPager PageSize="5" Source="{Binding Data, ElementName=pROPERTYDomainDataSource}" />

    </Grid>

    </ScrollViewer>

     

    Tuesday, April 10, 2012 11:23 PM

Answers

  • Thank you both for your help. I am using DomianDataSource so my code behind does not have any custom code ( it just has whatever is generated by drag-and-drop to create the attached XAML.

    I am trying to build ProofOfConcept small VS project again from AdventureWorks DB step by step to reproduce the issue.  Different sources all say DomainDataSource works very well with DataPager. So I first use as few controls as possible and then add more. I found my GRID just under ScrollViewer is causing problem. After I change it to StackPanel, DataPager and ListBox work as expected.  So change that Grid to the following and remove orig Grid related artifacts:

    <StackPanel Name="spnlInScrollViewer" Orientation="Vertical" HorizontalAlignment="Stretch"VerticalAlignment
    ="Stretch" >

    I am not exactly usre why. But nesting controls could make some features not work.

    Thanks again.

    Friday, April 13, 2012 10:47 PM

All replies

  • But with DataPager added, I cannot click on any listbox item and an item would not highlight as my mouse moves and hovers over it. No mouse event within listbox area.

    Hi,

    According to your description, I cannot reach the solution directly.

    It would be appreciated if you can share me with your code behind, for the xaml it just add a datapager element to your UI and it will not affect the listbox of yours.

    More, for datapager, you should use PagedCollectionView as as resource.

    Example:

       
    <Grid x:Name="LayoutRoot" Width="400">
            <StackPanel Margin="10">
                <sdk:DataPager x:Name="dataPager1"
                                PageSize="5"
                                AutoEllipsis="True"
                                NumericButtonCount="3"
                                DisplayMode="FirstLastPreviousNextNumeric"
                                IsTotalItemCountFixed="True"/>
    
                <ListBox x:Name="listBox1" />
            </StackPanel>
        </Grid>
    
     
       public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
                List<String> itemList = new List<String>();
                // Generate some items to add to the list.
                for (int i = 1; i <= 33; i++)
                {
                    System.Text.StringBuilder sb = new System.Text.StringBuilder("Item ");
                    sb.Append(i.ToString());
                    itemList.Add(sb.ToString());
                }
                // Wrap the itemList in a PagedCollectionView for paging functionality
                PagedCollectionView itemListView = new PagedCollectionView(itemList);
    
                // Set the DataPager and ListBox to the same data source.
                dataPager1.Source = itemListView;
                listBox1.ItemsSource = itemListView;
            }
        }
    

     

    Hope helpful.

    Friday, April 13, 2012 1:37 AM
  • Thank you both for your help. I am using DomianDataSource so my code behind does not have any custom code ( it just has whatever is generated by drag-and-drop to create the attached XAML.

    I am trying to build ProofOfConcept small VS project again from AdventureWorks DB step by step to reproduce the issue.  Different sources all say DomainDataSource works very well with DataPager. So I first use as few controls as possible and then add more. I found my GRID just under ScrollViewer is causing problem. After I change it to StackPanel, DataPager and ListBox work as expected.  So change that Grid to the following and remove orig Grid related artifacts:

    <StackPanel Name="spnlInScrollViewer" Orientation="Vertical" HorizontalAlignment="Stretch"VerticalAlignment
    ="Stretch" >

    I am not exactly usre why. But nesting controls could make some features not work.

    Thanks again.

    Friday, April 13, 2012 10:47 PM