WP7 - VirtualizingStackPanel bottom margin does not work

Question

I have VirtualizingStackPanel in ListBox ItemsPanel. If I set Margin="0,0,0,50" then margin is not showed but if I set left margin (or top or right) Margin="50,0,0,0" then margin works correct.

If I change VirtualizingStackPanel for StackPanel then bottom margin works well.

This Is my code:

<Grid x:Name="ContentPanel"
      Grid.Row="1"
      Margin="12,0,12,0">

  <ListBox x:Name="TasksListBox"
           Margin="0"
           ItemsSource="{Binding Tasks}"
           HorizontalAlignment="Stretch"
           ScrollViewer.VerticalScrollBarVisibility="Hidden">

    <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
        <!--<StackPanel Margin="0,0,0,14" />-->
        <VirtualizingStackPanel Margin="0,0,0,100"
                                Height="Auto" />
      </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBox.ItemTemplate>
      <DataTemplate>

        <Button Background="White"
                Width="455"
                Height="105"
                Tag="{Binding Id}"
                HorizontalContentAlignment="Stretch"
                VerticalContentAlignment="Stretch"
                Click="Button_Click_1">

          <Grid HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch">

            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="*" />
              <RowDefinition Height="24" />
            </Grid.RowDefinitions>

            <TextBlock Grid.ColumnSpan="4"
                       Text="{Binding Name}"
                       FontSize="24"
                       Foreground="#400000" />

            <Image Grid.Row="1"
                   Visibility="{Binding Project, Converter={StaticResource StringToVisibilityConverter}}"
                   Source="/Images/ProjectIcon.png"
                   Width="20"
                   Height="18"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top"
                   Margin="0,0,5,0" />

            <TextBlock Grid.Row="1"
                       Grid.Column="1"
                       Visibility="{Binding Project, Converter={StaticResource StringToVisibilityConverter}}"
                       Text="{Binding Project, Converter={StaticResource ToUppercaseConverter}}"
                       FontSize="16"
                       Foreground="#666666"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Margin="0,-2,9,0"
                       LineStackingStrategy="BlockLineHeight" />

            <Image Grid.Row="1"
                   Grid.Column="2"
                   Visibility="{Binding Context, Converter={StaticResource StringToVisibilityConverter}}"
                   Source="/Images/ContextIcon.png"
                   Width="20"
                   Height="18"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top"
                   Margin="-3,1,1,0" />

            <TextBlock Grid.Row="1"
                       Grid.Column="3"
                       Visibility="{Binding Context, Converter={StaticResource StringToVisibilityConverter}}"
                       Text="{Binding Context, Converter={StaticResource ToUppercaseConverter}}"
                       FontSize="16"
                       Foreground="#666666"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Margin="0,-2,0,0"
                       LineStackingStrategy="BlockLineHeight" />
          </Grid>

          <toolkit:GestureService.GestureListener>
            <toolkit:GestureListener Flick="GestureListener_Flick_1" />
          </toolkit:GestureService.GestureListener>

          <toolkit:ContextMenuService.ContextMenu>
            <toolkit:ContextMenu IsZoomEnabled="False"
                                 BorderBrush="#9c0605"
                                 Foreground="#400000">
              <toolkit:MenuItem Header="dokončeno"
                                Foreground="#400000"
                                Tag="{Binding Id}"
                                Click="MenuItem_Click_1" />
              <toolkit:MenuItem Header="upravit"
                                Foreground="#400000"
                                Tag="{Binding Id}"
                                Click="MenuItem_Click_2" />
              <toolkit:MenuItem Header="odstranit"
                                Foreground="#400000"
                                Tag="{Binding Id}"
                                Click="MenuItem_Click_3" />
            </toolkit:ContextMenu>
          </toolkit:ContextMenuService.ContextMenu>
        </Button>
      </DataTemplate>
    </ListBox.ItemTemplate>
  </ListBox>
</Grid>

Why can't you simply set the margin for `ListBox`? – Toni Petrina Apr 21 '13 at 07:53 — Toni Petrina, Apr 21 '13 at 07:53

score 0 · Answer 1 · edited Jun 24 '13 at 20:48

Code Behind

 ObservableCollection<string> data = new ObservableCollection<string>();
 for (int i = 0; i < 40; i++)
 {
      data.Add("Item" + i);
 }
 lbTest.ItemsSource = data;

Xaml

<Grid x:Name="LayoutRoot"
      Background="Transparent">

  <ListBox x:Name="lbTest">
    <ListBox.Style>
      <Style TargetType="ListBox">
        <Setter Property="Background"
                Value="Transparent" />
        <Setter Property="Foreground"
                Value="{StaticResource PhoneForegroundBrush}" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
                Value="Disabled" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
                Value="Auto" />
        <Setter Property="BorderThickness"
                Value="0" />
        <Setter Property="BorderBrush"
                Value="Transparent" />
        <Setter Property="Padding"
                Value="0,0,0,150" />
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="ListBox">
              <ScrollViewer x:Name="ScrollViewer"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            Foreground="{TemplateBinding Foreground}"
                            Padding="{TemplateBinding Padding}">
                <ItemsPresenter />
              </ScrollViewer>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </ListBox.Style>
  </ListBox>

</Grid>

It doesnt work it throws exception: InvalidOperationException: Cannot explicitly modify Children collection of Panel used as ItemsPanel for ItemsControl. ItemsControl generates child elements for Panel. — Earlgray, Apr 20 '13 at 19:50
this throws exception on ContolTemplate Margin: The member "Margin" is not recognized or is not accesible — Earlgray, Apr 20 '13 at 20:33
Sorry about the edits. I put them in vs and i didnt get an error till after i submitted. but this should do the trick. Putting margin on the itemspresenter. — Wigen, Apr 20 '13 at 20:42
unfortunately problem still remains with Margin in ItemPresenter — Earlgray, Apr 20 '13 at 20:45

WP7 - VirtualizingStackPanel bottom margin does not work

1 Answers1