Wpf 选择画布为ItemsPanelTemplate的绑定列表框项目
我正在编写一个日程安排工具,我希望有一个类似于“Day”的视图,这在许多日历应用程序中都可用 它作为一个列表框完成,因此用户可以选择一些事件。当我试图绑定事件时,问题就出现了——选择没有按预期工作。我的意思是,它看起来像延伸到容器的最顶部,加上单击事件不会在元素上处理,而是在元素和容器顶部边缘之间的空间上处理 这里有一个例子:在左侧-它应该如何工作和外观,这是通过手动放置两个ListBoxItems来完成的。在右侧,使用绑定 我用WPF调试工具比较了这两种情况下的可视化树,发现它们之间的差别很小,例如ContentPresenter,但我不清楚到底发生了什么,为什么会出现这种差别,以及如何消除它 这是我的XAML:Wpf 选择画布为ItemsPanelTemplate的绑定列表框项目,wpf,binding,datatemplate,Wpf,Binding,Datatemplate,我正在编写一个日程安排工具,我希望有一个类似于“Day”的视图,这在许多日历应用程序中都可用 它作为一个列表框完成,因此用户可以选择一些事件。当我试图绑定事件时,问题就出现了——选择没有按预期工作。我的意思是,它看起来像延伸到容器的最顶部,加上单击事件不会在元素上处理,而是在元素和容器顶部边缘之间的空间上处理 这里有一个例子:在左侧-它应该如何工作和外观,这是通过手动放置两个ListBoxItems来完成的。在右侧,使用绑定 我用WPF调试工具比较了这两种情况下的可视化树,发现它们之间的差别很
<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>
MarginConverter等级:
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() { }
}
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;
}
}
尝试按如下方式更新列表框:
<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>
您应该在
ListBox
资源中的ListBoxItem
中添加样式,在其中设置适当的属性并更改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>
带有两个ListBoxItem
项的可视树:
在本例中,一切正常,Height
和Margin
属性在代码中设置
带有两个事件项的可视树:
在本例中,您将ItemTemplate
定义为ListBoxItem
,但默认情况下ListBox
还将添加容器ListBoxItem
,因此您有两个ListBoxItem
,这是一个问题,因为您只为内部ListBoxItem
设置了高度和边距。外部ListBoxItem
具有默认属性
如果你想自己检查一下,你可以用它来做这个snoop()。非常有效,谢谢!所以这意味着绑定机制将我的事件对象包装在ListBoxItems中,我们不应该显式地这样做。@PiotrK再次检查我的答案,我添加了一些解释。我希望现在更清楚了。