WPF嵌套模板引發的血案
有些事情看似簡單，在進行的過程中往往遇到大的麻煩；有些問題小之又小，但躲在角落里竊笑的它能讓你嘔血數日。反正我不止一次遇到過這樣的情況。
日前我打算在產品中加入吊牌打印的功能，涉及到合格證的制作。大伙都有去商店里買衣服的經歷，留意看吊牌的話會看到成分一欄里分成好幾個類別，如面料、里料、夾層等，每一類別又有好幾個物料占比信息，如面料包含70%的棉和30%的xx纖維。如何能讓用戶較為方便地設置這些信息呢？我原本打算采用自定義集合控件的方式，但是有些問題不好解決，部分難點問題記錄在隨筆WPF自定義集合控件概述與遇到的問題中。于是我老老實實采用為ListBox新建Template的方式，期望達到如下效果：
毫無疑問，上述效果需要倆ListBox，一個呈現大類，一個呈現小類，還得為它們準備各自的DataTemplate，還需要倆GroupBox，它們各自的HeaderTemplate也要額外處理。我微微一笑，流利地敲出代碼的第一版本：
1 <GroupBox DataContext="{Binding Composition,Mode=TwoWay,Converter={StaticResource compositionConverter}}"
2 RenderOptions.BitmapScalingMode="NearestNeighbor" Padding="3">
3 <GroupBox.HeaderTemplate>
4 <DataTemplate>
5 <StackPanel Orientation="Horizontal">
6 <TextBlock Text="成分" />
7 <!--猜測由于沒有給GroupBox.Header賦予Content，因此HeaderTemplate里的控件的DataContext為Null-->
8 <!--猜測正確，具體請看WPF GroupBox HeaderTemplate and DataBinding http://stackoverflow.com/questions/2425079/wpf-groupbox-headertemplate-and-databinding-->
9 <Button x:Name="PART_AddButton" Height="16" Click="PART_AddButton_Click">
10 <Button.Content>
11 <Image Source="pack://application:,,,/View.Extension;Component/Images/plus.png" />
12 </Button.Content>
13 </Button>
14 <Button x:Name="PART_DeleteButton" Height="16" Click="PART_DeleteButton_Click">
15 <Button.Content>
16 <Image Source="pack://application:,,,/View.Extension;Component/Images/minus.png" />
17 </Button.Content>
18 </Button>
19 </StackPanel>
20 </DataTemplate>
21 </GroupBox.HeaderTemplate>
22 <ListBox x:Name="lbxMateriels" ItemsSource="{Binding}" BorderThickness="0" ScrollViewer.VerticalScrollBarVisibility="Hidden">
23 <ListBox.ItemContainerStyle>
24 <Style TargetType="ListBoxItem">
25 <Setter Property="Margin" Value="2" />
26 <Setter Property="Template">
27 <Setter.Value>
28 <ControlTemplate TargetType="ListBoxItem">
29 <GroupBox Header="{Binding}">
30 <GroupBox.HeaderTemplate>
31 <DataTemplate>
32 <StackPanel Orientation="Horizontal">
33 <ComboBox ItemsSource="{Binding MaterielKinds,Source={StaticResource context}}"
34 MinWidth="60"
35 SelectedValue="{Binding KindName}"
36 SelectedValuePath="Name"
37 DisplayMemberPath="Name" />
38 <Button Height="16" Click="btnAddPercent_Click">
39 <Button.Content>
40 <Image Source="pack://application:,,,/View.Extension;Component/Images/plus.png" />
41 </Button.Content>
42 </Button>
43 <Button Height="16" Click="btnDeletePercent_Click">
44 <Button.Content>
45 <Image Source="pack://application:,,,/View.Extension;Component/Images/minus.png" />
46 </Button.Content>
47 </Button>
48 </StackPanel>
49 </DataTemplate>
50 </GroupBox.HeaderTemplate>
51 <ListBox x:Name="lbxMaterielPercents" ScrollViewer.VerticalScrollBarVisibility="Hidden"
52 ItemsSource="{Binding MaterielPercents}" BorderThickness="0">
53 <ListBox.ItemTemplate>
54 <DataTemplate>
55 <Grid Margin="0 3 0 0">
56 <Grid.ColumnDefinitions>
57 <ColumnDefinition Width="Auto" />
58 <ColumnDefinition Width="*" />
59 </Grid.ColumnDefinitions>
60 <NumericUpDown Value="{Binding Percent}" Minimum="0" Maximum="100" CustomUnit="%" />
61 <ComboBox ItemsSource="{Binding AvailableMateriels,Source={StaticResource context}}"
62 SelectedValue="{Binding MaterielName}"
63 SelectedValuePath="Name"
64 DisplayMemberPath="Name"
65 Grid.Column="1" MinWidth="60" Margin="5 0 0 0"/>
66 </Grid>
67 </DataTemplate>
68 </ListBox.ItemTemplate>
69 </ListBox>
70 </GroupBox>
71 </ControlTemplate>
72 </Setter.Value>
73 </Setter>
74 </Style>
75 </ListBox.ItemContainerStyle>
76 </ListBox>
77 </GroupBox>
代碼有點多，但結構還算清晰，編譯也能通過。但是，在頁面加載時拋出了NullReference異常，后臺代碼設置的斷點都沒執行到。我任勞任怨地開始排查各段代碼，最后發現問題出在上述代碼的38行到47行之間，我不敢相信自己的眼睛，于是將異常代碼用另寫的一個測試按鈕<Button Content="Test" />代替，運行無問題。我接著開始重啟VS、重啟機子、拷貝代碼的艱苦旅程，問題依舊。最后我靈光乍現，取消注冊Click事件，運行無問題。此時我脆弱的大腦已經不堪思索，在嘗試用Command代替Event之前，我將希望投給了Bing（經過xx多年努力，Google已經成功被罷用了），發現有人遇到同我一樣的問題——Binding to a converter and having a separate button's event assigned results in a nullreference exception?雖然提問并不十分準確，但描述的問題與我的類似，非常幸運的是，有高手解答了。在查看了相關網址之后，我大致心中有數，在此作一紀錄。
問題產生前提：
- You have a Microsoft .NET Framework 4.0-based Windows Presentation Foundation (WPF) application.
- In the application, there is one template that is nested inside another template.
- The inner (nested) template contains a control that specifies a style and an event. The style references a static resource.
解決方法：
- Set the style reference to a dynamic resource.
- Set the inner template as a resource for the outer template, and then remove the nest relationship.
更改后的代碼相當簡單，我就不貼出來了。
最后，我想把上面的整個GroupBox作為一個DataTemplate放到Resource中供頁面元素統一調用。
1 <DataTemplate x:Key="materielOutGPXTemplate">
2 <GroupBox ……
3 </DataTemplate>
然后同樣的異常又拋出來了。也許最外圍的DataTemplate也作為一層計算在內，此時第一個GroupBox的HeaderTemplate變成嵌套的內層了，又或許我的這個情況導致了多層嵌套，事情會變得更加復雜？反正我按照前述的兩個方法都沒能解決該問題，只好只將GroupBox的其余部分放入Resources中。世間事無完美，我只能這么安慰自己了。
轉載請注明本文出處：http://www.rzrgm.cn/newton/archive/2012/12/30/2839520.html
浙公網安備 33010602011771號