Question

请问WPF Xaml 用ItemTemplate和用ItemContainerStyle的区别，谁能解释一下以下现象：

后台代码
for (int i = 0; i < 10; i++)
{
for (int j=0; j<20;j++)
{

double left = 20 + j * 80;
double top =20 + i * 90;
Thickness oo =new Thickness(left,top,0,0);
double width = 60;
double height = 80;
SolidColorBrush bb = Brushes.Blue;
Rectangle uu = new Rectangle();
uu.Fill = Brushes.Blue;
double theigth = 60;
BitmapImage aa = new BitmapImage();
aa.BeginInit();
aa.UriSource = new Uri(@"e:\dm2\work\0206_IMG_OUT_x.jpg");
aa.EndInit();
Image yy = new Image();
yy.Source = aa;
string s = i.ToString() + j.ToString();
HH.Add(new { oo, width, height, bb, left, top, theigth,aa,s });/*有些东西是用不到的，可以不理它*/

}
}

xaml中部分代码,方法1:
<Window.Resources >
<DataTemplate x:Key="qq">
<Image Margin="{Binding oo}" Source="{Binding aa}" Height="{Binding heigth}"
Width="{Binding width}" Stretch="Fill"></Image>
</DataTemplate>
</Window.Resources>
<Grid>
<ListBox Name="ML" Margin="20,30,10,10" ItemTemplate="{StaticResource qq}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Name="ca" Loaded="ZoomableCanvas_Loaded" >
</Canvas>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

方法2:
<ListBox Name="ML" Margin="20,30,10,10" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Height" Value="{Binding height}"></Setter>
<Setter Property="Canvas.Left" Value="{Binding left}"></Setter>
<Setter Property="Canvas.Top" Value="{Binding top}"></Setter>
<Setter Property="Width" Value="{Binding width}"></Setter>
<Setter Property="Background" Value="{Binding bb}"></Setter>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate >
<Image Source="{Binding aa}" Height="{Binding heigth}"
Width="{Binding width}" Stretch="Fill"></Image>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
两种出来的效果完全不一样:
方法1出来的不能单独选中每个image,方法2可以,why?
上图是第二种方法的，第三张图片可以被单独选中，但第一种方法，如果选则的话，则所有的图片都被选中了，还不止于此，应该是选中的整个canvas，求解释

Answer 1

方法2中楼主也设置了同方法1中相同的ListBox.ItemsPanel吗？

追问

是的，方法2

 

             

追答

那你方法1中有对listboxitem设置canvas.left和top吗？

追问

方法1的代码就在那里，你帮我调试一下看看，我加的时候，它根本就不让设canvas.left canvas.top
方法2里面是可以设的

追答

那就说明原因了。方法2中的这段

其实设置的是方法1中的ItemTemplate。因为listbox的ItemTemplate其实是listbox的contenttemplate而不是controltemplate的子集。
listbox可以用来显示绑定的数据列表，也可以展示前台写死的列表。
例如： 。。。
当不是数据绑定的时候，设置listboxItem的template来控制其项外观，当有数据绑定的时候，设置ItemContainerStyle控制其外观。而ContentTemplate只是用来控制其绑定数据的显示的。

追问

那如何解释：
上图是第二种方法的，第三张图片可以被单独选中，但第一种方法，如果选则的话，则所有的图片都被选中了，还不止于此，应该是选中的整个canvas

或者说方法1如何修改可以达到方法2的效果呢？

追答

你只能用方法2呀。方法1中你是通过itemtemplate设置了相当方法2中的ContentTemplate。你第一种方法里面所有项应该都重叠了，当然是被全部选中了

追问

没有重叠，程序运行后表现形式跟方法2完全一样，只是如果要选中其中任意一项的话是不可能的，貌似选中的是整个canvas，方法2是可以单独选中其中一项的

追答

方法一其实是行不通的。
你设置Image的margin虽然可以在初始页面让列表显示正确，但你其实忽视了一点。你其实没有改变listboxitem的位置。你没有改变listboxitem的left,top设置margin。我举个例子，比如你在页面上画了一个100x100的border，然后在这个border里放了一个Margin为（90 90 0 0）的10x10的rectangle。你肉眼看到的是rectangle“正确”的显示，其实它的容器还是顶在左上方的。

Answer 2

估计你的模板绑定到同一个属性上了

追问

代码都在，能对照代码说具体一点吗？