ListBox and ApplicationBar: last element padding

Question

I have a ListBox and ApplicationBar with Opacity=.5. I want that ListBox items are under the ApplicationBar. Like figure:

enter image description here

But when I scrolled to end of list then last element of ListBox is under the ApplicationBar.

enter image description here

I want that last element is over ApplicationBar.

enter image description here

Can I add padding for a last element of the ListBox (LongListSelector)? How can solved this issue?

UPDATE

    <ListBox Name="MyListBox">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <i:Interaction.Triggers>
                        <ec:DataTrigger Binding="{Binding RelativeSource=
                                              {RelativeSource Self},
                                              Converter={StaticResource IsLastItemInContainerConverter}}"
                             Value="True">
                            <ec:ChangePropertyAction PropertyName="Padding" Value="0,0,0,72"/>
                        </ec:DataTrigger>
                    </i:Interaction.Triggers>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="Red" 
                                Width="400"
                                Height="120"
                                Margin="15">                            
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>              
        </ListBox>

UPDATE 2

My problem can be easily solved by using LongListSelector. Just add empty ListFooterTemplate with Height = ApplicationBar height.

yeah, if add to ListBox margin = 0,0,0,72 then all ListBox elements are above AppBar. But I need to only the last element was above the ApplicationBar. — Alexandr, Jan 01 '14 at 10:06

score 4 · Answer 1 · edited May 23 '17 at 11:43

4

You can use converter to check if it's last item in listbox and in case yes, set padding to desired value via DataTrigger.

Check my answer over here for converter code. Just for sake of completeness of this answer i will post that converter code here:

public class IsLastItemInContainerConverter : IValueConverter
{
   public object Convert(object value, Type targetType,
                         object parameter, CultureInfo culture)
   {
       DependencyObject item = (DependencyObject)value;
       ItemsControl ic = ItemsControl.ItemsControlFromItemContainer(item);

       return ic.ItemContainerGenerator.IndexFromContainer(item)
               == ic.Items.Count - 1;
   }

   public object ConvertBack(object value, Type targetType,
                             object parameter, CultureInfo culture)
   {
      throw new NotImplementedException();
   }
}

and use it like this:

    <ListBox>
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource=
                                                  {RelativeSource Self},
                      Converter={StaticResource IsLastItemInContainerConverter}}"
                                 Value="True">
                        <Setter Property="Padding" Value="5"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>

edited May 23 '17 at 11:43

Community

1
1

answered Jan 01 '14 at 10:54

Rohit Vats

79,502
12
161
185

I try this, but I have a "System.NullReferenceException" in Converter line "return ic.ItemContainerGenerator.IndexFromContainer(item)==ic.Items.Count - 1;" ic = null :( – Alexandr Jan 01 '14 at 12:31
Can check with debugger attached if `ic` was null? – Rohit Vats Jan 01 '14 at 12:33
I checked it, I updated my post and add the xaml, I did everything right in the ListBox? – Alexandr Jan 01 '14 at 12:41
Code seems right. I have one question though - Why have you use interaction triggers? Why not to use DataTrigger directly under Style.Triggers? – Rohit Vats Jan 01 '14 at 12:50
What was the value passed to Converter. Was `item` is of type ListBoxItem in converter? – Rohit Vats Jan 01 '14 at 12:51
Windows Phone doesn't support style triggers. Oh, the value in converter has Microsoft.Expression.Interactivity.Core.DataTrigger type. – Alexandr Jan 01 '14 at 12:59
That's an issue then. I am not much a Windows Phone guy, so somehow you have to get to ListBoxItem to get it work. May be RealtiveSource with AncestorType set to ListBoxItem. – Rohit Vats Jan 01 '14 at 13:00
Try this in XAML - `RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}`. – Rohit Vats Jan 01 '14 at 13:01
1

RelativeSource has only Self and TemplatedParent modes. I will try other options, thank you very much! – Alexandr Jan 01 '14 at 13:12
Ok. Would have offer my help in case i would have been a Windows Phone guy. – Rohit Vats Jan 01 '14 at 13:14

score 1 · Accepted Answer · answered Jan 01 '14 at 22:18

edit: Didn't see the update to the original question. The below remains for additional detail.

This solution is for Windows Phone 8 only (although you could use the LongListSelector from the Windows Phone Toolkit if you are targeting 7.1/5).

I'd replace the ListBox with the LongListSelector from the SDK

<Grid>
    <controls:LongListSelector ItemTemplate="{StaticResource Item}" ListFooterTemplate="{StaticResource Footer}" />
</Grid>

and for the templates add

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="Item">
       <StackPanel Background="Red" 
                   Width="400"
                   Height="120"
                   Margin="15">                            
       </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="Footer">
        <Border Height="72" />
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

score 1 · Answer 3 · answered Feb 18 '14 at 19:56

Maybe simplest solution is to customize ItemsPanel property on ListBox:

<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Margin="0,0,0,150"/> <!-- set margin to show some 'blank' space after last item -->
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    ...
</ListBox>

But be aware that by default ListBox uses VirtualizedStackPanel as ItemsPanel. If you change it to StackPanel, it may bring some performance penalty. This is solution is suitable for lists with few items.

ListBox and ApplicationBar: last element padding

3 Answers3