Show the 5th Item at Top in DataBoundListBox

7 posts, 0 answers
  1. Tanvir
    Tanvir avatar
    5 posts
    Member since:
    Dec 2014

    Posted 08 Jan 2015 Link to this post

    Hello,

    I am currently stuck at this problem. Suppose I have 10 Items in a DataBoundListBox. But I want to show the 5th Item at Top when the ListBox is loaded. Rest of the Items will also be available on Top. If anyone Scrolls up, the person will also be able to see the first 4 elements.

    But when the ListBox will be loaded, the 5th Item will be the one at the top.

    How can I do it from C#? Any help will be highly appreciated. :)

    Thanks a lot.

    Regards,
    Tanvir Hassan Sourov.
  2. Tanvir
    Tanvir avatar
    5 posts
    Member since:
    Dec 2014

    Posted 08 Jan 2015 Link to this post

    Hello,

    I have also followed this.

    // Suppose my ListBox name is myListBox

    // And I have List Collection which is named as items. There are 10 items in the List named items.

    myListBox.BringIntoView(items[5]);

    Logically, it should bring in the 5th element at the top of the ListBox. But I am facing problem in here. The Second or Third element is coming to top depending on Page Variations.

    How can I solve that? Thanks.

    Regards.
  3. DevCraft banner
  4. Tanvir
    Tanvir avatar
    5 posts
    Member since:
    Dec 2014

    Posted 08 Jan 2015 Link to this post

    This is the Code that I have written in the XAML part of my App:

    <telerikPrimitives:RadDataBoundListBox Grid.Row="1" x:Name="myListBox" Margin="12,24,12,12" IsAsyncBalanceEnabled="True"
                       >
        <telerikPrimitives:RadDataBoundListBox.ItemTemplate >
            <DataTemplate >
                <telerikPrimitives:RadExpanderControl IsExpanded="True" ExpandableContent="{Binding}" Content="{Binding}">
                    <telerikPrimitives:RadExpanderControl.ContentTemplate>
                        <DataTemplate>
                            <Grid Margin="0, 6, 0, 12" >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Image Width="50" Height="50" Source="{Binding ImageSource}"/>
                                <TextBlock Foreground="White" Grid.Column="1" Margin="12,6,12,6" Text="{Binding Text1}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="Segoe WP SemiLight"/>
                            </Grid>
                        </DataTemplate>
                    </telerikPrimitives:RadExpanderControl.ContentTemplate>
                    <telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
                        <DataTemplate>
                            <StackPanel >
                                <Grid Margin="0,0,0,17">
                                    <StackPanel Margin="6">
                                        <TextBlock Foreground="White"  Text="{Binding Text2}" TextWrapping="Wrap" FontFamily="Segoe WP" FontSize="{StaticResource PhoneFontSizeNormal}"/>
                                        <TextBlock Foreground="White"  Text="{Binding Text3}" TextWrapping="Wrap" FontFamily="Segoe WP" FontSize="{StaticResource PhoneFontSizeNormal}"/>
                                        <TextBlock Foreground="White"  Text="{Binding Text4}" TextWrapping="Wrap" FontFamily="Segoe WP" FontSize="{StaticResource PhoneFontSizeNormal}"/>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Foreground="White"  Text="More Text:"/>
                                            <TextBlock Foreground="White"  FontWeight="Bold" Text="{Binding Text5}"/>
                                            <TextBlock Foreground="White"  FontWeight="Bold" Text="{Binding Text6}"/>
                                        </StackPanel>
                                    </StackPanel>
                                </Grid>
                                <Border Margin="0,6,0,17" BorderThickness="0,0,0,12" BorderBrush="#55555555" RenderTransformOrigin="0.5,0.5">
                                </Border>
                                <Border Margin="0,-44,0,17" BorderThickness="0,0,0,8" BorderBrush="{Binding ColorCode}" RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <CompositeTransform SkewX="-40" />
                                    </Border.RenderTransform>
                                </Border>
     
                            </StackPanel>
                        </DataTemplate>
                    </telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
                </telerikPrimitives:RadExpanderControl>
            </DataTemplate>
        </telerikPrimitives:RadDataBoundListBox.ItemTemplate>
    </telerikPrimitives:RadDataBoundListBox>


    And this is the Code that I have in C#:

    protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
      
        base.OnNavigatedTo(e);
     
        List<XMLItem> aux = new List<XMLItem>();
        PropertyItem props;
     
        for (int i = 0; i < 10; i++ )
        {
            props = new PropertyItem();
     
            props.Text1 = "Item = 1, Value = " + (i + 1).ToString();
            props.Text2 = "Item = 2, Value = " + (i + 1).ToString();
            props.Text3 = "Item = 3, Value = " + (i + 1).ToString();
            props.Text4 = "Item = 4, Value = " + (i + 1).ToString();
            props.Text5 = "Item = 5, Value = " + (i + 1).ToString();
            props.Text6 = "Item = 6, Value = " + (i + 1).ToString();
            props.ColorCode = "#a2af2a";
            props.ImageSource = "/Assets/ApplicationIcon.png";
     
            aux.Add(props);
     
        }
     
        myListBox.ItemsSource = aux;
        myListBox.BringIntoView(aux[4]);
    }

    The Code in my C# should normally Bring into view the 11th Item from the List. But normally, it brings the 2nd or 3rd Item at top when the Page is loaded. Is there any solution to solve the problem.

    Normally, the 5th Item is supposed to be on top when the page is loaded. How to solve this problem? Thanks a lot.

    Regards,
    Tanvir
  5. Ivaylo Gergov
    Admin
    Ivaylo Gergov avatar
    661 posts

    Posted 12 Jan 2015 Link to this post

    Hi Tanvir,

    It seems that when the code that brings into view the fifth item is executed, the RadExapnder controls have not been expanded yet, and the databoundlistbox does not take into account their expanded size. I will try to workaround this and I will get back to you with more information.


    Regards,
    Ivaylo Gergov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Tanvir
    Tanvir avatar
    5 posts
    Member since:
    Dec 2014

    Posted 12 Jan 2015 in reply to Ivaylo Gergov Link to this post

    Hello Ivaylo,

    Thanks for your reply. I will very much be looking forward to hear from you about how to solve this problem. I am stuck at this for the past few days. So, a little early respond from you will be really helpful.

    Thanks a lot.

    Regards,
    Tanvir Sourov.
  7. Ivaylo Gergov
    Admin
    Ivaylo Gergov avatar
    661 posts

    Posted 14 Jan 2015 Link to this post

    Hello Tanvir,

    Unfortunately, currently the DataBoundListBox does not expose a suitable end point to plug in and achieve the desired result. We will think of a way to improve the current API. However, if this is a showstopper for your application, I can suggest a possible workaround which I would not recommend and which in my opinion is against all application design patterns.
    In ItemTemplate the RadExpanderControl can listen to its SizeChanged event. Then, when the RadExpander starts to fire the updated values(taking into account the expanded state) you can bring into view the desired item and also detach from the SizeChanged event handler.
    I have prepared a sample project using the provided code snippet to demonstrate this. Please, see the attached file. 

    Please, let me know if this helps.  

    Regards,
    Ivaylo Gergov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Tanvir
    Tanvir avatar
    5 posts
    Member since:
    Dec 2014

    Posted 14 Jan 2015 in reply to Ivaylo Gergov Link to this post

    Hello Ivaylo,

    Thanks a lot for your kind solution! Using the SizeChanged Event worked like a charm in my scenario. The problem that I have been facing is solved. Thanks a lot for your kind help. You are awesome! :-)

    Regards,
    Tanvir Sourov.
Back to Top
DevCraft banner