1

I'm working on my app and I'm having a problem with a listBox (I know I'm not good with XAML) :D

I actually have a RadListPicker (the Telerik control) that I use in one of my page, but I don't like the layout of the popup screen with all the list items, and another thing that bothers me is that when there are many items inside it, it becomes really annoying to scroll up and down to find the one you're looking for.

So I figured I'l add a JumpList instead of it.

This is the XAML I wrote (it's just a page with the layout):

<!--JumpList Resources-->
<UserControl.Resources>
    <!--Item template-->
    <DataTemplate x:Key="ItemTemplate">
        <StackPanel VerticalAlignment="Top">
            <TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" 
                Margin="3,0,0,10" Text="{Binding Item}" />
        </StackPanel>
    </DataTemplate>

    <!--Group Header-->
    <DataTemplate x:Key="GroupHeaderTemplate">
        <Border Background="Transparent" Padding="5">
            <Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="62" 
                Height="62" Margin="0,0,18,0" HorizontalAlignment="Left">
                <TextBlock Text="{Binding Key}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6" 
                    FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            </Border>
        </Border>
    </DataTemplate>

    <!--Background-->
    <Controls:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
    <Controls:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>

    <!--Jump List-->
    <Style x:Key="JumpListTemplate" TargetType="Controls:LongListSelector">
        <Setter Property="GridCellSize"  Value="113,113"/>
        <Setter Property="LayoutMode" Value="Grid" />
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="113" Height="113" Margin="6" >
                        <TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6" 
                            Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
                    </Border>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    </UserControl.Resources>


<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="20" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Row="0" Grid.Column="1" Text="JumpList" VerticalAlignment="Bottom" Margin="5,0,0,20"
               FontSize="{StaticResource PhoneFontSizeLarge}"/>
    <Controls:LongListSelector 
        x:Name="LongJumpList"
                    JumpListStyle="{StaticResource JumpListTemplate}"
                    Background="Transparent"
                    GroupHeaderTemplate="{StaticResource GroupHeaderTemplate}"
                    ItemTemplate="{StaticResource ItemTemplate}"
                    LayoutMode="List"
                    IsGroupingEnabled="true"
                    HideEmptyGroups ="true"
                    Grid.Row="1" Grid.RowSpan="1"
                    Grid.Column="1" Grid.ColumnSpan="1"/>
</Grid>

And in another page I added:

<local:JumpListControl x:Name="myUserControl" Opacity="0"/>

Now, instead of using the listPicker, I want to create a button and add an event handler for the click that displayed the page with the jumpList, and then the page closes when the user selects one of the items in the list.

I don't want to navigate to another page, I want it to be an animated popup, just like with a listPicker. How can I do that? I created a button than changes the opacity of the control from 0 to 1 and vice versa, but I noticed that the user control doesn't work, it is just displayed, and I can still see the other page underneath it. What am I missing?

Thanks for your help! :)

Sergio

Sergio0694
  • 4,447
  • 3
  • 31
  • 58
  • Can you tell us the exact workflow you're trying to achieve? I have a strong feeling that wrong stuff is being used. Also, about page underneath user control being visible: set some background color on user control instead of keeping it transparent. – akshay2000 Aug 30 '14 at 13:18
  • The idea is this: I have to pick an item in a list, but I want to use a JumpList instead of the default design of a listPicker, so I want that when the user clicks a button, a popup with the user control gets displayed (with a couple of animations I made for opacity and Y translation), so that I get this JumpList with all my items. Then when the user clicks on one of those items, the popup closes, and I get the selected item. – Sergio0694 Aug 30 '14 at 14:21
  • Although it's none of my business, I suspect you're making a inconstant design. User wouldn't expect a button to open list to pick from. What's wrong with the regular ListPicker? If items are too many, I guess you should rethink the design. If you're sure you want to do this, navigate to next page (use popup animation) to show the list and navigate back on item tapped. Pass the reference to selected item back to first page. – akshay2000 Aug 30 '14 at 18:21
  • Yup you're right, with "Button" I meant to reproduce the closed listPicker design, that is a TextBlock with a thin border around it. I guess I'll keep the classic listPicker then, thanks for the design feedback :) This is my app btw, if you want to take a look at it: http://goo.gl/NyQE8V Cheers! – Sergio0694 Aug 30 '14 at 18:47

0 Answers0