CODEWITHSUNDEEP
xamlwindows-phone-7windows-phone-8
Alexandr
Alexandr

Reputation: 1901

ListBox and ApplicationBar: last element padding

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.

Upvotes: 1

Views: 899

Answers (3)

Viktor Szekeress
Viktor Szekeress

Reputation: 171

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.

Upvotes: 1

David Gordon
David Gordon

Reputation: 554

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>

Upvotes: 1

Rohit Vats
Rohit Vats

Reputation: 81263

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>

Upvotes: 4

Related Questions