使用Canvas作为ItemsPanelTemplate选择绑定的ListBox项目

Question

I'm writing a scheduling tool and I want to have a view similar to "Day", which is available in many calendar apps.

It's done as a ListBox so the user could select some event. The problem occurs when I'm trying to bind the events - selection doesn't work as expected. By this I mean that it looks like stretched to the very top of the container, plus the click event doesn't get handled on the element but on the space between the element and the top edge of the container.

Here's an example: on the left side - how it should work and look, this is done by manually placing two ListBoxItems. On the right side, using binding.

I compared visual trees of both cases with a WPF debug tool and there's small difference in eg ContentPresenter stuff, but I don't understand exactly what happens there, why the difference occurs and how I can remove it.

Here is my XAML:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="PLA1.MainWindow"
    x:Name="Window"
    xmlns:local="clr-namespace:PLA1"
    Title="MainWindow"
    Width="640" Height="480">

    <Window.Resources>
        <local:MarginConverter x:Key="marginConverter"/>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <ListBox Margin="8,8,0,8" Background="#C9BBC0FF" HorizontalAlignment="Left" Width="160">
           <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <ListBoxItem Margin="{Binding Path=StartMinutes, Converter={StaticResource marginConverter}}" Height="{Binding Path=Duration}" Width="150" Background="#8000FF00" Foreground="White" BorderThickness="2" BorderBrush="#80000000">
                        <StackPanel>
                            <TextBlock Text="{Binding Path=Name}" Margin="5,0,0,0" Width="130" TextWrapping="Wrap" FontWeight="Bold" FontSize="18" />
                            <TextBlock Text="{Binding Path=Place}"  Margin="8,0,0,0" FontSize="14"/>
                        </StackPanel>
                    </ListBoxItem>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.Effect>
                <DropShadowEffect Opacity="0.625"/>
            </ListBox.Effect>

            <!-- uncomment these two lines to test binding -->
            <!--local:Event Duration="200" StartMinutes="60" Name="Sprawdzian" Place="EA32" />
            <local:Event Duration="120" StartMinutes="300" Name="Oddanie projektu" Place="308" /-->

            <ListBoxItem Margin="0,60,0,0" Height="200" Width="150" Background="#8000FF00" Foreground="White" BorderThickness="2" BorderBrush="#80000000">
                <StackPanel>
                    <TextBlock Text="Sprawdzian" Margin="5,0,0,0" Width="130" TextWrapping="Wrap" FontWeight="Bold" FontSize="18" />
                    <TextBlock Text="EA32"  Margin="8,0,0,0" FontSize="14"/>
                </StackPanel>
            </ListBoxItem>      

            <ListBoxItem Margin="0,300,0,0" Height="120" Width="150" Background="#8000FF00" Foreground="White" BorderThickness="2" BorderBrush="#80000000">
                <StackPanel>
                    <TextBlock Text="Oddanie projektu" Margin="5,0,0,0" Width="130" TextWrapping="Wrap" FontWeight="Bold" FontSize="18" />
                    <TextBlock Text="308"  Margin="8,0,0,0" FontSize="14"/>
                </StackPanel>
            </ListBoxItem>  
        </ListBox>
    </Grid>
</Window>

Event class:

public class Event
{
    public int StartMinutes { get;set; }
    public int Duration { get; set; }
    public string Name { get; set; }
    public string Place { get; set; }

    public Event() { }
}

MarginConverter class:

public class MarginConverter : IValueConverter
{
    public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return new Thickness(0, (int)(value), 0, 0);
    }

    public object ConvertBack(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return null;
    }
}

Answer 1

You should add style to ListBoxItem in ListBox resources where you set appropriate properties and change ItemTemplate :

<ListBox Margin="8,8,0,8" Background="#C9BBC0FF" HorizontalAlignment="Left" Width="160">
    <ListBox.Resources>                   
        <Style TargetType="ListBoxItem">
            <Setter Property="Margin" Value="{Binding Path=StartMinutes, Converter={StaticResource marginConverter}}" />
            <Setter Property="Height" Value="{Binding Path=Duration}" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="BorderBrush" Value="#80000000" />
            <Setter Property="Width" Value="150" />
            <Setter Property="Background" Value="#8000FF00" />
        </Style>
    </ListBox.Resources>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>                    
                <StackPanel>
                    <TextBlock Text="{Binding Path=Name}" Margin="5,0,0,0" Width="130" TextWrapping="Wrap" FontWeight="Bold" FontSize="18" />
                    <TextBlock Text="{Binding Path=Place}"  Margin="8,0,0,0" FontSize="14"/>
                </StackPanel>                        
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.Effect>
        <DropShadowEffect Opacity="0.625"/>
    </ListBox.Effect>

    <!-- uncomment these two lines to test binding -->
    <local:Event Duration="200" StartMinutes="60" Name="Sprawdzian" Place="EA32" />
    <local:Event Duration="120" StartMinutes="300" Name="Oddanie projektu" Place="308" />

    <!--<ListBoxItem Margin="0,60,0,0" Height="200" Width="150" Background="#8000FF00" Foreground="White" BorderThickness="2" BorderBrush="#80000000">
        <StackPanel>
            <TextBlock Text="Sprawdzian" Margin="5,0,0,0" Width="130" TextWrapping="Wrap" FontWeight="Bold" FontSize="18" />
            <TextBlock Text="EA32"  Margin="8,0,0,0" FontSize="14"/>
        </StackPanel>
    </ListBoxItem>

    <ListBoxItem Margin="0,300,0,0" Height="120" Width="150" Background="#8000FF00" Foreground="White" BorderThickness="2" BorderBrush="#80000000">
        <StackPanel>
            <TextBlock Text="Oddanie projektu" Margin="5,0,0,0" Width="130" TextWrapping="Wrap" FontWeight="Bold" FontSize="18" />
            <TextBlock Text="308"  Margin="8,0,0,0" FontSize="14"/>
        </StackPanel>
    </ListBoxItem>-->
</ListBox>

Visual tree with two ListBoxItem items:

In this example everything is ok, Height and Margin properties are setting in code.

Visual tree with two Event items:

In this example you defined ItemTemplate as ListBoxItem but by default ListBox also will add container ListBoxItem so you have two ListBoxItem 's and here is problem because you set height and margin only for the inner ListBoxItem . Outer ListBoxItem has the default properties.

If you want to check this by yourself you can use to do this snoop ( http://snoopwpf.codeplex.com/ ).

Answer 2

Try updating your ListBox as below:

  <ListBox Margin="8,8,0,8" Background="#C9BBC0FF" HorizontalAlignment="Left" Width="160">
       <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
           <Style TargetType="ListBoxItem">
                    <Setter Property="Height" Value="{Binding Duration}"/>
                     <Setter Property="Margin" Value="{Binding Path=StartMinutes, Converter={StaticResource marginConverter}}" />
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                    <StackPanel Background="#8000FF00" BorderThickness="2" BorderBrush="#80000000">
                        <TextBlock Text="{Binding Path=Name}" Margin="5,0,0,0" Width="130" TextWrapping="Wrap" FontWeight="Bold" FontSize="18" />
                        <TextBlock Text="{Binding Path=Place}"  Margin="8,0,0,0" FontSize="14"/>
                    </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>